feat: remove RenderDirectiveOptions (#265)

BREAKING CHANGE:

The template property is removed from the render options.
Instead, you can pass it as the first argument of `render.

BEFORE:

```ts
await render(InputOutputComponent, {
  // 👇 this is deprecated
  template: '<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>',
  componentProperties: {
    sendValue: sendSpy,
  },
});
```

AFTER:

```ts
//           👇 Move the template in the first argument
await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>', {
//               👇 Add the component to declarations
  declarations: [InputOutputComponent],
  componentProperties: {
    sendValue: sendSpy,
  },
});
```

Author: timdeschryver

apps/example-app/src/app/examples/11-ng-content.spec.ts

@@ -4,7 +4,7 @@ import { CellComponent } from './11-ng-content';
 
 test('it is possible to test ng-content without selector', async () => {
   const projection = 'it should be showed into a p element!';
-
+  
   await render(`<app-fixture data-testid="one-cell-with-ng-content">${projection}</app-fixture>`, {
     declarations: [CellComponent]
   });

projects/testing-library/src/lib/models.ts

@@ -256,43 +256,6 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
   removeAngularAttributes?: boolean;
 }
 
-/**
- * @deprecated Use `render(template, { declarations: [SomeDirective] })` instead.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export interface RenderDirectiveOptions<WrapperType, Properties extends object = {}, Q extends Queries = typeof queries>
-  extends RenderComponentOptions<Properties, Q> {
-  /**
-   * @description
-   * The template to render the directive.
-   * This template will override the template from the WrapperComponent.
-   *
-   * @example
-   * const component = await render(SpoilerDirective, {
-   *  template: `<div spoiler message='SPOILER'></div>`
-   * })
-   *
-   * @deprecated Use `render(template, { declarations: [SomeDirective] })` instead.
-   */
-  template: string;
-  /**
-   * @description
-   * An Angular component to wrap the component in.
-   * The template will be overridden with the `template` option.
-   *
-   * @default
-   * `WrapperComponent`, an empty component that strips the `ng-version` attribute
-   *
-   * @example
-   * const component = await render(SpoilerDirective, {
-   *  template: `<div spoiler message='SPOILER'></div>`
-   *  wrapper: CustomWrapperComponent
-   * })
-   */
-  wrapper?: Type<WrapperType>;
-  componentProperties?: Partial<WrapperType & Properties>;
-}
-
 // eslint-disable-next-line @typescript-eslint/ban-types
 export interface RenderTemplateOptions<WrapperType, Properties extends object = {}, Q extends Queries = typeof queries>
   extends RenderComponentOptions<Properties, Q> {

projects/testing-library/src/lib/testing-library.ts

@@ -26,7 +26,7 @@ import {
   getQueriesForElement,
   queries as dtlQueries,
 } from '@testing-library/dom';
-import { RenderComponentOptions, RenderDirectiveOptions, RenderTemplateOptions, RenderResult } from './models';
+import { RenderComponentOptions, RenderTemplateOptions, RenderResult } from './models';
 import { getConfig } from './config';
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
@@ -36,24 +36,14 @@ export async function render<ComponentType>(
   component: Type<ComponentType>,
   renderOptions?: RenderComponentOptions<ComponentType>,
 ): Promise<RenderResult<ComponentType, ComponentType>>;
-/**
- * @deprecated Use `render(template, { declarations: [DirectiveType] })` instead.
- */
-export async function render<DirectiveType, WrapperType = WrapperComponent>(
-  component: Type<DirectiveType>,
-  renderOptions?: RenderDirectiveOptions<WrapperType>,
-): Promise<RenderResult<WrapperType>>;
 export async function render<WrapperType = WrapperComponent>(
   template: string,
   renderOptions?: RenderTemplateOptions<WrapperType>,
 ): Promise<RenderResult<WrapperType>>;
 
 export async function render<SutType, WrapperType = SutType>(
   sut: Type<SutType> | string,
-  renderOptions:
-    | RenderComponentOptions<SutType>
-    | RenderDirectiveOptions<WrapperType>
-    | RenderTemplateOptions<WrapperType> = {},
+  renderOptions: RenderComponentOptions<SutType> | RenderTemplateOptions<WrapperType> = {},
 ): Promise<RenderResult<SutType>> {
   const { dom: domConfig, ...globalConfig } = getConfig();
   const {
@@ -86,7 +76,6 @@ export async function render<SutType, WrapperType = SutType>(
     declarations: addAutoDeclarations(sut, {
       declarations,
       excludeComponentDeclaration,
-      template,
       wrapper,
     }),
     imports: addAutoImports({
@@ -106,7 +95,7 @@ export async function render<SutType, WrapperType = SutType>(
       TestBed.overrideProvider(provide, provider);
     });
 
-  const componentContainer = createComponentFixture(sut, { template, wrapper });
+  const componentContainer = createComponentFixture(sut, { wrapper });
 
   let fixture: ComponentFixture<SutType>;
   let detectChanges: () => void;
@@ -227,22 +216,18 @@ async function createComponent<SutType>(component: Type<SutType>): Promise<Compo
 
 function createComponentFixture<SutType>(
   sut: Type<SutType> | string,
-  { template, wrapper }: Pick<RenderDirectiveOptions<any>, 'template' | 'wrapper'>,
+  { wrapper }: Pick<RenderTemplateOptions<SutType>, 'wrapper'>,
 ): Type<any> {
   if (typeof sut === 'string') {
     TestBed.overrideTemplate(wrapper, sut);
     return wrapper;
   }
-  if (template) {
-    TestBed.overrideTemplate(wrapper, template);
-    return wrapper;
-  }
   return sut;
 }
 
 function setComponentProperties<SutType>(
   fixture: ComponentFixture<SutType>,
-  { componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
+  { componentProperties = {} }: Pick<RenderTemplateOptions<SutType, any>, 'componentProperties'>,
 ) {
   for (const key of Object.keys(componentProperties)) {
     const descriptor: PropertyDescriptor = Object.getOwnPropertyDescriptor(
@@ -293,19 +278,15 @@ function addAutoDeclarations<SutType>(
   {
     declarations,
     excludeComponentDeclaration,
-    template,
     wrapper,
-  }: Pick<RenderDirectiveOptions<any>, 'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'>,
+  }: Pick<RenderTemplateOptions<any>, 'declarations' | 'excludeComponentDeclaration' | 'wrapper'>,
 ) {
   if (typeof sut === 'string') {
     return [...declarations, wrapper];
   }
 
-  const wrappers = () => (template ? [wrapper] : []);
-
   const components = () => (excludeComponentDeclaration ? [] : [sut]);
-
-  return [...declarations, ...wrappers(), ...components()];
+  return [...declarations, ...components()];
 }
 
 function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>) {

projects/testing-library/tests/render-template.spec.ts

@@ -62,15 +62,6 @@ test('the component renders', async () => {
   expect(screen.getByText('Hello Angular!')).toBeInTheDocument();
 });
 
-test('the directive renders (compatibility with the deprecated signature)', async () => {
-  const view = await render(OnOffDirective, {
-    template: '<div onOff></div>',
-  });
-
-  // eslint-disable-next-line testing-library/no-container
-  expect(view.container.querySelector('[onoff]')).toBeInTheDocument();
-});
-
 test('uses the default props', async () => {
   await render('<div onOff></div>', {
     declarations: [OnOffDirective],