From f13d5400597feb76645def17a8f1d24e7021c148 Mon Sep 17 00:00:00 2001 From: Jeevan Mahesha Date: Fri, 7 Aug 2026 22:00:29 +0530 Subject: [PATCH 1/3] fix: replace deprecated animation and testing-module APIs - Swap provideNoopAnimations() for Material's MATERIAL_ANIMATIONS token in dialog specs (provideNoopAnimations is deprecated since v20.2) - Swap BrowserDynamicTestingModule/platformBrowserDynamicTesting for BrowserTestingModule/platformBrowserTesting in karma test.ts, and drop the now-unused @angular/platform-browser-dynamic dependency --- .../src/app/examples/15-dialog.component.spec.ts | 8 ++++---- apps/example-app-karma/src/test.ts | 4 ++-- .../src/app/examples/15-dialog.component.spec.ts | 8 ++++---- package.json | 1 - 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts b/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts index 97d2111b..709b8ce3 100644 --- a/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts +++ b/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts @@ -1,6 +1,6 @@ import { provideZoneChangeDetection } from '@angular/core'; +import { MATERIAL_ANIMATIONS } from '@angular/material/core'; import { MatDialogRef } from '@angular/material/dialog'; -import { provideNoopAnimations } from '@angular/platform-browser/animations'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; @@ -12,7 +12,7 @@ test('dialog closes', async () => { const closeFn = jest.fn(); await render(DialogContentComponent, { providers: [ - provideNoopAnimations(), + { provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }, { provide: MatDialogRef, useValue: { @@ -33,7 +33,7 @@ test('closes the dialog via the backdrop', async () => { const user = userEvent.setup(); await render(DialogComponent, { - providers: [provideNoopAnimations()], + providers: [{ provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }], }); const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); @@ -57,7 +57,7 @@ test('opens and closes the dialog with buttons', async () => { const user = userEvent.setup(); await render(DialogComponent, { - providers: [provideNoopAnimations(), provideZoneChangeDetection()], + providers: [{ provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }, provideZoneChangeDetection()], }); const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); diff --git a/apps/example-app-karma/src/test.ts b/apps/example-app-karma/src/test.ts index e6bf956d..880c316e 100644 --- a/apps/example-app-karma/src/test.ts +++ b/apps/example-app-karma/src/test.ts @@ -1,7 +1,7 @@ import 'zone.js'; import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; import JasmineDOM from '@testing-library/jasmine-dom'; // Install custom matchers from jasmine-dom @@ -10,4 +10,4 @@ beforeEach(() => { }); // First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {}); +getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {}); 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 index baf83ab5..b3f4de57 100644 --- 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,5 +1,5 @@ +import { MATERIAL_ANIMATIONS } from '@angular/material/core'; import { MatDialogRef } from '@angular/material/dialog'; -import { provideNoopAnimations } from '@angular/platform-browser/animations'; import { test, expect, vi } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; @@ -12,7 +12,7 @@ test('dialog closes', async () => { const closeFn = vi.fn(); await render(DialogContentComponent, { providers: [ - provideNoopAnimations(), + { provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }, { provide: MatDialogRef, useValue: { @@ -32,7 +32,7 @@ test('closes the dialog via the backdrop', async () => { const user = userEvent.setup(); await render(DialogComponent, { - providers: [provideNoopAnimations()], + providers: [{ provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }], }); const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); @@ -56,7 +56,7 @@ test('opens and closes the dialog with buttons', async () => { const user = userEvent.setup(); await render(DialogComponent, { - providers: [provideNoopAnimations()], + providers: [{ provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }], }); const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); diff --git a/package.json b/package.json index fb39ee4a..cee8fd9c 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "@angular/core": "22.0.2", "@angular/material": "22.0.0", "@angular/platform-browser": "22.0.2", - "@angular/platform-browser-dynamic": "22.0.2", "@angular/router": "22.0.2", "@ngrx/store": "21.1.0", "@testing-library/dom": "^10.4.1", From a61ba0597c3a3fee3fc1d8facae62ce5caa7cc41 Mon Sep 17 00:00:00 2001 From: Jeevan Mahesha Date: Fri, 7 Aug 2026 22:21:23 +0530 Subject: [PATCH 2/3] fix: update jest builder options and dependencies to latest versions --- angular.json | 5 ++++- package.json | 5 +++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/angular.json b/angular.json index b64ff51b..5164f45c 100644 --- a/angular.json +++ b/angular.json @@ -170,7 +170,10 @@ "defaultConfiguration": "development" }, "test": { - "builder": "@angular-builders/jest:run" + "builder": "@angular-builders/jest:run", + "options": { + "zoneless": false + } }, "lint": { "builder": "@angular-eslint/builder:lint", diff --git a/package.json b/package.json index cee8fd9c..d07e0265 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "zone.js": "^0.15.1" }, "devDependencies": { - "@angular-builders/jest": "^20.0.0", + "@angular-builders/jest": "^22.0.1", "@angular-devkit/core": "22.0.0", "@angular-devkit/schematics": "22.0.0", "@angular-eslint/builder": "22.0.0", @@ -69,7 +69,8 @@ "jasmine-core": "4.2.0", "jasmine-spec-reporter": "7.0.0", "jest": "30.2.0", - "jest-preset-angular": "^16.0.0", + "jest-environment-jsdom": "30.2.0", + "jest-preset-angular": "^17.0.0", "jsdom": "^27.3.0", "karma": "6.4.0", "karma-chrome-launcher": "^3.2.0", From 6489ac6076dad62a9ac74eba21671b9c91f52152 Mon Sep 17 00:00:00 2001 From: Jeevan Mahesha Date: Wed, 12 Aug 2026 10:51:23 +0530 Subject: [PATCH 3/3] fix: remove deprecated @angular/animations dependency --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index d07e0265..8c248767 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "prepare": "git config core.hookspath .githooks" }, "dependencies": { - "@angular/animations": "22.0.2", "@angular/cdk": "22.0.0", "@angular/common": "22.0.2", "@angular/compiler": "22.0.2",