Component with attribute selector

[mleimer]

Problem

Based on the examples https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app/src/app/examples/02-input-output.ts and https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app/src/app/examples/02-input-output.spec.ts

Given that a component contains an attribute within its selector
e.g. app-fixture[value]

Then it is not possible to render the component with:
await render(InputOutputComponent, { componentProperties: { value: 47, sendValue: { emit: sendValue, } as any, }, });

Instead, the template way must be chosen:
await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>', { declarations: ['InputOutputComponent'], componentProperties: { sendValue: sendSpy, }, });

Suggestion

• Add documentation that the regular render does not work with attribute components OR if there is a way to make it work, enhance the code base
• Update the example, as it uses a deprecated render-method where the template is passed as a property in the second argument instead of the first argument.

[timdeschryver]

Thanks for creating this issue @mleimer .
This is the first time that this use case pops up, and I don't think there's something that we can provide to fix this for now - but I'll think on it a while longer. For now, adding a note in the docs is the best way to go.

Updating the example is also a good point that you bring up.

Do you want to create a PR for one/both of these suggestions?

[mleimer]

I created a PR at #264

• It updates existing examples by using the new render-method to render templates
• It adds a new example and a note how to render components with an attribute selector
• It does not provide a solution how to handle components with an attribute selector without using a template

[timdeschryver]

Thanks for your help @mleimer

[github-actions]

🎉 This issue has been resolved in version 11.0.0-beta.3 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 11.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀