feat: add wrapper and queries render options

Author: timdeschryver

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

@@ -6,16 +6,18 @@ export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in ke
 
 export interface RenderResult extends RenderResultQueries, FireObject {
   container: HTMLElement;
-  debug: (element: HTMLElement) => void;
+  debug: (element?: HTMLElement) => void;
   fixture: ComponentFixture<any>;
 }
 
-export interface Options {
+export interface RenderOptions<W = any, Q extends Queries = typeof queries> {
   detectChanges?: boolean;
   declarations: any[];
   providers?: any[];
   imports?: any[];
   schemas?: any[];
+  queries?: Q;
+  wrapper?: Type<W>;
 }
 
 export interface ComponentInput<T> {

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

@@ -1,26 +1,34 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit, ElementRef, Type } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { getQueriesForElement, prettyDOM, fireEvent, FireObject, FireFunction } from 'dom-testing-library';
 
-import { RenderResult, Options, ComponentInput } from './models';
+import { RenderResult, RenderOptions, ComponentInput } from './models';
 
-@Component({ selector: 'test-component', template: '' })
-class TestComponent implements OnInit {
+@Component({ selector: 'wrapper-component', template: '' })
+class WrapperComponent implements OnInit {
   constructor(private elemtRef: ElementRef) {}
 
   ngOnInit() {
     this.elemtRef.nativeElement.removeAttribute('ng-version');
   }
 }
 
-export async function render<T>(template: string, options: Options): Promise<RenderResult>;
-export async function render<T>(component: ComponentInput<T>, options: Options): Promise<RenderResult>;
+export async function render<T>(template: string, renderOptions: RenderOptions): Promise<RenderResult>;
+export async function render<T>(component: ComponentInput<T>, renderOptions: RenderOptions): Promise<RenderResult>;
 export async function render<T>(
   templateOrComponent: string | ComponentInput<T>,
-  { detectChanges = true, declarations = [], providers = [], imports = [], schemas = [] }: Options,
+  {
+    detectChanges = true,
+    declarations = [],
+    imports = [],
+    providers = [],
+    schemas = [],
+    queries,
+    wrapper = WrapperComponent,
+  }: RenderOptions,
 ): Promise<RenderResult> {
   const isTemplate = typeof templateOrComponent === 'string';
-  const testComponent = isTemplate ? [TestComponent] : [];
+  const testComponent = isTemplate ? [wrapper] : [];
 
   TestBed.configureTestingModule({
     declarations: [...declarations, ...testComponent],
@@ -30,7 +38,7 @@ export async function render<T>(
   });
 
   const fixture = isTemplate
-    ? createTestComponentFixture(<string>templateOrComponent)
+    ? createWrapperComponentFixture(wrapper, <string>templateOrComponent)
     : createComponentFixture(<ComponentInput<T>>templateOrComponent);
 
   await TestBed.compileComponents();
@@ -55,20 +63,26 @@ export async function render<T>(
     fixture,
     container: fixture.nativeElement,
     debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
-    ...getQueriesForElement(fixture.nativeElement),
+    ...getQueriesForElement(fixture.nativeElement, queries),
     ...eventsWithDetectChanges,
   } as any;
 }
 
-function createTestComponentFixture(template: string) {
-  TestBed.overrideComponent(TestComponent, {
+/**
+ * Creates the wrapper component and sets its the template to the to-be-tested component
+ */
+function createWrapperComponentFixture<T>(wrapper: Type<T>, template: string) {
+  TestBed.overrideComponent(wrapper, {
     set: {
       template: template,
     },
   });
-  return TestBed.createComponent(TestComponent);
+  return TestBed.createComponent(wrapper);
 }
 
+/**
+ * Creates the components and sets its properties via the provided properties from `componentInput`
+ */
 function createComponentFixture<T>(componentInput: ComponentInput<T>) {
   const { component, parameters = {} } = componentInput;
   const fixture = TestBed.createComponent(component);

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

@@ -5,6 +5,7 @@ import { render } from '../src/public_api';
   selector: 'fixture',
   template: `
     <p>rawr</p>
+    <button data-testid="btn">I'm a button</button>
   `,
 })
 class FixtureComponent {}
@@ -14,7 +15,23 @@ test('debug', async () => {
   const { debug } = await render('<fixture></fixture>', {
     declarations: [FixtureComponent],
   });
+
   debug();
+
   expect(console.log).toBeCalledWith(expect.stringContaining('rawr'));
   (<any>console.log).mockRestore();
 });
+
+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 btn = getByTestId('btn');
+
+  debug(btn);
+
+  expect(console.log).not.toBeCalledWith(expect.stringContaining('rawr'));
+  expect(console.log).toBeCalledWith(expect.stringContaining(`I'm a button`));
+  (<any>console.log).mockRestore();
+});

projects/testing-library/tests/form/form.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({

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

@@ -23,7 +23,7 @@ test('login form submits using the component syntax', async () => {
 
   const usernameNode = getByLabelText(/username/i) as HTMLInputElement;
   const passwordNode = getByLabelText(/password/i) as HTMLInputElement;
-  const submitButtonNode = getByText(/submit/i);
+  const submitButtonNode = getByText(/submit/i) as HTMLButtonElement;
   const formNode = container.querySelector('form');
 
   input(usernameNode, {

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

@@ -0,0 +1,30 @@
+import { Component, Input, ElementRef, OnInit } from '@angular/core';
+import { render } from '../src/public_api';
+
+@Component({
+  selector: 'fixture',
+  template: `
+    <p>rawr</p>
+  `,
+})
+class FixtureComponent {}
+
+@Component({ selector: 'wrapper-component', template: '' })
+class WrapperComponent implements OnInit {
+  constructor(private elemtRef: ElementRef) {}
+
+  ngOnInit() {
+    const textnode = document.createTextNode('I should be visible');
+    this.elemtRef.nativeElement.appendChild(textnode);
+  }
+}
+
+test('allows for a custom wrapper', async () => {
+  jest.spyOn(console, 'log').mockImplementation(() => {});
+  const { getByText } = await render('<fixture></fixture>', {
+    declarations: [FixtureComponent],
+    wrapper: WrapperComponent,
+  });
+
+  getByText('I should be visible');
+});