docs: update examples to standalone components (#400)

Closes #399

Author: markgoho

apps/example-app-karma/project.json

@@ -13,7 +13,6 @@
         "outputPath": "dist/apps/example-app-karma",
         "index": "apps/example-app-karma/src/index.html",
         "main": "apps/example-app-karma/src/main.ts",
-        "polyfills": "apps/example-app-karma/src/polyfills.ts",
         "tsConfig": "apps/example-app-karma/tsconfig.app.json",
         "assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"],
         "styles": [],
@@ -27,12 +26,6 @@
               "maximumWarning": "6kb"
             }
           ],
-          "fileReplacements": [
-            {
-              "replace": "apps/example-app-karma/src/environments/environment.ts",
-              "with": "apps/example-app-karma/src/environments/environment.prod.ts"
-            }
-          ],
           "outputHashing": "all"
         },
         "development": {
@@ -74,7 +67,6 @@
       "options": {
         "main": "apps/example-app-karma/src/test.ts",
         "tsConfig": "apps/example-app-karma/tsconfig.spec.json",
-        "polyfills": "apps/example-app-karma/src/polyfills.ts",
         "karmaConfig": "apps/example-app-karma/karma.conf.js"
       }
     }

apps/example-app-karma/src/app/app.module.ts

@@ -0,0 +1,75 @@
+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';
+import { NgIf } from '@angular/common';
+
+it('should create a component with inputs and a button to submit', async () => {
+  await render(LoginComponent);
+
+  expect(screen.getByRole('textbox', { name: 'email' })).toBeInTheDocument();
+  expect(screen.getByLabelText('password')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'submit' })).toBeInTheDocument();
+});
+
+it('should display invalid message and submit button must be disabled', async () => {
+  const user = userEvent.setup();
+
+  await render(LoginComponent);
+
+  const email = screen.getByRole('textbox', { name: 'email' });
+  const password = screen.getByLabelText('password');
+
+  await user.type(email, 'foo');
+  await user.type(password, 's');
+
+  expect(screen.getAllByText(/is invalid/i).length).toBe(2);
+  expect(screen.getAllByRole('alert').length).toBe(2);
+  expect(screen.getByRole('button', { name: 'submit' })).toBeDisabled();
+});
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [ReactiveFormsModule, NgIf],
+  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)" role="alert">Email is invalid</div>
+      <input type="password" aria-label="password" formControlName="password" />
+      <div *ngIf="password.invalid && (password.dirty || password.touched)" role="alert">Password is invalid</div>
+      <button type="submit" aria-label="submit" [disabled]="form.invalid">Submit</button>
+    </form>
+  `,
+})
+class LoginComponent {
+  form: FormGroup = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(8)]],
+  });
+
+  constructor(private fb: FormBuilder) {}
+
+  blurred() {
+    console.log('aaaaaaaaac');
+    console.log('aaaaaaaaac');
+    console.log('aaaaaaaaac');
+    console.log('aaaaaaaaac');
+    console.log('aaaaaaaaac');
+    console.log('aaaaaaaaac');
+    console.log('aaaaaaaaac');
+  }
+  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
+  }
+}

apps/example-app-karma/src/app/examples/login-form.spec.ts

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/angular';
 
-it('https://github.com/testing-library/angular-testing-library/issues/222 with rerender', async () => {
+it('can rerender component', async () => {
   const { rerender } = await render(`<div>Hello {{ name}}</div>`, {
     componentProperties: {
       name: 'Sarah',

apps/example-app-karma/src/app/issues/issue-373.spec.ts

@@ -1,4 +1,4 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import 'zone.js';
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

apps/example-app-karma/src/app/issues/issue-222.spec.ts renamed to apps/example-app-karma/src/app/issues/rerender.spec.ts

@@ -7,7 +7,7 @@
     "target": "ES2022",
     "useDefineForClassFields": false
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
   "exclude": ["**/*.test.ts", "**/*.spec.ts"]
 }

apps/example-app-karma/src/assets/.gitkeep

@@ -6,6 +6,6 @@
     "target": "ES2022",
     "useDefineForClassFields": false
   },
-  "files": ["src/test.ts", "src/polyfills.ts"],
+  "files": ["src/test.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]
 }

apps/example-app-karma/src/environments/environment.prod.ts

@@ -27,12 +27,6 @@
               "maximumWarning": "6kb"
             }
           ],
-          "fileReplacements": [
-            {
-              "replace": "apps/example-app/src/environments/environment.ts",
-              "with": "apps/example-app/src/environments/environment.prod.ts"
-            }
-          ],
           "outputHashing": "all"
         },
         "development": {