test: restructure the tests

Author: timdeschryver

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

@@ -39,8 +39,12 @@ export async function createComponent<T>(
     fixture,
     container: fixture.nativeElement,
     get: TestBed.get,
-    getComponentInstance: <C = T>(selector?: string) =>
-      selector ? fixture.debugElement.query(By.css(selector)).componentInstance : fixture.componentInstance,
+    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/counter.spec.ts renamed to projects/ngx-testing-library/tests/counter/counter.spec.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { createComponent, fireEvent } from '../src/public_api';
+import { createComponent, fireEvent } from '../../src/public_api';
 
 @Component({
   selector: 'counter',

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

@@ -0,0 +1,10 @@
+<div>
+  <form [formGroup]="loginForm" (ngSubmit)="handleSubmit()">
+    <label for="username-input">Username</label>
+    <input id="username-input" placeholder="Username..." name="username" formControlName="username" />
+    <label id="password-label">Password</label>
+    <input placeholder="Password..." type="password" name="password" aria-labelledby="password-label" formControlName="password"
+    />
+    <button type="submit">Submit</button>
+  </form>
+  <div>

projects/ngx-testing-library/tests/form/form.component.html

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'login-form',
+  templateUrl: './form.component.html',
+})
+export class LoginFormComponent {
+  @Output() handleLogin = new EventEmitter<{ username: string; password: string }>();
+
+  loginForm: FormGroup;
+  constructor(private fb: FormBuilder) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.loginForm = this.fb.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
+
+  handleSubmit() {
+    if (this.loginForm.valid) {
+      this.handleLogin.emit(this.loginForm.value);
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import { ReactiveFormsModule } from '@angular/forms';
+import { LoginFormComponent } from './form.component';
+import { createComponent, fireEvent } from '../../src/public_api';
+
+test('login form submits', async () => {
+  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
+  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();
+
+  const usernameNode = getByLabelText(/username/i) as HTMLInputElement;
+  const passwordNode = getByLabelText(/password/i) as HTMLInputElement;
+  const submitButtonNode = getByText(/submit/i);
+
+  usernameNode.value = fakeUser.username;
+  fireEvent.input(usernameNode);
+
+  passwordNode.value = fakeUser.password;
+  fireEvent.input(passwordNode);
+
+  loginForm.handleSubmit();
+
+  expect(loginForm.handleLogin.emit).toHaveBeenCalledTimes(1);
+  expect(loginForm.handleLogin.emit).toHaveBeenCalledWith(fakeUser);
+  expect(submitButtonNode.type).toBe('submit');
+});