Add unit tests to demo project #1579

shanmukhateja · 2021-08-01T10:10:51Z

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 · 2021-08-01T14:43:36Z

Nice! 👍

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 · 2021-08-01T16:49:38Z

@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 · 2021-08-02T07:49:13Z

@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?

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.

- extends from `tsconfig.json` - fix esModuleInterop flag error

- send dtOptions to trigger event - add unit tests

shanmukhateja · 2021-08-08T05:00:47Z

@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 · 2021-08-08T09:42:55Z

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 ...

demo/src/app/advanced/individual-column-filtering.component.spec.ts

demo/src/app/basic/with-ajax.component.spec.ts

demo/src/app/advanced/using-ng-template-ref.component.ts

shanmukhateja · 2021-08-11T03:49:37Z

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 · 2021-08-13T17:50:37Z

@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?

- part 2 of d6fbd0b

shanmukhateja · 2021-08-14T15:49:22Z

Maybe you can push your package-lock.json?

Here you go:

package-lock.json.zip

l-lin · 2021-08-16T07:05:52Z

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.

shanmukhateja added enhancement pinned Issues to be ignored by Stalebot labels Aug 1, 2021

shanmukhateja requested a review from l-lin August 1, 2021 10:10

shanmukhateja force-pushed the add-unit-tests branch from a5bfd08 to 1be05c3 Compare August 8, 2021 03:57

shanmukhateja added 19 commits August 8, 2021 09:38

fix: tests can't find DOM types

b9103bc

feat: update AppComponent tests

bd280d2

feat: Add tests for zero-config component

1733d64

feat: add tests for with-options component

ce29c29

feat: tests for with-ajax component

aced589

WIP feat: server-side-angular-way test

8abac6a

feat(demo): Upgrade demo project to Angular v12

6c3c243

fix(tests): fix up server-side-angular-way, with-ajax

913f31d

fix(tests): tsconfig.spec.json bug fixes

7f68294

- extends from `tsconfig.json` - fix esModuleInterop flag error

feat: tests for angular-way component

42ff9c0

feat: add tests for custom-range-search component

7e23fcb

feat: add tests for dt-instance component

9299f1d

feat: add tests for individual column filter component

d434181

feat: add tests for load-dt-options-with-promise component

3d49d39

feat: add tests for multiple-tables component

616e810

feat: add tests for rerender component

f586d1f

feat(demo): add unit tests for router-link.component

67e05cf

feat(demo): add unit tests for row-click-event component

35c7632

feat(demo): add unit tests for using-ng-pipe component

b633d5b

shanmukhateja force-pushed the add-unit-tests branch from 1be05c3 to b633d5b Compare August 8, 2021 04:08

feat: UsingNgTemplateRef update

9fd5e38

- send dtOptions to trigger event - add unit tests

shanmukhateja marked this pull request as ready for review August 8, 2021 04:58

l-lin suggested changes Aug 8, 2021

View reviewed changes

shanmukhateja added 2 commits August 10, 2021 21:39

fix(tests): remove redunant tslint comment

d6fbd0b

fix(tests): update comment in ng-template-ref component

195209a

fix: remove tslint comment in spec files

e880fd7

- part 2 of d6fbd0b

l-lin merged commit 2fb311a into l-lin:master Aug 16, 2021

shanmukhateja deleted the add-unit-tests branch August 20, 2021 04:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add unit tests to demo project #1579

Add unit tests to demo project #1579

Uh oh!

shanmukhateja commented Aug 1, 2021 •

edited

Loading

Uh oh!

l-lin commented Aug 1, 2021

Uh oh!

shanmukhateja commented Aug 1, 2021

Uh oh!

l-lin commented Aug 2, 2021

Uh oh!

shanmukhateja commented Aug 8, 2021

Uh oh!

l-lin commented Aug 8, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shanmukhateja commented Aug 11, 2021

Uh oh!

l-lin commented Aug 13, 2021

Uh oh!

shanmukhateja commented Aug 14, 2021

Uh oh!

l-lin commented Aug 16, 2021

Uh oh!

Uh oh!

Add unit tests to demo project #1579

Add unit tests to demo project #1579

Uh oh!

Conversation

shanmukhateja commented Aug 1, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l-lin commented Aug 1, 2021

Uh oh!

shanmukhateja commented Aug 1, 2021

Uh oh!

l-lin commented Aug 2, 2021

Uh oh!

shanmukhateja commented Aug 8, 2021

Uh oh!

l-lin commented Aug 8, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shanmukhateja commented Aug 11, 2021

Uh oh!

l-lin commented Aug 13, 2021

Uh oh!

shanmukhateja commented Aug 14, 2021

Uh oh!

l-lin commented Aug 16, 2021

Uh oh!

Uh oh!

shanmukhateja commented Aug 1, 2021 •

edited

Loading