Skip to content

Angular 13: Errors when running Unit Tests #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
aarontoys opened this issue Jun 30, 2022 · 3 comments · Fixed by #246
Closed

Angular 13: Errors when running Unit Tests #198

aarontoys opened this issue Jun 30, 2022 · 3 comments · Fixed by #246

Comments

@aarontoys
Copy link

I get serval errors when running units tests after upgrading to Angular 13.

stacktrace: TypeError: Cannot read properties of undefined (reading 'data')
TypeError: Cannot read properties of undefined (reading 'data')
    at PlotlyComponent.createFigure (http://localhost:9876/_karma_webpack_/webpack:/node_modules/angular-plotly.js/__ivy_ngcc__/fesm2015/angular-plotly.js.js:285:1)
    at PlotlyComponent.ngOnDestroy (http://localhost:9876/_karma_webpack_/webpack:/node_modules/angular-plotly.js/__ivy_ngcc__/fesm2015/angular-plotly.js.js:195:1)
    at executeOnDestroys (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:7368:1)
    at cleanUpView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:7271:1)
    at destroyViewTree (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:7097:1)
    at destroyLView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:7249:1)
    at RootViewRef.destroy (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:21290:1)
    at ComponentRef.destroy (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:21696:1)
    at ComponentFixture.destroy (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.mjs:227:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.mjs:1830:1}

Error: 1 component threw errors during cleanup
    at TestBedRender3.destroyActiveFixtures (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.mjs:1842:1)
    at TestBedRender3.resetTestingModule (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.mjs:1677:1)
    at Function.resetTestingModule (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.mjs:1620:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.mjs:2006:1)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:409:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:303:43)
    at _ZoneDelegate.push.67809._ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:408:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:169:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:599:38)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:614:24)

zone.js:218 Uncaught Error: Uncaught (in promise): Error: Resize must be passed a displayed plot div element.
Error: Resize must be passed a displayed plot div element.
...
(full stack trace can be found in reproduction repo).

This repo can produce the error.

Thanks in advance for your help resolving this issue.
@nirakar5656jad
Copy link

I have faced the same issue when trying to unit test this angular component.
Angular version 13

@rk-7
Copy link
Contributor

rk-7 commented Mar 29, 2023

@aarontoys - Using waitForAsync() in the tests should help.

I figured that the tests did not account for the async nature of plotly.

During creation of a plot, it accesses the DOM elements. By the time the createPlot is being executed, the component is destroyed so are the elements associated with it.

I have created a PR to your tests repo. aarontoys/angular-plotly-test#1
I hope it helps. Please let me know if something does not feel right.

@nirakar5656jad does this help you too?

paulirwin added a commit to paulirwin/angular-plotly.js that referenced this issue Jul 26, 2023
@paulirwin
Fix: plotly#198 - Error thrown in ngOnDestroy if plot not yet initial…
e275369 
…ized

This can occur in unit tests if you do not await the component being
stable, so this resolves plotly#198. However, this could also happen if
ngOnDestroy is called very quickly after ngOnInit.
@paulirwin paulirwin mentioned this issue Jul 26, 2023
Merged
@paulirwin
Copy link
Contributor

I have just submitted a PR that should fix this issue.

While indeed waiting on the fixture to stabilize would be ideal if you're asserting that the plot has fully loaded, sometimes that is not directly relevant to what's under test. Ideally, ngOnDestroy would not throw if the plot has not been initialized yet. My PR prevents that from occurring.

Note that this can also theoretically happen if ngOnDestroy is called too quickly after ngOnInit. I'm open to feedback on if the PR could be improved, but at least this avoids the error.

andrefarzat pushed a commit that referenced this issue Aug 7, 2023
@paulirwin @andrefarzat
Fix: #198 - Error thrown in ngOnDestroy if plot not yet initialized
1f9da25 
This can occur in unit tests if you do not await the component being
stable, so this resolves #198. However, this could also happen if
ngOnDestroy is called very quickly after ngOnInit.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: #198 - Error thrown in ngOnDestroy if plot not yet initialized paulirwin/angular-plotly.js
4 participants
@paulirwin @aarontoys @nirakar5656jad @rk-7