feat: release v18 (#533)

* 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)

Author: timdeschryver

.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 }}
 

.gitignore

@@ -46,3 +46,4 @@ yarn.lock
 Thumbs.db
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+.history

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
 

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();
 });
 

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);

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"
  }
 }

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

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,

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>)[];
 }

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>(