feat: remove getComponentInstance

Author: timdeschryver

README.md

@@ -76,11 +76,15 @@ The second parameter in `createComponent` is the `options` parameter, which look
 }
 ```
 
-`detectChanges`: runs `detectChanges` on the fixture<br/>
-`declarations`: passed to the `TestBed`<br/>
-`providers`: passed to the `TestBed`<br/>
-`imports`: passed to the `TestBed`<br/>
-`schemas`: passed to the `TestBed`<br/>
+`detectChanges`: runs `detectChanges` on the fixture
+
+`declarations`: passed to the `TestBed`
+
+`providers`: passed to the `TestBed`
+
+`imports`: passed to the `TestBed`
+
+`schemas`: passed to the `TestBed`
 
 The `createComponent` function returns an object consisting all of the query functions from [dom-testing-library][dom-testing-library] and adds the following properties:
 
@@ -106,12 +110,6 @@ The Angular fixture.
 
 Calls the the Angular `TestBed.get` function.
 
-#### `getComponentInstance(selector?: string) => T`
-
-Gets the Angular component instance.
-
-The `selector` is required when the template syntax is being used, in order to get the component.
-
 ### `fireEvent`
 
 Exposes the `fireEvent` from [dom-testing-library](dom-testing-library).

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

@@ -4,7 +4,6 @@ import { ComponentFixture } from '@angular/core/testing';
 export interface Result<T> {
   container: HTMLElement;
   getFromTestBed: (token: any, notFoundValue?: any) => any;
-  getComponentInstance: <C = T>(selector?: string) => C;
   debug: () => void;
   detectChanges: (checkNoChanges?: boolean) => void;
   fixture: ComponentFixture<any>;

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

@@ -39,12 +39,6 @@ export async function createComponent<T>(
     fixture,
     container: fixture.nativeElement,
     getFromTestBed: TestBed.get,
-    getComponentInstance: <C = T>(selector?: string) => {
-      if (isTemplate && !selector) {
-        throw new Error('When using the template syntax, you must provide a selector');
-      }
-      return 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/__snapshots__/getComponentInstance.spec.ts.snap

@@ -36,7 +36,7 @@ test('Counter actions via template syntax', async () => {
 });
 
 test('Counter actions via component syntax', async () => {
-  const { getComponentInstance } = await createComponent(
+  const { getByText, detectChanges, getByTestId } = await createComponent(
     {
       component: CounterComponent,
       parameters: {
@@ -48,39 +48,21 @@ test('Counter actions via component syntax', async () => {
     },
   );
 
-  const counter = getComponentInstance();
-  counter.increment();
-  expect(counter.counter).toBe(11);
+  getByText('+').click();
+  detectChanges();
+  expect(getByText('Current Count: 11')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 11');
 
-  counter.decrement();
-  expect(counter.counter).toBe(10);
+  getByText('-').click();
+  detectChanges();
+  expect(getByText('Current Count: 10')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 10');
 });
 
 test('Counter actions via component syntax without parameters', async () => {
-  const { getComponentInstance } = await createComponent(
-    {
-      component: CounterComponent,
-    },
-    {
-      declarations: [CounterComponent],
-    },
-  );
-
-  const counter = getComponentInstance();
-  counter.increment();
-  expect(counter.counter).toBe(1);
-
-  counter.decrement();
-  expect(counter.counter).toBe(0);
-});
-
-test('Counter actions via component syntax and dom-testing-library functions', async () => {
   const { getByText, detectChanges, getByTestId } = await createComponent(
     {
       component: CounterComponent,
-      parameters: {
-        counter: 10,
-      },
     },
     {
       declarations: [CounterComponent],
@@ -89,11 +71,11 @@ test('Counter actions via component syntax and dom-testing-library functions', a
 
   getByText('+').click();
   detectChanges();
-  expect(getByText('Current Count: 11')).toBeTruthy();
-  expect(getByTestId('count').textContent).toBe('Current Count: 11');
+  expect(getByText('Current Count: 1')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 1');
 
   getByText('-').click();
   detectChanges();
-  expect(getByText('Current Count: 10')).toBeTruthy();
-  expect(getByTestId('count').textContent).toBe('Current Count: 10');
+  expect(getByText('Current Count: 0')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 0');
 });

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

@@ -2,37 +2,6 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { createComponent, fireEvent } from '../../src/public_api';
 import { LoginFormComponent } from './form.component';
 
-test('login form submits using the template syntax', async () => {
-  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
-  const { getComponentInstance, getByLabelText, getByText, container } = await createComponent(
-    `<login-form></login-form>`,
-    {
-      declarations: [LoginFormComponent],
-      imports: [ReactiveFormsModule],
-    },
-  );
-
-  const loginForm = getComponentInstance<LoginFormComponent>('login-form');
-  loginForm.handleLogin.emit = jest.fn();
-
-  const usernameNode = getByLabelText(/username/i) as HTMLInputElement;
-  const passwordNode = getByLabelText(/password/i) as HTMLInputElement;
-  const submitButtonNode = getByText(/submit/i);
-  const formNode = container.querySelector('form');
-
-  usernameNode.value = fakeUser.username;
-  fireEvent.input(usernameNode);
-
-  passwordNode.value = fakeUser.password;
-  fireEvent.input(passwordNode);
-
-  fireEvent.submit(formNode);
-
-  expect(loginForm.handleLogin.emit).toHaveBeenCalledTimes(1);
-  expect(loginForm.handleLogin.emit).toHaveBeenCalledWith(fakeUser);
-  expect(submitButtonNode.type).toBe('submit');
-});
-
 test('login form submits using the component syntax', async () => {
   const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
   const handleLogin = {