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

Author: timdeschryver

.browserslistrc

@@ -35,11 +35,20 @@ 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-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,16 +96,10 @@
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "example-app:build"
-          }
-        },
         "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "configPath": "apps/example-app/jest.config.ts"
+            "setupFiles": ["apps/example-app/test-setup.ts"]
           }
         },
         "lint": {
@@ -124,15 +117,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 +140,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -156,7 +149,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 +161,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

@@ -5,11 +5,7 @@ module.exports = function (config) {
     config.set({
       basePath: '',
       frameworks: ['jasmine', '@angular-devkit/build-angular'],
-      plugins: [
-        require('karma-jasmine'),
-        require('karma-chrome-launcher'),
-        require('@angular-devkit/build-angular/plugins/karma'),
-      ],
+      plugins: [require('karma-jasmine'), require('karma-chrome-launcher')],
       client: {
         jasmine: {
           // you can add configuration options for Jasmine here

apps/example-app-karma/karma.conf.js

@@ -2,7 +2,6 @@ import { Component, inject } 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);
@@ -31,15 +30,19 @@ it('should display invalid message and submit button must be disabled', async ()
 @Component({
   selector: 'atl-login',
   standalone: true,
-  imports: [ReactiveFormsModule, NgIf],
+  imports: [ReactiveFormsModule],
   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>
+      @if (email.invalid && (email.dirty || email.touched)) {
+      <div 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>
+      @if (password.invalid && (password.dirty || password.touched)) {
+      <div role="alert">Password is invalid</div>
+      }
       <button type="submit" aria-label="submit" [disabled]="form.invalid">Submit</button>
     </form>
   `,

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

@@ -1,9 +1,12 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "compilerOptions": {
-    "target": "es2020"
+    "target": "es2020",
+    "paths": {
+      "@testing-library/angular": ["projects/testing-library"]
+    }
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,

apps/example-app-karma/tsconfig.editor.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine", "node", "@testing-library/jasmine-dom"],
+    "types": ["node", "@testing-library/jasmine-dom"],
     "target": "ES2022",
     "useDefineForClassFields": false
   },

apps/example-app-karma/tsconfig.json

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';