From 8ddb0cc622589f69f443923c92735486fc773bb8 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Sat, 7 Jun 2025 20:55:04 +0200 Subject: [PATCH 1/2] feat: remove animations dependency BREAKING CHANGE Because of the removal of the animations dependency, the NoopAnimationsModule is no longer automatically imported in the render. BEFORE: The NoopAnimationsModule was always imported to the render. AFTER: Import the NoopAnimationsModule where needed, or configure the default imports using configure: ` s configure({ defaultImports: [NoopAnimationsModule], }); ` --- apps/example-app/src/test-setup.ts | 5 +++++ projects/testing-library/package.json | 1 - projects/testing-library/src/lib/models.ts | 3 +-- .../src/lib/testing-library.ts | 9 +-------- projects/testing-library/tests/render.spec.ts | 20 ------------------- 5 files changed, 7 insertions(+), 31 deletions(-) diff --git a/apps/example-app/src/test-setup.ts b/apps/example-app/src/test-setup.ts index 96bfd34..01f9ee8 100644 --- a/apps/example-app/src/test-setup.ts +++ b/apps/example-app/src/test-setup.ts @@ -1,4 +1,9 @@ +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; +import { configure } from '@testing-library/angular'; import '@testing-library/jest-dom'; setupZoneTestEnv(); +configure({ + defaultImports: [NoopAnimationsModule], +}); diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json index 79ad49b..6ea1a38 100644 --- a/projects/testing-library/package.json +++ b/projects/testing-library/package.json @@ -29,7 +29,6 @@ "migrations": "./schematics/migrations/migrations.json" }, "peerDependencies": { - "@angular/animations": ">= 20.0.0", "@angular/common": ">= 20.0.0", "@angular/platform-browser": ">= 20.0.0", "@angular/router": ">= 20.0.0", diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts index 47ea5bb..33cd71a 100644 --- a/projects/testing-library/src/lib/models.ts +++ b/projects/testing-library/src/lib/models.ts @@ -178,12 +178,11 @@ export interface RenderComponentOptions( sut: Type | string, { imports = [], routes }: Pick, '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( diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts index dc54ac5..a93da90 100644 --- a/projects/testing-library/tests/render.spec.ts +++ b/projects/testing-library/tests/render.spec.ts @@ -17,7 +17,6 @@ import { model, } from '@angular/core'; import { outputFromObservable } from '@angular/core/rxjs-interop'; -import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TestBed } from '@angular/core/testing'; import { render, fireEvent, screen, OutputRefKeysWithCallback, aliasedInput } from '../src/public_api'; import { ActivatedRoute, Resolve, RouterModule } from '@angular/router'; @@ -331,25 +330,6 @@ describe('excludeComponentDeclaration', () => { }); }); -describe('animationModule', () => { - it('adds NoopAnimationsModule by default', async () => { - await render(FixtureComponent); - const noopAnimationsModule = TestBed.inject(NoopAnimationsModule); - expect(noopAnimationsModule).toBeDefined(); - }); - - it('does not add NoopAnimationsModule if BrowserAnimationsModule is an import', async () => { - await render(FixtureComponent, { - imports: [BrowserAnimationsModule], - }); - - const browserAnimationsModule = TestBed.inject(BrowserAnimationsModule); - expect(browserAnimationsModule).toBeDefined(); - - expect(() => TestBed.inject(NoopAnimationsModule)).toThrow(); - }); -}); - describe('Angular component life-cycle hooks', () => { @Component({ selector: 'atl-fixture', From 33a0d00b33e227d41dd4f5762b4f03f1e84140c9 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Sun, 8 Jun 2025 18:20:58 +0200 Subject: [PATCH 2/2] fix tests --- .../src/app/examples/15-dialog.component.spec.ts | 10 ++++++++-- apps/example-app/src/test-setup.ts | 5 ----- 2 files changed, 8 insertions(+), 7 deletions(-) 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 017afdc..df172be 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,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/apps/example-app/src/test-setup.ts b/apps/example-app/src/test-setup.ts index 01f9ee8..96bfd34 100644 --- a/apps/example-app/src/test-setup.ts +++ b/apps/example-app/src/test-setup.ts @@ -1,9 +1,4 @@ -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; -import { configure } from '@testing-library/angular'; import '@testing-library/jest-dom'; setupZoneTestEnv(); -configure({ - defaultImports: [NoopAnimationsModule], -});