How to Unit Test with jqxGrid?

[jdhParticipant]

I have a page that uses the Angular jqxGridComponent, and the page works fine when doing ng serve but I cannot for the life of me figure out how to get even a minimal “component exists” unit test to pass on this page, due to internal issues with the grid component I believe.

Within the component (called DupAccountComponent), I have this line in a function: this.myGrid.clearselection(). When running the app, everything is working fine, but my unit test won’t even run due to this issue:

TypeError: Cannot read property 'checkboxelement' of undefined
    at a.(anonymous function).clearselection (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxgrid.selection.js?708978154ec56ec15cce271e0e7b002285575d30:6:2403)
    at Object.a.jqx.invoke (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:18875)
    at Object.a.jqx.jqxWidgetProxy (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:23432)
    at HTMLDivElement.<anonymous> (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:29003)
    at Function.each (http://localhost:9876/base/node_modules/@fmr-pl000123/forecclient3/foreccore.js?d88f680261d2e8d6826b8ecf67bdddef7c8d7736:10231:43)
    at jQuery.fn.init.each (http://localhost:9876/base/node_modules/@fmr-pl000123/forecclient3/foreccore.js?d88f680261d2e8d6826b8ecf67bdddef7c8d7736:9992:28)
    at jQuery.fn.init.a.fn.(anonymous function) [as jqxGrid] (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:28975)
    at jqxGridComponent.clearselection (http://localhost:9876/base/src/test.ts?ca5c83367d4105b276584448dc42a34c0246a4e9:42847:19)
    at DupAccountComponent.resetGrid (http://localhost:9876/base/src/test.ts?ca5c83367d4105b276584448dc42a34c0246a4e9:75720:21)

So I say fine, let me comment that out for the time being and then see if unit tests will run. Nope, now it hangs up on another error that seems similar:

TypeError: Cannot read property 'length' of undefined
    at Function.each (http://localhost:9876/base/node_modules/@fmr-pl000123/forecclient3/foreccore.js?d88f680261d2e8d6826b8ecf67bdddef7c8d7736:10205:31)
    at a.(anonymous function)._getcolumn (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxgrid.js?6de472e5dcd555e54024cd53070bfdd33dcc1a61:8:3771)
    at a.(anonymous function).addfilter (http://localhost:9876/base/src/test.ts?8345d3842275e7b8349d263a6f251b807280f966:105453:28400)
    at Object.a.jqx.invoke (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:18875)
    at Object.a.jqx.jqxWidgetProxy (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:23432)
    at HTMLDivElement.<anonymous> (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:29003)
    at Function.each (http://localhost:9876/base/node_modules/@fmr-pl000123/forecclient3/foreccore.js?d88f680261d2e8d6826b8ecf67bdddef7c8d7736:10231:43)
    at jQuery.fn.init.each (http://localhost:9876/base/node_modules/@fmr-pl000123/forecclient3/foreccore.js?d88f680261d2e8d6826b8ecf67bdddef7c8d7736:9992:28)
    at jQuery.fn.init.a.fn.(anonymous function) [as jqxGrid] (http://localhost:9876/base/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js?2a7b0af44b97c0d9600db0fecebf87929968be84:8:28975)
    at jqxGridComponent.addfilter (http://localhost:9876/base/src/test.ts?8345d3842275e7b8349d263a6f251b807280f966:42760:19)
    at Object.addFilters (http://localhost:9876/base/src/test.ts?8345d3842275e7b8349d263a6f251b807280f966:105045:17)
    at DupAccountComponent.showOpen (http://localhost:9876/base/src/test.ts?8345d3842275e7b8349d263a6f251b807280f966:75714:16)

It seems like the test just isn’t getting all the code it needs imported in order to know what to do, but I have everything imported in my unit test as I do in my component, so I don’t know what the problem is. Any help would be greatly appreciated, as I’ve been stuck unable to write any test cases for over a week because it keeps hanging up on stuff like this.

[jdhParticipant]

Is it because of all the jqwidgets scripts I had to add to my .angular-cli.json file?

"scripts": [
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxbuttons.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxscrollbar.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxmenu.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcheckbox.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxlistbox.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownlist.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.sort.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.pager.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.selection.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.edit.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.filter.js"
      ],

Do those not get used when unit testing?

[Peter StoevKeymaster]

Hi jdh,

TypeError: Cannot read property ‘checkboxelement’ of undefined most probably means that the component is not initialized at all or is not rendered.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts