search

getsaf / shallow-render

Angular testing made easy with shallow rendering and easy mocking. https://getsaf.github.io/shallow-render
MIT License
273 stars 25 forks source link

Error: MockOfNzToolTipComponent cannot be used as an entry component. #187

Closed akaztp closed 3 years ago

akaztp commented 4 years ago 
Error: MockOfNzToolTipComponent cannot be used as an entry component.
    at syntaxError (/home/ztp/repos/bee/packages/compiler/src/util.ts:108:17)
    at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getEntryComponentMetadata (/home/ztp/repos/bee/packages/compiler/src/metadata_resolver.ts:1114:13)

While upgrading our project to Angular 10 we have this kind of error on a couple of hundreds of tests, but only for a few external components. Mind that our app works perfectly, only tests are the problem.

This error is reported by Angular as a consequence of two conditions that return false on Angular's code and maybe by looking at them you might get a hint of what is happening. The code is at: https://github.com/angular/angular/blob/d1ea1f4c7f3358b730b0d94e65b00bc28cae279c/packages/compiler/src/metadata_resolver.ts#L1102

I've tried running the tests with ivy enabled and disabled.

And only these components are problematic and we use many others:

Interesting is that all of these produce a popup, but I could not find any clue examining all of their source code.

If I add all those to a neverMock() the problem goes away, bet feels like we're dodging the problem.

Thanks, and thanks for shallow-render, has been a time saver!

getsaf commented 4 years ago

This is an interesting find. I wonder if there is something specific about the mocks that do not allow them to be used as entry components. I'll see if I can reproduce this and debug it.

getsaf commented 4 years ago

Weird, it looks like shallow-render is detecting the NzToolTiip component to be a Directive instead of a Component when mocking it.

Weird thing is that it is both a component and a directive. I didn't even know that was possible. I think I will need to iterate through all the annotations when mocking and apply them all to the mock so we end up with both @Component and @Directive to mimic the actual component. I suspect this also applies to the inputs/outputs too but we'll see.

akaztp commented 4 years ago

Maybe that is linked to this change in Angular 10:

"This migration adds an empty @directive() decorator to undecorated base classes that:

from: https://angular.io/guide/migration-undecorated-classes

getsaf commented 4 years ago

v10.2.1 should fix this issue, give it a go and let me know if you have any issues.

akaztp commented 3 years ago

I've just applied this to our project and all good! Many thanks!