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