From d1f4f13c8febb67fddc13cdad2c6a2ea0da3ade5 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Wed, 8 Mar 2023 19:42:03 +0100
Subject: [PATCH 1/2] docs: reproduce #373

---
 .../src/app/issues/issue-373.spec.ts          | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 apps/example-app/src/app/issues/issue-373.spec.ts

diff --git a/apps/example-app/src/app/issues/issue-373.spec.ts b/apps/example-app/src/app/issues/issue-373.spec.ts
new file mode 100644
index 0000000..57959cc
--- /dev/null
+++ b/apps/example-app/src/app/issues/issue-373.spec.ts
@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/angular';
+
+@Component({
+  selector: 'app-login',
+  template: `<h1>Login</h1>
+
+    <form [formGroup]="form" (submit)="onSubmit(form)">
+      <input type="email" aria-label="email" formControlName="email" />
+      <div *ngIf="email.invalid && (email.dirty || email.touched)">
+        <div *ngIf="email.errors?.['required']">Email is required</div>
+      </div>
+      <input type="password" aria-label="password" formControlName="password" />
+      <div *ngIf="password.invalid && (password.dirty || password.touched)">
+        <div *ngIf="password.errors?.['required']">Password is required</div>
+      </div>
+      <button type="submit" aria-label="submit" [disabled]="form.invalid">Submit</button>
+    </form> `,
+})
+class LoginComponent {
+  form: FormGroup = this.fb.group({
+    email: ['', [Validators.required]],
+    password: ['', [Validators.required]],
+  });
+
+  constructor(private fb: FormBuilder) {}
+
+  get email(): FormControl {
+    return this.form.get('email') as FormControl;
+  }
+
+  get password(): FormControl {
+    return this.form.get('password') as FormControl;
+  }
+
+  onSubmit(_fg: FormGroup): void {
+    // do nothing
+  }
+}
+
+describe('LoginComponent', () => {
+  const setup = async () => {
+    return render(LoginComponent, {
+      imports: [ReactiveFormsModule],
+    });
+  };
+
+  it('should create a component with inputs and a button to submit', async () => {
+    await setup();
+
+    expect(screen.getByRole('textbox', { name: 'email' })).toBeInTheDocument();
+    expect(screen.getByLabelText('password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'submit' })).toBeInTheDocument();
+  });
+
+  it('should show a message required to password and login and a button must be disabled', async () => {
+    await setup();
+
+    await userEvent.click(screen.getByRole('textbox', { name: 'email' }));
+    await userEvent.click(screen.getByLabelText('password'));
+    await userEvent.tab();
+    await userEvent.click(screen.getByRole('button', { name: 'submit' }));
+
+    expect(screen.getAllByText(/required/i)).toHaveLength(2);
+    expect(screen.getByRole('button', { name: 'submit' })).toBeDisabled();
+  });
+});

From 9ec261109d5112a2a95343bc93c043691627555b Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Wed, 8 Mar 2023 20:03:02 +0100
Subject: [PATCH 2/2] move test to karma

---
 .../src/app/issues/issue-373.spec.ts                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename apps/{example-app => example-app-karma}/src/app/issues/issue-373.spec.ts (97%)

diff --git a/apps/example-app/src/app/issues/issue-373.spec.ts b/apps/example-app-karma/src/app/issues/issue-373.spec.ts
similarity index 97%
rename from apps/example-app/src/app/issues/issue-373.spec.ts
rename to apps/example-app-karma/src/app/issues/issue-373.spec.ts
index 57959cc..cdbd0cc 100644
--- a/apps/example-app/src/app/issues/issue-373.spec.ts
+++ b/apps/example-app-karma/src/app/issues/issue-373.spec.ts
@@ -63,7 +63,7 @@ describe('LoginComponent', () => {
     await userEvent.tab();
     await userEvent.click(screen.getByRole('button', { name: 'submit' }));
 
-    expect(screen.getAllByText(/required/i)).toHaveLength(2);
+    expect(screen.getAllByText(/required/i).length).toBe(2);
     expect(screen.getByRole('button', { name: 'submit' })).toBeDisabled();
   });
 });