search

maxisam / ngx-clipboard

A pure angular clipboard directive
http://maxisam.github.io/ngx-clipboard/
MIT License
505 stars 93 forks source link

`TypeError: this.clickListener is not a function` #288

Closed junglebarry closed 2 years ago

junglebarry commented 2 years ago

When running tests for components that embed ngx-clipboard I get the following:

ERROR: 'Error during cleanup of component',...

and:

TypeError: this.clickListener is not a function
    at ClipboardDirective.ngOnDestroy (http://localhost:9876/_karma_webpack_/node_modules/ngx-clipboard/__ivy_ngcc__/fesm2015/ngx-clipboard.js:216:1)
    at executeOnDestroys (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9261:1)
    at cleanUpView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9185:1)
    at destroyViewTree (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9018:1)
    at destroyLView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9163:1)
    at RootViewRef.destroy (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9777:1)
    at ComponentRef$1.destroy (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24147:1)
    at ComponentFixture.destroy (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:330:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:2052:1

This is not causing a test failure; it's just reporting this issue during component cleanup.

It looks from the code like this function is initialised during ngOnInit, but using some ngZone magic to run in the root zone:

https://github.com/maxisam/ngx-clipboard/blob/8d620ccacb5dd1da2a6f534ad53e1aa34b45d7a9/projects/ngx-clipboard/src/lib/ngx-clipboard.directive.ts#L47-L55

My guess is that for whatever reason, the tests have not fully initialised this before they fail and complete, so when the component cleanup runs:

https://github.com/maxisam/ngx-clipboard/blob/8d620ccacb5dd1da2a6f534ad53e1aa34b45d7a9/projects/ngx-clipboard/src/lib/ngx-clipboard.directive.ts#L57-L60

... the value of this.clickListener has never been initialised, hence the error.

I'm happy to raise a PR to address this (maybe initialise with an empty function; or check it's defined before executing), but wanted to check whether there's something deeper I'm misunderstanding before doing so.

It's certainly not happening in all my component tests; just a subset where there's quite a lot of behaviour being tested ("integration" tests of top-level routed components). The tests are not related to ngx-clipboard, either; rather it's reporting on all tests for that component.