search

l-lin / angular-datatables

DataTables with Angular
https://l-lin.github.io/angular-datatables/
MIT License
1.57k stars 486 forks source link

Add unit tests to demo project #1579

Closed shanmukhateja closed 3 years ago

shanmukhateja commented 3 years ago

I'm opening this PR as continuation to #1529 I couldn't re-open my previous PR so here we go again!

Features:

Provides unit tests for following entities:

[ x ] Basic examples [ x ] Advanced examples

Unit test for NgTemplateRef component isn't working due to a race condition with dtOptions Input binding on the directive and dtTrigger inside component's ngAfterViewInit.

I might cover unit tests for Extensions examples in a future PR but this takes precendence.

Closes #1513

l-lin commented 3 years ago

Nice! :+1:

Some suggestion: I noticed we don't have any CI on the demo project. We should add another Github action workflow to run the tests on the demo project.

I tried to run the tests in local and I got some errors: 

./src/app/app.component.css - Error: Module build failed (from ./node_modules/raw-loader/dist/cjs.js):
TypeError: (0 , _schemaUtils.validate) is not a function
    at Object.rawLoader (/home/llin/perso/angular-datatables/demo/node_modules/raw-loader/dist/index.js:18:29)

I'm not sure what I'm missing...

shanmukhateja commented 3 years ago

@l-lin that's what I'm planning on doing next. I'll create the workflow after we merge this PR.

Could you try deleting node_modules,package-lock.json and run npm install?

Also, in order to merge this PR, I need to create a test case for NgTemplateRef which is currently in a race condition as explained above. This involves adding support for dtTrigger.next() and displayTable to accept dtOptions parameter to update the internal variable inside displayTable. Do I need a new branch for this or should I apply it here?

l-lin commented 3 years ago

@l-lin that's what I'm planning on doing next. I'll create the workflow after we merge this PR.

:ok_hand:

Could you try deleting node_modules,package-lock.json and run npm install?

Indeed, the package-lock.json was the issue...

Also, in order to merge this PR, I need to create a test case for NgTemplateRef which is currently in a race condition as explained above. This involves adding support for dtTrigger.next() and displayTable to accept dtOptions parameter to update the internal variable inside displayTable. Do I need a new branch for this or should I apply it here?

Since it looks like some change in the library code, it would be best to update in another PR.

shanmukhateja commented 3 years ago

@l-lin please check if the unit tests passed and the unit test itself is suitable for the component(s).

Finally, I can see the finish line on this.

l-lin commented 3 years ago

issue: Some tests are not passing:

error properties: Object({ longStack: 'TypeError: Cannot read property 'aDataSort' of undefined
    at _fnSortFlatten (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:5929:1)
    at _fnSortingClasses (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:6267:1)
    at loadedInit (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1213:1)
    at HTMLTableElement.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1311:1)
    at Function.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:385:1)
    at jQuery.fn.init.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:207:1)
    at jQuery.fn.init.DataTable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:869:1)
    at jQuery.fn.i ...
error properties: Object({ longStack: 'TypeError: Cannot read property 'aDataSort' of undefined
    at _fnSortFlatten (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:5929:1)
    at _fnSortingClasses (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:6267:1)
    at loadedInit (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1213:1)
    at HTMLTableElement.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1311:1)
    at Function.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:385:1)
    at jQuery.fn.init.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:207:1)
    at jQuery.fn.init.DataTable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:869:1)
    at jQuery.fn.i ...
TypeError: Cannot read property 'querySelector' of null
    at http://localhost:9876/_karma_webpack_/webpack:/src/app/advanced/using-ng-template-ref.component.spec.ts:73:43
    at <Jasmine>
    at fulfilled (http://localhost:9876/_karma_webpack_/main.js:1436:58)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/proxy.js:126:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:371:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:134:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:1276:1
    at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:406:1)
    at ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/proxy.js:157:1)
error properties: Object({ longStack: 'TypeError: Cannot read property 'aDataSort' of undefined
    at _fnSortFlatten (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:5929:1)
    at _fnSortingClasses (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:6267:1)
    at loadedInit (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1213:1)
    at HTMLTableElement.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1311:1)
    at Function.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:385:1)
    at jQuery.fn.init.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:207:1)
    at jQuery.fn.init.DataTable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:869:1)
    at jQuery.fn.i ...
shanmukhateja commented 3 years ago

issue: Some tests are not passing:

* UsingNgTemplateRefComponent > should have title "Using Angular TemplateRef"
error properties: Object({ longStack: 'TypeError: Cannot read property 'aDataSort' of undefined
    at _fnSortFlatten (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:5929:1)
    at _fnSortingClasses (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:6267:1)
    at loadedInit (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1213:1)
    at HTMLTableElement.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1311:1)
    at Function.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:385:1)
    at jQuery.fn.init.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:207:1)
    at jQuery.fn.init.DataTable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:869:1)
    at jQuery.fn.i ...
* UsingNgTemplateRefComponent > should create the app
error properties: Object({ longStack: 'TypeError: Cannot read property 'aDataSort' of undefined
    at _fnSortFlatten (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:5929:1)
    at _fnSortingClasses (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:6267:1)
    at loadedInit (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1213:1)
    at HTMLTableElement.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1311:1)
    at Function.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:385:1)
    at jQuery.fn.init.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:207:1)
    at jQuery.fn.init.DataTable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:869:1)
    at jQuery.fn.i ...
* UsingNgTemplateRefComponent > should have firstName, lastName columns have text in uppercase
TypeError: Cannot read property 'querySelector' of null
    at http://localhost:9876/_karma_webpack_/webpack:/src/app/advanced/using-ng-template-ref.component.spec.ts:73:43
    at <Jasmine>
    at fulfilled (http://localhost:9876/_karma_webpack_/main.js:1436:58)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/proxy.js:126:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:371:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:134:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:1276:1
    at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:406:1)
    at ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/proxy.js:157:1)
* UsingNgTemplateRefComponent
error properties: Object({ longStack: 'TypeError: Cannot read property 'aDataSort' of undefined
    at _fnSortFlatten (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:5929:1)
    at _fnSortingClasses (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:6267:1)
    at loadedInit (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1213:1)
    at HTMLTableElement.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:1311:1)
    at Function.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:385:1)
    at jQuery.fn.init.each (http://localhost:9876/_karma_webpack_/webpack:/node_modules/jquery/dist/jquery.js:207:1)
    at jQuery.fn.init.DataTable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/datatables.net/js/jquery.dataTables.js:869:1)
    at jQuery.fn.i ...

@l-lin Do you know of a way to reproduce this issue so that I can investigate it?

l-lin commented 3 years ago

@l-lin Do you know of a way to reproduce this issue so that I can investigate it?

This is what I did:

cd /path/to/demo
rm package-lock.json && npm i --force && CHROME_BIN=/snap/bin/chromium npm test

Maybe you can push your package-lock.json?

shanmukhateja commented 3 years ago

Maybe you can push your package-lock.json?

Here you go:

package-lock.json.zip

l-lin commented 3 years ago

Mmh, I still got the error, so it's not the package-lock.json. Maybe it's only on my computer, we'll see when we will integrate the CI.