feat: testing directives

Author: timdeschryver

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

@@ -1,11 +1,14 @@
-import { Type } from '@angular/core';
+import { Type, DebugElement } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { BoundFunction, FireObject, Queries, queries } from '@testing-library/dom';
 import { UserEvents } from './user-events';
 
 export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
 
-export interface RenderResult extends RenderResultQueries, FireObject, UserEvents {
+export interface RenderResult<ComponentType, WrapperType = ComponentType>
+  extends RenderResultQueries,
+    FireObject,
+    UserEvents {
   /**
    * @description
    * The containing DOM node of your rendered Angular Component.
@@ -30,14 +33,22 @@ export interface RenderResult extends RenderResultQueries, FireObject, UserEvent
   detectChanges: () => void;
   /**
    * @description
-   * The Angular `ComponentFixture` of the component.
+   * The Angular `ComponentFixture` of the component or the wrapper.
+   * If a template is provided, it will be the fixture of the wrapper.
    *
    * For more info see https://angular.io/api/core/testing/ComponentFixture
    */
-  fixture: ComponentFixture<any>;
+  fixture: ComponentFixture<WrapperType>;
+  /**
+   * @description
+   * The Angular `DebugElement` of the component.
+   *
+   * For more info see https://angular.io/api/core/DebugElement
+   */
+  debugElement: DebugElement;
 }
 
-export interface RenderOptions<C, Q extends Queries = typeof queries> {
+export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {
   /**
    * @description
    * Will call detectChanges when the component is compiled
@@ -139,7 +150,7 @@ export interface RenderOptions<C, Q extends Queries = typeof queries> {
    *  }
    * })
    */
-  componentProperties?: Partial<C>;
+  componentProperties?: Partial<ComponentType>;
   /**
    * @description
    * A collection of providers to inject dependencies of the component.
@@ -175,30 +186,48 @@ export interface RenderOptions<C, Q extends Queries = typeof queries> {
   queries?: Q;
   /**
    * @description
-   * An Angular component to wrap the component in.
+   * Exclude the component to be automatically be added as a declaration.
+   * This is needed when the component is declared in an imported module.
    *
    * @default
-   * `WrapperComponent`, an empty component that strips the `ng-version` attribute
+   * false
    *
    * @example
    * const component = await render(AppComponent, {
-   *  wrapper: CustomWrapperComponent
+   *  imports: [AppModule], // a module that includes AppComponent
+   *  excludeComponentDeclaration: true
    * })
    */
-  wrapper?: Type<any>;
+  excludeComponentDeclaration?: boolean;
+}
+
+export interface RenderDirectiveOptions<DirectiveType, WrapperType, Q extends Queries = typeof queries>
+  extends RenderComponentOptions<DirectiveType, Q> {
   /**
    * @description
-   * Exclude the component to be automatically be added as a declaration.
-   * This is needed when the component is declared in an imported module.
+   * 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>`
+   * })
+   */
+  template: string;
+  /**
+   * @description
+   * An Angular component to wrap the component in.
+   * The template will be overridden with the `template` option.
    *
    * @default
-   * false
+   * `WrapperComponent`, an empty component that strips the `ng-version` attribute
    *
    * @example
-   * const component = await render(AppComponent, {
-   *  imports: [AppModule], // a module that includes AppComponent
-   *  excludeComponentDeclaration: true
+   * const component = await render(SpoilerDirective, {
+   *  template: `<div spoiler message='SPOILER'></div>`
+   *  wrapper: CustomWrapperComponent
    * })
    */
-  excludeComponentDeclaration?: boolean;
+  wrapper?: Type<WrapperType>;
+  componentProperties?: Partial<any>;
 }

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

@@ -1,49 +1,49 @@
-import { Component, DebugElement, ElementRef, OnInit, Type } from '@angular/core';
+import { Component, ElementRef, OnInit, Type } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { fireEvent, FireFunction, FireObject, getQueriesForElement, prettyDOM } from '@testing-library/dom';
-import { RenderOptions, RenderResult } from './models';
+import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
 import { createSelectOptions, createType } from './user-events';
 
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent implements OnInit {
-  constructor(private elemtRef: ElementRef) {}
+  constructor(private elementRef: ElementRef) {}
 
   ngOnInit() {
-    this.elemtRef.nativeElement.removeAttribute('ng-version');
+    this.elementRef.nativeElement.removeAttribute('ng-version');
   }
 }
 
-export async function render<T>(template: string, renderOptions: RenderOptions<T>): Promise<RenderResult>;
-export async function render<T>(component: Type<T>, renderOptions?: RenderOptions<T>): Promise<RenderResult>;
-export async function render<T>(
-  templateOrComponent: string | Type<T>,
-  renderOptions: RenderOptions<T> = {},
-): Promise<RenderResult> {
+export async function render<ComponentType>(
+  component: Type<ComponentType>,
+  renderOptions?: RenderComponentOptions<ComponentType>,
+): Promise<RenderResult<ComponentType, ComponentType>>;
+export async function render<DirectiveType, WrapperType = WrapperComponent>(
+  component: Type<DirectiveType>,
+  renderOptions?: RenderDirectiveOptions<DirectiveType, WrapperType>,
+): Promise<RenderResult<DirectiveType, WrapperType>>;
+
+export async function render<SutType, WrapperType = SutType>(
+  sut: Type<SutType>,
+  renderOptions: RenderComponentOptions<SutType> | RenderDirectiveOptions<SutType, WrapperType> = {},
+): Promise<RenderResult<SutType>> {
   const {
     detectChanges = true,
     declarations = [],
     imports = [],
     providers = [],
     schemas = [],
     queries,
+    template,
     wrapper = WrapperComponent,
     componentProperties = {},
     componentProviders = [],
     excludeComponentDeclaration = false,
-  } = renderOptions;
-
-  const isTemplate = typeof templateOrComponent === 'string';
-  const componentDeclarations = declareComponents({
-    templateOrComponent,
-    wrapper,
-    isTemplate,
-    excludeComponentDeclaration,
-  });
+  } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
 
   TestBed.configureTestingModule({
-    declarations: [...declarations, ...componentDeclarations],
+    declarations: addAutoDeclarations(sut, { declarations, excludeComponentDeclaration, template, wrapper }),
     imports: addAutoImports(imports),
     providers: [...providers],
     schemas: [...schemas],
@@ -58,9 +58,8 @@ export async function render<T>(
       });
   }
 
-  const fixture = isTemplate
-    ? createWrapperComponentFixture(templateOrComponent as string, { wrapper, componentProperties })
-    : createComponentFixture(templateOrComponent as Type<T>, { componentProperties });
+  const fixture = createComponentFixture(sut, { template, wrapper });
+  setComponentProperties(fixture, { componentProperties });
 
   await TestBed.compileComponents();
 
@@ -80,98 +79,71 @@ export async function render<T>(
     {} as FireFunction & FireObject,
   );
 
+  const debugElement = fixture.debugElement.query(By.directive(sut));
+
   return {
     fixture,
+    debugElement,
     container: fixture.nativeElement,
     debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
     detectChanges: () => fixture.detectChanges(),
     ...getQueriesForElement(fixture.nativeElement, queries),
     ...eventsWithDetectChanges,
     type: createType(eventsWithDetectChanges),
     selectOptions: createSelectOptions(eventsWithDetectChanges),
-  } as any;
+  };
 }
 
-/**
- * Creates the wrapper component and sets its the template to the to-be-tested component
- */
-function createWrapperComponentFixture<T>(
-  template: string,
-  {
-    wrapper,
-    componentProperties,
-  }: {
-    wrapper: RenderOptions<T>['wrapper'];
-    componentProperties: RenderOptions<T>['componentProperties'];
-  },
-): ComponentFixture<any> {
-  TestBed.overrideComponent(wrapper, {
-    set: {
-      template: template,
-    },
-  });
-
-  const fixture = TestBed.createComponent(wrapper);
-  // get the component selector, e.g. <foo color="green"> and <foo> results in foo
-  const componentSelector = template.match(/\<(.*?)\ /) || template.match(/\<(.*?)\>/);
-  if (!componentSelector) {
-    throw Error(`Template ${template} is not valid.`);
+function createComponentFixture<SutType>(
+  component: Type<SutType>,
+  { template, wrapper }: Pick<RenderDirectiveOptions<SutType, any>, 'template' | 'wrapper'>,
+): ComponentFixture<SutType> {
+  if (template) {
+    TestBed.overrideTemplate(wrapper, template);
+    return TestBed.createComponent(wrapper);
   }
-
-  const sut = fixture.debugElement.query(By.css(componentSelector[1]));
-  setComponentProperties(sut, { componentProperties });
-  return fixture;
-}
-
-/**
- * Creates the components and sets its properties
- */
-function createComponentFixture<T>(
-  component: Type<T>,
-  {
-    componentProperties = {},
-  }: {
-    componentProperties: RenderOptions<T>['componentProperties'];
-  },
-): ComponentFixture<T> {
-  const fixture = TestBed.createComponent(component);
-  setComponentProperties(fixture, { componentProperties });
-  return fixture;
+  return TestBed.createComponent(component);
 }
 
-/**
- * Set the component properties
- */
-function setComponentProperties<T>(
-  fixture: ComponentFixture<T> | DebugElement,
-  {
-    componentProperties = {},
-  }: {
-    componentProperties: RenderOptions<T>['componentProperties'];
-  },
+function setComponentProperties<SutType>(
+  fixture: ComponentFixture<SutType>,
+  { componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
 ) {
   for (const key of Object.keys(componentProperties)) {
     fixture.componentInstance[key] = componentProperties[key];
   }
   return fixture;
 }
 
-function declareComponents({ isTemplate, wrapper, excludeComponentDeclaration, templateOrComponent }) {
-  if (isTemplate) {
-    return [wrapper];
-  }
+function addAutoDeclarations<SutType>(
+  component: Type<SutType>,
+  {
+    declarations,
+    excludeComponentDeclaration,
+    template,
+    wrapper,
+  }: Pick<
+    RenderDirectiveOptions<SutType, any>,
+    'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'
+  >,
+) {
+  const wrappers = () => {
+    return template ? [wrapper] : [];
+  };
 
-  if (excludeComponentDeclaration) {
-    return [];
-  }
+  const components = () => {
+    return excludeComponentDeclaration ? [] : [component];
+  };
 
-  return [templateOrComponent];
+  return [...declarations, ...wrappers(), ...components()];
 }
 
 function addAutoImports(imports: any[]) {
-  if (imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1) {
-    return imports;
-  }
+  const animations = () => {
+    const animationIsDefined =
+      imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1;
+    return animationIsDefined ? [] : [NoopAnimationsModule];
+  };
 
-  return [...imports, NoopAnimationsModule];
+  return [...imports, ...animations()];
 }

projects/testing-library/tests/debug.spec.ts

@@ -12,9 +12,7 @@ class FixtureComponent {}
 
 test('debug', async () => {
   jest.spyOn(console, 'log').mockImplementation(() => {});
-  const { debug } = await render('<fixture></fixture>', {
-    declarations: [FixtureComponent],
-  });
+  const { debug } = await render(FixtureComponent);
 
   debug();
 
@@ -24,9 +22,7 @@ test('debug', async () => {
 
 test('debug allows to be called with an element', async () => {
   jest.spyOn(console, 'log').mockImplementation(() => {});
-  const { debug, getByTestId } = await render('<fixture></fixture>', {
-    declarations: [FixtureComponent],
-  });
+  const { debug, getByTestId } = await render(FixtureComponent);
   const btn = getByTestId('btn');
 
   debug(btn);