refactor: rename createComponent to render

BREAKING CHANGE:

The createComponent function has been renamed to render

Author: timdeschryver

README.md

@@ -24,7 +24,7 @@ Lightweight utility functions to test Angular components.
 - [Why](#why)
 - [What](#what)
 - [How](#how)
-  - [`createComponent`](#createcomponent)
+  - [`render`](#render)
     - [`container: HTMLElement`](#container-htmlelement)
     - [`debug(element: HTMLElement) => void`](#debug--void)
     - [`fixture: any`](#fixture-any)
@@ -49,26 +49,26 @@ which provides lightweight utility functions to test UI components. Your tests w
 
 ## How
 
-### `createComponent`
+### `render`
 
-This library only consists of one function, `createComponent` which is used to setup the Angular `TestBed` and creates the component fixture.
+This library only consists of one function, `render` which is used to setup the Angular `TestBed` and creates the component fixture.
 
 This method can be used in two ways:
 
 Based on a template:
 
 ```ts
-import { createComponent } from '@angular-extensions/testing-library';
+import { render } from '@angular-extensions/testing-library';
 
-createComponent('<my-component [prop]="1"></my-component>', options);
+render('<my-component [prop]="1"></my-component>', options);
 ```
 
 Based on a component type:
 
 ```ts
-import { createComponent } from '@angular-extensions/testing-library';
+import { render } from '@angular-extensions/testing-library';
 
-createComponent(
+render(
   {
     component: MyComponent,
     parameters: {
@@ -79,7 +79,7 @@ createComponent(
 );
 ```
 
-The second parameter in `createComponent` is the `options` parameter, which looks like this:
+The second parameter in `render` is the `options` parameter, which looks like this:
 
 ```ts
 {
@@ -101,7 +101,7 @@ The second parameter in `createComponent` is the `options` parameter, which look
 
 `schemas`: passed to the `TestBed`
 
-The `createComponent` function returns an object consisting all of the query functions from [dom-testing-library][dom-testing-library], all the event functions exposed from `fireEvent`, and adds the following properties:
+The `render` function returns an object consisting all of the query functions from [dom-testing-library][dom-testing-library], all the event functions exposed from `fireEvent`, and adds the following properties:
 
 > Every event runs `detectChanges` on the fixture.
 
@@ -139,13 +139,13 @@ describe('AppComponent', () => {
   }));
 
   it(`should have as title 'my-awesome-app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.render(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('my-awesome-app');
   }));
 
   it(`should render title in a h1 tag`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.render(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
     expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-awesome-app!');
@@ -156,18 +156,18 @@ describe('AppComponent', () => {
 After:
 
 ```ts
-import { createComponent } from '@angular-extensions/testing-library';
+import { render } from '@angular-extensions/testing-library';
 import { AppComponent } from './app.component';
 
 it(`should have as title 'my-awesome-app'`, async () => {
-  const { getByText } = await createComponent('<app-root></app-root>', {
+  const { getByText } = await render('<app-root></app-root>', {
     declarations: [AppComponent],
   });
   expect(getByText('Welcome to my-awesome-app!')).toBeDefined();
 });
 
 it(`should render title in a h1 tag`, async () => {
-  const { container } = await createComponent(
+  const { container } = await render(
     {
       component: AppComponent,
     },

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

@@ -13,9 +13,9 @@ class TestComponent implements OnInit {
   }
 }
 
-export async function createComponent<T>(template: string, options: Options): Promise<RenderResult>;
-export async function createComponent<T>(component: ComponentInput<T>, options: Options): Promise<RenderResult>;
-export async function createComponent<T>(
+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>(
   templateOrComponent: string | ComponentInput<T>,
   { detectChanges = true, declarations = [], providers = [], imports = [], schemas = [] }: Options,
 ): Promise<RenderResult> {

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

@@ -1,11 +1,10 @@
 import { Component, Input } from '@angular/core';
-import { createComponent } from '../../src/public_api';
+import { render } from '../../src/public_api';
 
 @Component({
   selector: 'counter',
   template: `
-    <button (click)="decrement()">-</button>
-    <span data-testid="count">Current Count: {{ counter }}</span>
+    <button (click)="decrement()">-</button> <span data-testid="count">Current Count: {{ counter }}</span>
     <button (click)="increment()">+</button>
   `,
 })
@@ -21,7 +20,7 @@ export class CounterComponent {
 }
 
 test('Counter actions via template syntax', async () => {
-  const { getByText, getByTestId, click } = await createComponent('<counter [counter]="10"></counter>', {
+  const { getByText, getByTestId, click } = await render('<counter [counter]="10"></counter>', {
     declarations: [CounterComponent],
   });
 
@@ -35,7 +34,7 @@ test('Counter actions via template syntax', async () => {
 });
 
 test('Counter actions via component syntax', async () => {
-  const { getByText, getByTestId, click } = await createComponent(
+  const { getByText, getByTestId, click } = await render(
     {
       component: CounterComponent,
       parameters: {
@@ -57,7 +56,7 @@ test('Counter actions via component syntax', async () => {
 });
 
 test('Counter actions via component syntax without parameters', async () => {
-  const { getByText, getByTestId, click } = await createComponent(
+  const { getByText, getByTestId, click } = await render(
     {
       component: CounterComponent,
     },

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

@@ -1,15 +1,17 @@
 import { Component, Input } from '@angular/core';
-import { createComponent } from '../src/public_api';
+import { render } from '../src/public_api';
 
 @Component({
   selector: 'fixture',
-  template: `<p>rawr</p>`,
+  template: `
+    <p>rawr</p>
+  `,
 })
 class FixtureComponent {}
 
 test('debug', async () => {
   jest.spyOn(console, 'log').mockImplementation(() => {});
-  const { debug } = await createComponent('<fixture></fixture>', {
+  const { debug } = await render('<fixture></fixture>', {
     declarations: [FixtureComponent],
   });
   debug();

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

@@ -1,5 +1,5 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { createComponent } from '../../src/public_api';
+import { render } from '../../src/public_api';
 import { LoginFormComponent } from './form.component';
 
 test('login form submits using the component syntax', async () => {
@@ -8,7 +8,7 @@ test('login form submits using the component syntax', async () => {
     emit: jest.fn(),
   };
 
-  const { container, getByLabelText, getByText, input, submit } = await createComponent(
+  const { container, getByLabelText, getByText, input, submit } = await render(
     {
       component: LoginFormComponent,
       parameters: {

src/app/app.component.spec.ts

@@ -1,24 +1,24 @@
 import { AppComponent } from './app.component';
-import { createComponent, configureJestSetup } from '@angular-extensions/testing-library';
+import { render, configureJestSetup } from '@angular-extensions/testing-library';
 
 configureJestSetup();
 
 test(`matches snapshot`, async () => {
-  const { container } = await createComponent('<app-root></app-root>', {
+  const { container } = await render('<app-root></app-root>', {
     declarations: [AppComponent],
   });
   expect(container).toMatchSnapshot();
 });
 
 test(`should have a title`, async () => {
-  const { getByText } = await createComponent('<app-root></app-root>', {
+  const { getByText } = await render('<app-root></app-root>', {
     declarations: [AppComponent],
   });
   expect(getByText('Welcome to app!')).toBeDefined();
 });
 
 test(`should render title in a h1 tag`, async () => {
-  const { container } = await createComponent('<app-root></app-root>', {
+  const { container } = await render('<app-root></app-root>', {
     declarations: [AppComponent],
   });
   expect(container.querySelector('h1').textContent).toContain('Welcome to app!');