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

Author: timdeschryver

.browserslistrc

@@ -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,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "compilerOptions": {

apps/example-app-karma/tsconfig.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.spec.json

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

apps/example-app/jest.config.ts

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

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

@@ -1,11 +1,12 @@
+import { test, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { InputOutputComponent } from './02-input-output';
 
 test('is possible to set input and listen for output', async () => {
   const user = userEvent.setup();
-  const sendValue = jest.fn();
+  const sendValue = vi.fn();
 
   await render(InputOutputComponent, {
     inputs: {
@@ -34,7 +35,7 @@ test('is possible to set input and listen for output', async () => {
 
 test.skip('is possible to set input and listen for output with the template syntax', async () => {
   const user = userEvent.setup();
-  const sendSpy = jest.fn();
+  const sendSpy = vi.fn();
 
   await render('<atl-fixture [value]="47" (sendValue)="sendValue($event)" />', {
     imports: [InputOutputComponent],
@@ -61,7 +62,7 @@ test.skip('is possible to set input and listen for output with the template synt
 
 test('is possible to set input and listen for output (deprecated)', async () => {
   const user = userEvent.setup();
-  const sendValue = jest.fn();
+  const sendValue = vi.fn();
 
   await render(InputOutputComponent, {
     inputs: {
@@ -92,7 +93,7 @@ test('is possible to set input and listen for output (deprecated)', async () =>
 
 test('is possible to set input and listen for output with the template syntax (deprecated)', async () => {
   const user = userEvent.setup();
-  const sendSpy = jest.fn();
+  const sendSpy = vi.fn();
 
   await render('<atl-fixture [value]="47" (sendValue)="sendValue($event)" />', {
     imports: [InputOutputComponent],