feat: allow to pass component properties with the template syntax

BREAKING CHANGE: The parameters parameter has been renamed to componentProperties and has also been moved to RenderOptions. To create a component via the component syntax, just pass it to the render function. BEFORE: ```ts const component = createComponent( { component: HomeComponent, parameters: { welcomeText: 'hello' } }, { declarations: [ HomeComponent ] } ) ``` AFTER: ```ts const component = render(HomeComponent, { componentProperties: { welcomeText: 'hello' }, declarations: [ HomeComponent ] }) ```

Author: timdeschryver

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

@@ -10,17 +10,13 @@ export interface RenderResult extends RenderResultQueries, FireObject {
  fixture: ComponentFixture<any>;
 }
 
-export interface RenderOptions<W = any, Q extends Queries = typeof queries> {
+export interface RenderOptions<C, Q extends Queries = typeof queries> {
  detectChanges?: boolean;
  declarations: any[];
  providers?: any[];
  imports?: any[];
  schemas?: any[];
+ componentProperties?: Partial<C>;
  queries?: Q;
- wrapper?: Type<W>;
-}
-
-export interface ComponentInput<T> {
- component: Type<T>;
- parameters?: Partial<T>;
+ wrapper?: Type<any>;
 }

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

@@ -1,8 +1,9 @@
-import { Component, OnInit, ElementRef, Type } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { Component, OnInit, ElementRef, Type, DebugElement } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { getQueriesForElement, prettyDOM, fireEvent, FireObject, FireFunction } from 'dom-testing-library';
 
-import { RenderResult, RenderOptions, ComponentInput } from './models';
+import { RenderResult, RenderOptions } from './models';
+import { By } from '@angular/platform-browser';
 
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent implements OnInit {
@@ -13,10 +14,8 @@ class WrapperComponent implements OnInit {
  }
 }
 
-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>,
+ templateOrComponent: string | Type<T>,
  {
  detectChanges = true,
  declarations = [],
@@ -25,7 +24,8 @@ export async function render<T>(
  schemas = [],
  queries,
  wrapper = WrapperComponent,
- }: RenderOptions,
+ componentProperties = {},
+ }: RenderOptions<T>,
 ): Promise<RenderResult> {
  const isTemplate = typeof templateOrComponent === 'string';
  const testComponent = isTemplate ? [wrapper] : [];
@@ -38,8 +38,8 @@ export async function render<T>(
  });
 
  const fixture = isTemplate
- ? createWrapperComponentFixture(wrapper, <string>templateOrComponent)
- : createComponentFixture(<ComponentInput<T>>templateOrComponent);
+ ? createWrapperComponentFixture(templateOrComponent as string, { wrapper, componentProperties })
+ : createComponentFixture(templateOrComponent as Type<T>, { componentProperties });
 
  await TestBed.compileComponents();
 
@@ -71,23 +71,63 @@ export async function render<T>(
 /**
  * Creates the wrapper component and sets its the template to the to-be-tested component
  */
-function createWrapperComponentFixture<T>(wrapper: Type<T>, template: string) {
+function createWrapperComponentFixture<T>(
+ template: string,
+ {
+ wrapper,
+ componentProperties,
+ }: {
+ wrapper: RenderOptions<T>['wrapper'];
+ componentProperties: RenderOptions<T>['componentProperties'];
+ },
+): ComponentFixture<any> {
  TestBed.overrideComponent(wrapper, {
  set: {
  template: template,
  },
  });
- return TestBed.createComponent(wrapper);
+
+ 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.`);
+ }
+
+ const sut = fixture.debugElement.query(By.css(componentSelector[1]));
+ setComponentProperties(sut, { componentProperties });
+ return fixture;
 }
 
 /**
- * Creates the components and sets its properties via the provided properties from `componentInput`
+ * Creates the components and sets its properties
  */
-function createComponentFixture<T>(componentInput: ComponentInput<T>) {
- const { component, parameters = {} } = componentInput;
+function createComponentFixture<T>(
+ component: Type<T>,
+ {
+ componentProperties = {},
+ }: {
+ componentProperties: RenderOptions<T>['componentProperties'];
+ },
+): ComponentFixture<T> {
  const fixture = TestBed.createComponent(component);
- for (const key of Object.keys(parameters)) {
- fixture.componentInstance[key] = parameters[key];
+ setComponentProperties(fixture, { componentProperties });
+ return fixture;
+}
+
+/**
+ * Set the component properties
+ */
+function setComponentProperties<T>(
+ fixture: ComponentFixture<T> | DebugElement,
+ {
+ componentProperties = {},
+ }: {
+ componentProperties: RenderOptions<T>['componentProperties'];
+ },
+) {
+ for (const key of Object.keys(componentProperties)) {
+ fixture.componentInstance[key] = componentProperties[key];
  }
  return fixture;
 }

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

@@ -33,18 +33,30 @@ test('Counter actions via template syntax', async () => {
  expect(getByTestId('count').textContent).toBe('Current Count: 10');
 });
 
-test('Counter actions via component syntax', async () => {
- const { getByText, getByTestId, click } = await render(
- {
- component: CounterComponent,
- parameters: {
- counter: 10,
- },
+test('Counter actions via template syntax with parameters', async () => {
+ const { getByText, getByTestId, click } = await render<CounterComponent>('<counter></counter>', {
+ declarations: [CounterComponent],
+ componentProperties: {
+ counter: 10,
  },
- {
- declarations: [CounterComponent],
+ });
+
+ click(getByText('+'));
+ expect(getByText('Current Count: 11')).toBeTruthy();
+ expect(getByTestId('count').textContent).toBe('Current Count: 11');
+
+ click(getByText('-'));
+ expect(getByText('Current Count: 10')).toBeTruthy();
+ expect(getByTestId('count').textContent).toBe('Current Count: 10');
+});
+
+test('Counter actions via component syntax', async () => {
+ const { getByText, getByTestId, click } = await render(CounterComponent, {
+ declarations: [CounterComponent],
+ componentProperties: {
+ counter: 10,
  },
- );
+ });
 
  click(getByText('+'));
  expect(getByText('Current Count: 11')).toBeTruthy();
@@ -56,14 +68,9 @@ test('Counter actions via component syntax', async () => {
 });
 
 test('Counter actions via component syntax without parameters', async () => {
- const { getByText, getByTestId, click } = await render(
- {
- component: CounterComponent,
- },
- {
- declarations: [CounterComponent],
- },
- );
+ const { getByText, getByTestId, click } = await render(CounterComponent, {
+ declarations: [CounterComponent],
+ });
 
  click(getByText('+'));
  expect(getByText('Current Count: 1')).toBeTruthy();

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

@@ -8,18 +8,13 @@ test('login form submits using the component syntax', async () => {
  emit: jest.fn(),
  };
 
- const { container, getByLabelText, getByText, input, submit } = await render(
- {
- component: LoginFormComponent,
- parameters: {
- handleLogin: handleLogin as any,
- },
+ const { container, getByLabelText, getByText, input, submit } = await render(LoginFormComponent, {
+ declarations: [LoginFormComponent],
+ imports: [ReactiveFormsModule],
+ componentProperties: {
+ handleLogin: handleLogin as any,
  },
- {
- declarations: [LoginFormComponent],
- imports: [ReactiveFormsModule],
- },
- );
+ });
 
  const usernameNode = getByLabelText(/username/i) as HTMLInputElement;
  const passwordNode = getByLabelText(/password/i) as HTMLInputElement;