feat: release v18 (#533)

timdeschryver · web-flow · commit 4fea701f9266 · 2025-08-07T18:04:32.000+02:00
* feat: update to Angular 20 (#530) BREAKING CHANGE: The angular minimum version has changed. BEFORE: Angular 17,18,19 were supported. AFTER: Angular 20 (and up) is supported. Reason: The method `TestBed.get` has been removed. * feat: remove animations dependency (#531) BREAKING CHANGE: Angular recommends using CSS animations, https://angular.dev/guide/animations/migration Because of the removal of the animations dependency, the `NoopAnimationsModule` is no longer automatically imported in the render function. BEFORE: The `NoopAnimationsModule` was always imported to the render the component. AFTER: Import the `NoopAnimationsModule` in your render configuration (where needed): ```ts await render(SutComponent, { imports: [NoopAnimationsModule], }); ``` * feat: add stronger types (#413)
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -22,7 +22,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[22]' || '[18, 20, 22]') }}
+        node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[22]' || '[20, 22, 24]') }}
         os: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '["ubuntu-latest"]' || '["ubuntu-latest", "windows-latest"]') }}
     runs-on: ${{ matrix.os }}
 
diff --git a/.gitignore b/.gitignore
@@ -46,3 +46,4 @@ yarn.lock
 Thumbs.db
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+.history
diff --git a/README.md b/README.md
@@ -177,15 +177,16 @@ You may also be interested in installing `jest-dom` so you can use
 
 ## Version compatibility
 
-| Angular | Angular Testing Library      |
-| ------- | ---------------------------- |
-| 19.x    | 17.x, 16.x, 15.x, 14.x, 13.x |
-| 18.x    | 17.x, 16.x, 15.x, 14.x, 13.x |
-| 17.x    | 17.x, 16.x, 15.x, 14.x, 13.x |
-| 16.x    | 14.x, 13.x                   |
-| >= 15.1 | 14.x, 13.x                   |
-| < 15.1  | 12.x, 11.x                   |
-| 14.x    | 12.x, 11.x                   |
+| Angular | Angular Testing Library            |
+| ------- | ---------------------------------- |
+| 20.x    | 18.x, 17.x, 16.x, 15.x, 14.x, 13.x |
+| 19.x    | 17.x, 16.x, 15.x, 14.x, 13.x       |
+| 18.x    | 17.x, 16.x, 15.x, 14.x, 13.x       |
+| 17.x    | 17.x, 16.x, 15.x, 14.x, 13.x       |
+| 16.x    | 14.x, 13.x                         |
+| >= 15.1 | 14.x, 13.x                         |
+| < 15.1  | 12.x, 11.x                         |
+| 14.x    | 12.x, 11.x                         |
 
 ## Guiding Principles
 
diff --git a/apps/example-app-karma/src/app/issues/issue-491.spec.ts b/apps/example-app-karma/src/app/issues/issue-491.spec.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 it('test click event with router.navigate', async () => {
@@ -31,8 +31,6 @@ it('test click event with router.navigate', async () => {
 
   await user.click(screen.getByRole('button', { name: 'submit' }));
 
-  await waitForElementToBeRemoved(() => screen.queryByRole('heading', { name: 'Login' }));
-
   expect(await screen.findByRole('heading', { name: 'Logged In' })).toBeVisible();
 });
 
diff --git a/apps/example-app/src/app/examples/15-dialog.component.spec.ts b/apps/example-app/src/app/examples/15-dialog.component.spec.ts
@@ -1,4 +1,5 @@
 import { MatDialogRef } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -9,6 +10,7 @@ test('dialog closes', async () => {
 
   const closeFn = jest.fn();
   await render(DialogContentComponent, {
+    imports: [NoopAnimationsModule],
     providers: [
       {
         provide: MatDialogRef,
@@ -28,7 +30,9 @@ test('dialog closes', async () => {
 test('closes the dialog via the backdrop', async () => {
   const user = userEvent.setup();
 
-  await render(DialogComponent);
+  await render(DialogComponent, {
+    imports: [NoopAnimationsModule],
+  });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
   await user.click(openDialogButton);
@@ -50,7 +54,9 @@ test('closes the dialog via the backdrop', async () => {
 test('opens and closes the dialog with buttons', async () => {
   const user = userEvent.setup();
 
-  await render(DialogComponent);
+  await render(DialogComponent, {
+    imports: [NoopAnimationsModule],
+  });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
   await user.click(openDialogButton);
diff --git a/package.json b/package.json
@@ -27,15 +27,15 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "19.2.14",
-    "@angular/cdk": "19.2.18",
-    "@angular/common": "19.2.14",
-    "@angular/compiler": "19.2.14",
-    "@angular/core": "19.2.14",
-    "@angular/material": "19.2.18",
-    "@angular/platform-browser": "19.2.14",
-    "@angular/platform-browser-dynamic": "19.2.14",
-    "@angular/router": "19.2.14",
+    "@angular/animations": "20.0.0",
+    "@angular/cdk": "20.0.0",
+    "@angular/common": "20.0.0",
+    "@angular/compiler": "20.0.0",
+    "@angular/core": "20.0.0",
+    "@angular/material": "20.0.0",
+    "@angular/platform-browser": "20.0.0",
+    "@angular/platform-browser-dynamic": "20.0.0",
+    "@angular/router": "20.0.0",
     "@ngrx/store": "19.0.0",
     "@nx/angular": "21.1.2",
     "@testing-library/dom": "^10.4.0",
@@ -44,26 +44,26 @@
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.2.9",
-    "@angular-devkit/core": "19.2.9",
-    "@angular-devkit/schematics": "19.2.9",
+    "@angular-devkit/build-angular": "20.0.0",
+    "@angular-devkit/core": "20.0.0",
+    "@angular-devkit/schematics": "20.0.0",
     "@angular-eslint/builder": "19.2.0",
     "@angular-eslint/eslint-plugin": "19.2.0",
     "@angular-eslint/eslint-plugin-template": "19.2.0",
     "@angular-eslint/schematics": "19.2.0",
     "@angular-eslint/template-parser": "19.2.0",
-    "@angular/cli": "~19.2.0",
-    "@angular/compiler-cli": "19.2.14",
-    "@angular/forms": "19.2.14",
-    "@angular/language-service": "19.2.14",
+    "@angular/cli": "~20.0.0",
+    "@angular/compiler-cli": "20.0.0",
+    "@angular/forms": "20.0.0",
+    "@angular/language-service": "20.0.0",
     "@eslint/eslintrc": "^2.1.1",
     "@nx/eslint": "21.1.2",
     "@nx/eslint-plugin": "21.1.2",
     "@nx/jest": "21.1.2",
     "@nx/node": "21.1.2",
     "@nx/plugin": "21.1.2",
     "@nx/workspace": "21.1.2",
-    "@schematics/angular": "19.2.9",
+    "@schematics/angular": "20.0.0",
     "@testing-library/jasmine-dom": "^1.3.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
@@ -91,7 +91,7 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^15.3.0",
     "ng-mocks": "^14.13.1",
-    "ng-packagr": "19.2.2",
+    "ng-packagr": "20.0.0",
     "nx": "21.1.2",
     "postcss": "^8.4.49",
     "postcss-import": "14.1.0",
@@ -102,7 +102,7 @@
     "semantic-release": "^24.2.1",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.7.3",
+    "typescript": "5.8.2",
     "typescript-eslint": "^8.19.0"
   }
 }
diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json
@@ -29,11 +29,10 @@
     "migrations": "./schematics/migrations/migrations.json"
   },
   "peerDependencies": {
-    "@angular/animations": ">= 17.0.0",
-    "@angular/common": ">= 17.0.0",
-    "@angular/platform-browser": ">= 17.0.0",
-    "@angular/router": ">= 17.0.0",
-    "@angular/core": ">= 17.0.0",
+    "@angular/common": ">= 20.0.0",
+    "@angular/platform-browser": ">= 20.0.0",
+    "@angular/router": ">= 20.0.0",
+    "@angular/core": ">= 20.0.0",
     "@testing-library/dom": "^10.0.0"
   },
   "dependencies": {
diff --git a/projects/testing-library/src/lib/config.ts b/projects/testing-library/src/lib/config.ts
@@ -7,12 +7,9 @@ let config: Config = {
 
 export function configure(newConfig: Partial<Config> | ((config: Partial<Config>) => Partial<Config>)) {
   if (typeof newConfig === 'function') {
-    // Pass the existing config out to the provided function
-    // and accept a delta in return
     newConfig = newConfig(config);
   }
 
-  // Merge the incoming config delta
   config = {
     ...config,
     ...newConfig,
diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts
@@ -1,4 +1,13 @@
-import { Type, DebugElement, EventEmitter, Signal, InputSignalWithTransform } from '@angular/core';
+import {
+  Type,
+  DebugElement,
+  ModuleWithProviders,
+  EventEmitter,
+  EnvironmentProviders,
+  Provider,
+  Signal,
+  InputSignalWithTransform,
+} from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed } from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { BoundFunction, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom';
@@ -153,7 +162,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    *  declarations: [ CustomerDetailComponent, ButtonComponent ]
    * })
    */
-  declarations?: any[];
+  declarations?: (Type<unknown> | unknown[])[];
   /**
    * @description
    * A collection of providers needed to render the component via Dependency Injection, for example, injectable services or tokens.
@@ -174,16 +183,15 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    *  ]
    * })
    */
-  providers?: any[];
+  providers?: (Provider | EnvironmentProviders)[];
   /**
    * @description
    * A collection of imports needed to render the component, for example, shared modules.
-   * Adds `NoopAnimationsModule` by default if `BrowserAnimationsModule` isn't added to the collection.
    *
    * For more info see https://angular.io/api/core/NgModule#imports
    *
    * @default
-   * `[NoopAnimationsModule]`
+   * `[]`
    *
    * @example
    * await render(AppComponent, {
@@ -193,7 +201,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    *  ]
    * })
    */
-  imports?: any[];
+  imports?: (Type<unknown> | ModuleWithProviders<unknown>)[];
   /**
    * @description
    * A collection of schemas needed to render the component.
@@ -315,7 +323,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    *  ]
    * })
    */
-  componentProviders?: any[];
+  componentProviders?: Provider[];
   /**
    * @description
    * Collection of child component specified providers to override with
@@ -349,7 +357,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    *   ]
    * })
    */
-  componentImports?: (Type<any> | any[])[];
+  componentImports?: (Type<unknown> | unknown[])[];
   /**
    * @description
    * Queries to bind. Overrides the default set from DOM Testing Library unless merged.
@@ -463,7 +471,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
 
 export interface ComponentOverride<T> {
   component: Type<T>;
-  providers: any[];
+  providers: Provider[];
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -497,5 +505,5 @@ export interface Config extends Pick<RenderComponentOptions<any>, 'excludeCompon
   /**
    * Imports that are added to the imports
    */
-  defaultImports: any[];
+  defaultImports?: (Type<unknown> | ModuleWithProviders<unknown>)[];
 }
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
@@ -6,13 +6,13 @@ import {
   OnChanges,
   OutputRef,
   OutputRefSubscription,
+  Provider,
   SimpleChange,
   SimpleChanges,
   Type,
   isStandalone,
 } from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
-import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NavigationExtras, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import type { BoundFunctions, Queries } from '@testing-library/dom';
@@ -40,7 +40,6 @@ import {
 type SubscribedOutput<T> = readonly [key: keyof T, callback: (v: any) => void, subscription: OutputRefSubscription];
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
-const safeInject = TestBed.inject || TestBed.get;
 
 export async function render<ComponentType>(
   component: Type<ComponentType>,
@@ -108,7 +107,7 @@ export async function render<SutType, WrapperType = SutType>(
       imports: imports.concat(defaultImports),
       routes,
     }),
-    providers: [...providers],
+    providers,
     schemas: [...schemas],
     deferBlockBehavior: deferBlockBehavior ?? DeferBlockBehavior.Manual,
   });
@@ -126,8 +125,8 @@ export async function render<SutType, WrapperType = SutType>(
 
   const componentContainer = createComponentFixture(sut, wrapper);
 
-  const zone = safeInject(NgZone);
-  const router = safeInject(Router);
+  const zone = TestBed.inject(NgZone);
+  const router = TestBed.inject(Router);
   const _navigate = async (elementOrPath: Element | string, basePath = ''): Promise<boolean> => {
     const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
     const [path, params] = (basePath + href).split('?');
@@ -338,7 +337,7 @@ export async function render<SutType, WrapperType = SutType>(
 
 async function createComponent<SutType>(component: Type<SutType>): Promise<ComponentFixture<SutType>> {
   /* Make sure angular application is initialized before creating component */
-  await safeInject(ApplicationInitStatus).donePromise;
+  await TestBed.inject(ApplicationInitStatus).donePromise;
   return TestBed.createComponent(component);
 }
 
@@ -435,7 +434,7 @@ function overrideComponentImports<SutType>(sut: Type<SutType> | string, imports:
 function overrideChildComponentProviders(componentOverrides: ComponentOverride<any>[]) {
   if (componentOverrides) {
     for (const { component, providers } of componentOverrides) {
-      TestBed.overrideComponent(component, { set: { providers } });
+      TestBed.overrideComponent(component, { set: { providers: providers as Provider[] } });
     }
   }
 }
@@ -498,7 +497,7 @@ function addAutoDeclarations<SutType>(
     wrapper,
   }: Pick<RenderTemplateOptions<any>, 'declarations' | 'excludeComponentDeclaration' | 'wrapper'>,
 ) {
-  const nonStandaloneDeclarations = declarations?.filter((d) => !isStandalone(d));
+  const nonStandaloneDeclarations = declarations.filter((d) => !isStandalone(d as Type<any>));
   if (typeof sut === 'string') {
     if (wrapper && isStandalone(wrapper)) {
       return nonStandaloneDeclarations;
@@ -514,15 +513,9 @@ function addAutoImports<SutType>(
   sut: Type<SutType> | string,
   { imports = [], routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>,
 ) {
-  const animations = () => {
-    const animationIsDefined =
-      imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1;
-    return animationIsDefined ? [] : [NoopAnimationsModule];
-  };
-
   const routing = () => (routes ? [RouterTestingModule.withRoutes(routes)] : []);
   const components = () => (typeof sut !== 'string' && isStandalone(sut) ? [sut] : []);
-  return [...imports, ...components(), ...animations(), ...routing()];
+  return [...imports, ...components(), ...routing()];
 }
 
 async function renderDeferBlock<SutType>(
diff --git a/projects/testing-library/tests/defer-blocks.spec.ts b/projects/testing-library/tests/defer-blocks.spec.ts
@@ -33,7 +33,6 @@ test('renders a defer block in different states using DeferBlockBehavior.Playthr
     deferBlockBehavior: DeferBlockBehavior.Playthrough,
   });
 
-  expect(await screen.findByText(/loading/i)).toBeInTheDocument();
   expect(await screen.findByText(/Defer block content/i)).toBeInTheDocument();
 });
 
diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts
