Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 59f73ae

Browse files
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` is always imported to the render the component. AFTER: Import the `NoopAnimationsModule` in your render configuration where needed: ```ts await render(SutComponent, { imports: [NoopAnimationsModule], }); ```
1 parent 6a64bbe commit 59f73ae

File tree

5 files changed

+10
-33
lines changed

5 files changed

+10
-33
lines changed

‎apps/example-app/src/app/examples/15-dialog.component.spec.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { MatDialogRef } from '@angular/material/dialog';
2+
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
23
import { render, screen } from '@testing-library/angular';
34
import userEvent from '@testing-library/user-event';
45

@@ -9,6 +10,7 @@ test('dialog closes', async () => {
910

1011
const closeFn = jest.fn();
1112
await render(DialogContentComponent, {
13+
imports: [NoopAnimationsModule],
1214
providers: [
1315
{
1416
provide: MatDialogRef,
@@ -28,7 +30,9 @@ test('dialog closes', async () => {
2830
test('closes the dialog via the backdrop', async () => {
2931
const user = userEvent.setup();
3032

31-
await render(DialogComponent);
33+
await render(DialogComponent, {
34+
imports: [NoopAnimationsModule],
35+
});
3236

3337
const openDialogButton = await screen.findByRole('button', { name: /opendialog/i });
3438
await user.click(openDialogButton);
@@ -50,7 +54,9 @@ test('closes the dialog via the backdrop', async () => {
5054
test('opens and closes the dialog with buttons', async () => {
5155
const user = userEvent.setup();
5256

53-
await render(DialogComponent);
57+
await render(DialogComponent, {
58+
imports: [NoopAnimationsModule],
59+
});
5460

5561
const openDialogButton = await screen.findByRole('button', { name: /opendialog/i });
5662
await user.click(openDialogButton);

‎projects/testing-library/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"migrations": "./schematics/migrations/migrations.json"
3030
},
3131
"peerDependencies": {
32-
"@angular/animations": ">= 20.0.0",
3332
"@angular/common": ">= 20.0.0",
3433
"@angular/platform-browser": ">= 20.0.0",
3534
"@angular/router": ">= 20.0.0",

‎projects/testing-library/src/lib/models.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,12 +178,11 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
178178
/**
179179
* @description
180180
* A collection of imports needed to render the component, for example, shared modules.
181-
* Adds `NoopAnimationsModule` by default if `BrowserAnimationsModule` isn't added to the collection.
182181
*
183182
* For more info see https://angular.io/api/core/NgModule#imports
184183
*
185184
* @default
186-
* `[NoopAnimationsModule]`
185+
* `[]`
187186
*
188187
* @example
189188
* await render(AppComponent, {

‎projects/testing-library/src/lib/testing-library.ts

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
isStandalone,
1313
} from '@angular/core';
1414
import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
15-
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
1615
import { NavigationExtras, Router } from '@angular/router';
1716
import { RouterTestingModule } from '@angular/router/testing';
1817
import type { BoundFunctions, Queries } from '@testing-library/dom';
@@ -513,15 +512,9 @@ function addAutoImports<SutType>(
513512
sut: Type<SutType> | string,
514513
{ imports = [], routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>,
515514
) {
516-
const animations = () => {
517-
const animationIsDefined =
518-
imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1;
519-
return animationIsDefined ? [] : [NoopAnimationsModule];
520-
};
521-
522515
const routing = () => (routes ? [RouterTestingModule.withRoutes(routes)] : []);
523516
const components = () => (typeof sut !== 'string' && isStandalone(sut) ? [sut] : []);
524-
return [...imports, ...components(), ...animations(), ...routing()];
517+
return [...imports, ...components(), ...routing()];
525518
}
526519

527520
async function renderDeferBlock<SutType>(

‎projects/testing-library/tests/render.spec.ts

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
model,
1818
} from '@angular/core';
1919
import { outputFromObservable } from '@angular/core/rxjs-interop';
20-
import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
2120
import { TestBed } from '@angular/core/testing';
2221
import { render, fireEvent, screen, OutputRefKeysWithCallback, aliasedInput } from '../src/public_api';
2322
import { ActivatedRoute, Resolve, RouterModule } from '@angular/router';
@@ -331,25 +330,6 @@ describe('excludeComponentDeclaration', () => {
331330
});
332331
});
333332

334-
describe('animationModule', () => {
335-
it('adds NoopAnimationsModule by default', async () => {
336-
await render(FixtureComponent);
337-
const noopAnimationsModule = TestBed.inject(NoopAnimationsModule);
338-
expect(noopAnimationsModule).toBeDefined();
339-
});
340-
341-
it('does not add NoopAnimationsModule if BrowserAnimationsModule is an import', async () => {
342-
await render(FixtureComponent, {
343-
imports: [BrowserAnimationsModule],
344-
});
345-
346-
const browserAnimationsModule = TestBed.inject(BrowserAnimationsModule);
347-
expect(browserAnimationsModule).toBeDefined();
348-
349-
expect(() => TestBed.inject(NoopAnimationsModule)).toThrow();
350-
});
351-
});
352-
353333
describe('Angular component life-cycle hooks', () => {
354334
@Component({
355335
selector: 'atl-fixture',

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /