update example specs to standalone

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/examples/login-form.spec.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/issues/issue-222.spec.ts → apps/example-app-karma/src/app/issues/rerender.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/test.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/tsconfig.app.json

@@ -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/tsconfig.spec.json

@@ -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/project.json

@@ -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": {