feat: testing directives

[timdeschryver]

This PR allows us to test directives by defining a template.
The template will be used to set the WrapperComponents's template, it's also possible to define a custom wrapper component.

It also introduces a DebugElement in the result to for easy access to the directive.
The fixture returned in case of a directive test, would be the wrapper component.

test('it is possible to test directives', async () => { const component = await render(SpoilerDirective, { template: `<div spoiler></div>`, }); }); test('it is possible to test directives with props', async () => { const hidden = 'SPOILER ALERT'; const visible = 'There is nothing to see here ...'; const component = await render(SpoilerDirective, { template: `<div spoiler [hidden]="hidden" [visible]="visible"></div>`, componentProperties: { hidden, visible, }, }); });

This introduces a couple of breaking changes:

• The signature where you could define your component via the template syntax has been removed.

BEFORE:

const component = render(`<person-details></person-details>`)

AFTER:

const component = render(PersonDetails)

• It isn't possible anymore to define a wrapper while testing components, I haven't found a good use case to allow this.

const component = render(PersonDetails, { wrapper: PersonWrapper })

[timdeschryver]

🎉 This PR is included in version 8.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀