Component with attribute selector

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.

[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

[github-actions[bot]]

🎉 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 📦🚀