refactor: getComponentInstance

Author: timdeschryver

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

@@ -1,9 +1,9 @@
 import { Type } from '@angular/core';
 
-export interface Result {
+export interface Result<T> {
   container: any;
   get: (token: any, notFoundValue?: any) => any;
-  getComponentInstance: <T>(selectorOrComponent: string | Type<T>) => T;
+  getComponentInstance: <I = T>(selector?: string) => I;
   debug: () => void;
   detectChanges: (checkNoChanges?: boolean) => void;
   fixture: any;

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

@@ -8,12 +8,12 @@ import { Options, Result, ComponentInput } from './models';
 @Component({ selector: 'test-component', template: '' })
 class TestComponent {}
 
-export async function createComponent(template: string, options: Options): Promise<Result>;
-export async function createComponent<T>(component: ComponentInput<T>, options: Options): Promise<Result>;
+export async function createComponent<T>(template: string, options: Options): Promise<Result<T>>;
+export async function createComponent<T>(component: ComponentInput<T>, options: Options): Promise<Result<T>>;
 export async function createComponent<T>(
   templateOrComponent: string | ComponentInput<T>,
   { detectChanges = true, declarations = [], providers = [], imports = [], schemas = [] }: Options,
-): Promise<Result> {
+): Promise<Result<T>> {
   const isTemplate = typeof templateOrComponent === 'string';
   const testComponent = isTemplate ? [TestComponent] : [];
 
@@ -39,12 +39,10 @@ export async function createComponent<T>(
     fixture,
     container: fixture.nativeElement,
     get: TestBed.get,
-    getComponentInstance: <C>(selectorOrComponent: string | C) =>
-      typeof selectorOrComponent === 'string'
-        ? fixture.debugElement.query(By.css(selectorOrComponent)).componentInstance
-        : fixture.componentInstance,
-    debug: () => console.log(prettyDOM(fixture.nativeElement)),
+    getComponentInstance: <C = T>(selector?: string) =>
+      selector ? fixture.debugElement.query(By.css(selector)).componentInstance : fixture.componentInstance,
     detectChanges: (checkNoChanges?: boolean) => fixture.detectChanges(checkNoChanges),
+    debug: () => console.log(prettyDOM(fixture.nativeElement)),
     ...getQueriesForElement(fixture.nativeElement),
   };
 }

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

@@ -56,7 +56,7 @@ test('Counter actions - fireEvent', async () => {
 });
 
 test('Counter actions via component', async () => {
-  const { getComponentInstance } = await createComponent<CounterComponent>(
+  const { getComponentInstance } = await createComponent(
     {
       component: CounterComponent,
       parameters: {
@@ -68,7 +68,7 @@ test('Counter actions via component', async () => {
     },
   );
 
-  const counter = getComponentInstance(CounterComponent);
+  const counter = getComponentInstance();
   counter.increment();
   counter.increment();
   counter.increment();
@@ -79,7 +79,7 @@ test('Counter actions via component', async () => {
 });
 
 test('Counter actions via component without parameters', async () => {
-  const { getComponentInstance } = await createComponent<CounterComponent>(
+  const { getComponentInstance } = await createComponent(
     {
       component: CounterComponent,
     },
@@ -88,7 +88,7 @@ test('Counter actions via component without parameters', async () => {
     },
   );
 
-  const counter = getComponentInstance(CounterComponent);
+  const counter = getComponentInstance();
   counter.increment();
   counter.increment();
   counter.increment();
@@ -99,7 +99,7 @@ test('Counter actions via component without parameters', async () => {
 });
 
 test('Counter via component - test template', async () => {
-  const { getByText, detectChanges, getByTestId } = await createComponent<CounterComponent>(
+  const { getByText, detectChanges, getByTestId } = await createComponent(
     {
       component: CounterComponent,
       parameters: {

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

@@ -45,13 +45,10 @@ export class LoginFormComponent {
 
 test('login form submits', async () => {
   const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
-  const { getComponentInstance, container, getByLabelText, getByText } = await createComponent(
-    `<login-form></login-form>`,
-    {
-      declarations: [LoginFormComponent],
-      imports: [ReactiveFormsModule],
-    },
-  );
+  const { getComponentInstance, getByLabelText, getByText } = await createComponent(`<login-form></login-form>`, {
+    declarations: [LoginFormComponent],
+    imports: [ReactiveFormsModule],
+  });
 
   const loginForm = getComponentInstance<LoginFormComponent>('login-form');
   loginForm.handleLogin.emit = jest.fn();

tslint.json

@@ -60,7 +60,6 @@
         "variable-declaration": "nospace"
       }
     ],
-    "unified-signatures": true,
     "variable-name": false,
     "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
     "no-output-on-prefix": true,