@ContentChild mocking fails with html attribute selection

[joebell1329]

When mocking a component that has @ContentChild projection, the generated mock will be invalid if the @ContentChild uses an HTML attribute selector.

e.g. @ContentChild('[projectedContent]'... with <div projectedContent>This is not mockable</div>

This does not appear to be an issue when using Angular template reference selection

e.g. @ContentChild('projectedContent'... with <div #projectedContent>This is mockable</div>

When running the tests, they fail with the error TypeError: Cannot read property 'undefined' of undefined

I've created a repo to demonstrate the issue at https://github.com/joebell1329/contentProjectionDemo

When running the tests in the demo, the issue seems to be with the generated HTML in ng://DynamicTestModule/MockOfNotMockableComponent.html

The error is thrown on the line <div *ngIf="mockRender_[projectedContent]" data-key="[projectedContent]">

[satanTime]

Hi, I'll take a look during next days. Current implementation supports only ids, but I'll check if it's possible to extend it to support not only id but also any selectors.

[satanTime]

I've checked your case and if you run your code - you can't see anything. Neither "This is mockable" nor "This is not mockable". Because @ContentChild works with ng-template.
To make your code working we need to replace div with ng-template then you can see that actually only the first component (with id) works and the second with attribute still doesn't render anything.
I would recommend you to update your code to use ng-templates with ids and then you shouldn't have issues with Angular updates and mocking them by ng-mocks.

Another case, when you want to continue usage of div then please use ng-content to render it inside of child components.

[satanTime]

Hi @mattwilson1024 and @joebell1329, have you solved the issue or you need any assistance?

[satanTime]

I'm closing the issue due to no feedback, feel free to reopen it if you meet any issues.

[GerkinDev]

Hi,

I'm experiencing this issue as well. In my case, I want to use an optional ContentChild selected by attribute. The error TypeError: Cannot read property 'undefined' of undefined is thrown if I do not declare an ng-template with the selected attribute.

Should I open a new issue with proper sample ?

[satanTime]

Hi @GerkinDev, yes, please create a new one with an example. Finally, this weekend I have my hands on the issues.