feat: update to Angular 21 (and switch to Vitest)

Author: timdeschryver

.browserslistrc

@@ -35,11 +35,23 @@ jobs:
       - name: install
         run: npm install --force
       - name: build
-        run: npm run build -- --skip-nx-cache
-      - name: test
-        run: npm run test
+        run: npm run build
+        timeout-minutes: 5
+      - name: test-library
+        run: npm run test:testing-library
+        timeout-minutes: 5
+      - name: test-examples
+        run: npm run test:example-app
+        timeout-minutes: 5
+      - name: test-examples-jest
+        run: npm run test:example-app-jest
+        timeout-minutes: 5
+      - name: test-karma-examples
+        run: npm run test:karma-app -- --watch=false --no-progress
+        timeout-minutes: 5
       - name: lint
         run: npm run lint
+        timeout-minutes: 5
       - name: Release
         if: github.repository == 'testing-library/angular-testing-library' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
         run: npx semantic-release

.github/workflows/ci.yml

@@ -18,7 +18,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "project": "projects/testing-library/ng-package.json"
           },
@@ -33,9 +33,9 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "configPath": "projects/testing-library/jest.config.ts"
+            "setupFiles": ["projects/testing-library/test-setup.ts"]
           }
         },
         "lint": {
@@ -53,16 +53,17 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/apps/example-app",
+            "outputPath": {
+              "base": "dist/apps/example-app"
+            },
             "index": "apps/example-app/src/index.html",
-            "main": "apps/example-app/src/main.ts",
-            "polyfills": "apps/example-app/src/polyfills.ts",
             "tsConfig": "apps/example-app/tsconfig.app.json",
             "assets": ["apps/example-app/src/favicon.ico", "apps/example-app/src/assets"],
-            "styles": ["apps/example-app/src/styles.css"],
-            "scripts": []
+            "styles": [],
+            "scripts": [],
+            "browser": "apps/example-app/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -75,9 +76,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -86,7 +85,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "example-app:build:production"
@@ -97,22 +96,77 @@
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+        "test": {
+          "builder": "@angular/build:unit-test",
           "options": {
-            "buildTarget": "example-app:build"
+            "setupFiles": ["apps/example-app/test-setup.ts"]
           }
         },
-        "test": {
-          "builder": "@angular-builders/jest:run",
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "configPath": "apps/example-app/jest.config.ts"
+            "lintFilePatterns": ["apps/example-app/**/*.ts", "apps/example-app/**/*.html"]
           }
+        }
+      }
+    },
+    "example-app-jest": {
+      "projectType": "application",
+      "root": "apps/example-app-jest",
+      "sourceRoot": "apps/example-app-jest/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": {
+              "base": "dist/apps/example-app-jest"
+            },
+            "index": "apps/example-app-jest/src/index.html",
+            "tsConfig": "apps/example-app-jest/tsconfig.app.json",
+            "assets": ["apps/example-app-jest/src/favicon.ico", "apps/example-app-jest/src/assets"],
+            "styles": [],
+            "scripts": [],
+            "browser": "apps/example-app-jest/src/main.ts"
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "example-app-jest:build:production"
+            },
+            "development": {
+              "buildTarget": "example-app-jest:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular-builders/jest:run"
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["apps/example-app/**/*.ts", "apps/example-app/**/*.html"]
+            "lintFilePatterns": ["apps/example-app-jest/**/*.ts", "apps/example-app-jest/**/*.html"]
           }
         }
       }
@@ -124,15 +178,17 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/apps/example-app-karma",
+            "outputPath": {
+              "base": "dist/apps/example-app-karma"
+            },
             "index": "apps/example-app-karma/src/index.html",
-            "main": "apps/example-app-karma/src/main.ts",
             "tsConfig": "apps/example-app-karma/tsconfig.app.json",
             "assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"],
             "styles": [],
-            "scripts": []
+            "scripts": [],
+            "browser": "apps/example-app-karma/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -145,9 +201,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -156,7 +210,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "example-app-karma:build:production"
@@ -168,7 +222,7 @@
           "defaultConfiguration": "development"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "apps/example-app-karma/src/test.ts",
             "tsConfig": "apps/example-app-karma/tsconfig.spec.json",

angular.json

@@ -0,0 +1,7 @@
+// @ts-check
+
+// TODO - https://github.com/nrwl/nx/issues/22576
+
+/** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */
+const config = (async () => (await import('./eslint.config.mjs')).default)();
+module.exports = config;

apps/example-app-jest/eslint.config.cjs

@@ -0,0 +1,6 @@
+// @ts-check
+
+import tseslint from 'typescript-eslint';
+import rootConfig from '../../eslint.config.mjs';
+
+export default tseslint.config(...rootConfig);

apps/example-app-jest/eslint.config.mjs

@@ -0,0 +1,18 @@
+module.exports = {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/apps/example-app-jest/src/test-setup.ts'],
+  modulePathIgnorePatterns: ['<rootDir>/dist'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/apps/example-app-jest/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: 'coverage/apps/example-app-jest',
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  moduleNameMapper: {
+    '@testing-library/angular/jest-utils': '<rootDir>/projects/testing-library/jest-utils/index.ts',
+    '@testing-library/angular': '<rootDir>/projects/testing-library',
+  },
+};

apps/example-app-jest/jest.config.js

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+
+import { SingleComponent } from './00-single-component';
+
+test('renders the current value and can increment and decrement', async () => {
+  const user = userEvent.setup();
+  await render(SingleComponent);
+
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
+  const valueControl = screen.getByTestId('value');
+
+  expect(valueControl).toHaveTextContent('0');
+
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  expect(valueControl).toHaveTextContent('2');
+
+  await user.click(decrementControl);
+  expect(valueControl).toHaveTextContent('1');
+});

apps/example-app-jest/src/app/examples/00-single-component.spec.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'atl-fixture',
+  standalone: true,
+  template: `
+    <button (click)="value = value - 1">Decrement</button>
+    <span data-testid="value">{{ value }}</span>
+    <button (click)="value = value + 1">Increment</button>
+  `,
+})
+export class SingleComponent {
+  value = 0;
+}

apps/example-app-jest/src/app/examples/00-single-component.ts

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+
+import { NestedContainerComponent } from './01-nested-component';
+
+test('renders the current value and can increment and decrement', async () => {
+  const user = userEvent.setup();
+  await render(NestedContainerComponent);
+
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
+  const valueControl = screen.getByTestId('value');
+
+  expect(valueControl).toHaveTextContent('0');
+
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  expect(valueControl).toHaveTextContent('2');
+
+  await user.click(decrementControl);
+  expect(valueControl).toHaveTextContent('1');
+});

apps/example-app-jest/src/app/examples/01-nested-component.spec.ts

@@ -0,0 +1,34 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'atl-button',
+  template: ' <button (click)="raise.emit()">{{ name }}</button> ',
+})
+export class NestedButtonComponent {
+  @Input() name = '';
+  @Output() raise = new EventEmitter<void>();
+}
+
+@Component({
+  standalone: true,
+  selector: 'atl-value',
+  template: ' <span data-testid="value">{{ value }}</span> ',
+})
+export class NestedValueComponent {
+  @Input() value?: number;
+}
+
+@Component({
+  standalone: true,
+  selector: 'atl-fixture',
+  template: `
+    <atl-button (raise)="value = value - 1" name="Decrement" />
+    <atl-value [value]="value" />
+    <atl-button (raise)="value = value + 1" name="Increment" />
+  `,
+  imports: [NestedButtonComponent, NestedValueComponent],
+})
+export class NestedContainerComponent {
+  value = 0;
+}