Skip to content

Commit f6d3f1b

Browse files
crisbetocrisbeto
authored
fix(material/schematics): import async animations and remove deprecated function usages (#28424)
* Reworks the `ng add` schematic so it doesn't depend on deprecated functions. * Imports the async animations instead of the eagerly-loaded ones.
1 parent 6c713b5 commit f6d3f1b

File tree

2 files changed

+76
-272
lines changed

2 files changed

+76
-272
lines changed

‎src/material/schematics/ng-add/index.spec.ts

Lines changed: 64 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {normalize, workspaces, logging} from '@angular-devkit/core';
22
import {Tree} from '@angular-devkit/schematics';
33
import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
44
import {
5-
addModuleImportToRootModule,
65
getProjectFromWorkspace,
76
getProjectIndexFiles,
87
getProjectStyleFile,
@@ -186,151 +185,71 @@ describe('ng-add schematic', () => {
186185
);
187186
});
188187

189-
describe('animations enabled', () => {
190-
it('should add the BrowserAnimationsModule to the project module', async () => {
191-
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
192-
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
193-
194-
expect(fileContent)
195-
.withContext('Expected the project app module to import the "BrowserAnimationsModule".')
196-
.toContain('BrowserAnimationsModule');
197-
});
198-
199-
it('should not add BrowserAnimationsModule if NoopAnimationsModule is set up', async () => {
200-
const workspace = await getWorkspace(appTree);
201-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
202-
203-
// Simulate the case where a developer uses `ng-add` on an Angular CLI project which already
204-
// explicitly uses the `NoopAnimationsModule`. It would be wrong to forcibly enable browser
205-
// animations without knowing what other components would be affected. In this case, we
206-
// just print a warning message.
207-
addModuleImportToRootModule(
208-
appTree,
209-
'NoopAnimationsModule',
210-
'@angular/platform-browser/animations',
211-
project,
212-
);
213-
214-
await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
215-
216-
expect(errorOutput.length).toBe(1);
217-
expect(errorOutput[0]).toMatch(/Could not set up "BrowserAnimationsModule"/);
218-
});
219-
220-
it('should add the provideAnimations to a bootstrapApplication call', async () => {
221-
appTree.delete('/projects/material/src/app/app.module.ts');
222-
appTree.create(
223-
'/projects/material/src/app/app.config.ts',
224-
`
225-
export const appConfig = {
226-
providers: [{ provide: 'foo', useValue: 1 }]
227-
};
228-
`,
229-
);
230-
appTree.overwrite(
231-
'/projects/material/src/main.ts',
232-
`
233-
import { bootstrapApplication } from '@angular/platform-browser';
234-
import { AppComponent } from './app/app.component';
235-
import { appConfig } from './app/app.config';
236-
237-
bootstrapApplication(AppComponent, appConfig);
238-
`,
239-
);
240-
241-
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
242-
const fileContent = getFileContent(tree, '/projects/material/src/app/app.config.ts');
188+
it('should add provideAnimationsAsync to the project module', async () => {
189+
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
190+
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
243191

244-
expect(fileContent).toContain(
245-
`import { provideAnimations } from '@angular/platform-browser/animations';`,
246-
);
247-
expect(fileContent).toContain(`[{ provide: 'foo', useValue: 1 }, provideAnimations()]`);
248-
});
192+
expect(fileContent).toContain('provideAnimationsAsync()');
193+
expect(fileContent).toContain(
194+
`import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
195+
);
196+
});
249197

250-
it('should not add provideAnimations if provideNoopAnimations is set up in a bootstrapApplication call', async () => {
251-
appTree.delete('/projects/material/src/app/app.module.ts');
252-
appTree.create(
253-
'/projects/material/src/app/app.config.ts',
254-
`
255-
import { provideNoopAnimations } from '@angular/platform-browser/animations';
198+
it('should add the provideAnimationsAsync to a bootstrapApplication call', async () => {
199+
appTree.delete('/projects/material/src/app/app.module.ts');
200+
appTree.create(
201+
'/projects/material/src/app/app.config.ts',
202+
`
203+
export const appConfig = {
204+
providers: [{ provide: 'foo', useValue: 1 }]
205+
};
206+
`,
207+
);
208+
appTree.overwrite(
209+
'/projects/material/src/main.ts',
210+
`
211+
import { bootstrapApplication } from '@angular/platform-browser';
212+
import { AppComponent } from './app/app.component';
213+
import { appConfig } from './app/app.config';
256214
257-
export const appConfig = {
258-
providers: [{ provide: 'foo', useValue: 1 }, provideNoopAnimations()]
259-
};
215+
bootstrapApplication(AppComponent, appConfig);
260216
`,
261-
);
262-
appTree.overwrite(
263-
'/projects/material/src/main.ts',
264-
`
265-
import { bootstrapApplication } from '@angular/platform-browser';
266-
import { AppComponent } from './app/app.component';
267-
import { appConfig } from './app/app.config';
268-
269-
bootstrapApplication(AppComponent, appConfig);
270-
`,
271-
);
217+
);
272218

273-
await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
219+
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
220+
const fileContent = getFileContent(tree, '/projects/material/src/app/app.config.ts');
274221

275-
expect(errorOutput.length).toBe(1);
276-
expect(errorOutput[0]).toMatch(
277-
/Could not add "provideAnimations" because "provideNoopAnimations" is already provided/,
278-
);
279-
});
222+
expect(fileContent).toContain(
223+
`import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
224+
);
225+
expect(fileContent).toContain(`[{ provide: 'foo', useValue: 1 }, provideAnimationsAsync()]`);
280226
});
281227

282-
describe('animations disabled', () => {
283-
it('should add the NoopAnimationsModule to the project module', async () => {
284-
const tree = await runner.runSchematic(
285-
'ng-add-setup-project',
286-
{...baseOptions, animations: 'disabled'},
287-
appTree,
288-
);
289-
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
290-
291-
expect(fileContent)
292-
.withContext('Expected the project app module to import the "NoopAnimationsModule".')
293-
.toContain('NoopAnimationsModule');
294-
});
295-
296-
it('should not add NoopAnimationsModule if BrowserAnimationsModule is set up', async () => {
297-
const workspace = await getWorkspace(appTree);
298-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
299-
300-
// Simulate the case where a developer uses `ng-add` on an Angular CLI project which already
301-
// explicitly uses the `BrowserAnimationsModule`. It would be wrong to forcibly change
302-
// to noop animations.
303-
addModuleImportToRootModule(
304-
appTree,
305-
'BrowserAnimationsModule',
306-
'@angular/platform-browser/animations',
307-
project,
308-
);
309-
310-
const fileContent = getFileContent(appTree, '/projects/material/src/app/app.module.ts');
228+
it("should add the provideAnimationAsync('noop') to the project module if animations are disabled", async () => {
229+
const tree = await runner.runSchematic(
230+
'ng-add-setup-project',
231+
{...baseOptions, animations: 'disabled'},
232+
appTree,
233+
);
234+
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
311235

312-
expect(fileContent)
313-
.not.withContext(
314-
'Expected the project app module to not import the "NoopAnimationsModule".',
315-
)
316-
.toContain('NoopAnimationsModule');
317-
});
236+
expect(fileContent).toContain(`provideAnimationsAsync('noop')`);
237+
expect(fileContent).toContain(
238+
`import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
239+
);
318240
});
319241

320-
describe('animations excluded', () => {
321-
it('should not add any animations code if animations are excluded', async () => {
322-
const tree = await runner.runSchematic(
323-
'ng-add-setup-project',
324-
{...baseOptions, animations: 'excluded'},
325-
appTree,
326-
);
327-
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
242+
it('should not add any animations code if animations are excluded', async () => {
243+
const tree = await runner.runSchematic(
244+
'ng-add-setup-project',
245+
{...baseOptions, animations: 'excluded'},
246+
appTree,
247+
);
248+
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
328249

329-
expect(fileContent).not.toContain('NoopAnimationsModule');
330-
expect(fileContent).not.toContain('BrowserAnimationsModule');
331-
expect(fileContent).not.toContain('@angular/platform-browser/animations');
332-
expect(fileContent).not.toContain('@angular/animations');
333-
});
250+
expect(fileContent).not.toContain('provideAnimationsAsync');
251+
expect(fileContent).not.toContain('@angular/platform-browser/animations');
252+
expect(fileContent).not.toContain('@angular/animations');
334253
});
335254

336255
describe('custom project builders', () => {
@@ -376,7 +295,7 @@ describe('ng-add schematic', () => {
376295
overwriteTargetBuilder(appTree, 'build', 'thirdparty-builder');
377296
await expectAsync(
378297
runner.runSchematic('ng-add-setup-project', baseOptions, appTree),
379-
).toBeRejectedWithError(/not using the default builders.*build/);
298+
).toBeRejected();
380299
});
381300

382301
it('should warn if the "test" target has been changed', async () => {
@@ -658,13 +577,14 @@ describe('ng-add schematic', () => {
658577
);
659578
});
660579

661-
it('should add the BrowserAnimationsModule to the project module', async () => {
580+
it('should add the provideAnimationsAsync to the project module', async () => {
662581
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
663582
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
664583

665-
expect(fileContent)
666-
.withContext('Expected the project app module to import the "BrowserAnimationsModule".')
667-
.toContain('BrowserAnimationsModule');
584+
expect(fileContent).toContain('provideAnimationsAsync()');
585+
expect(fileContent).toContain(
586+
`import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
587+
);
668588
});
669589
});
670590

@@ -727,13 +647,14 @@ describe('ng-add schematic', () => {
727647
);
728648
});
729649

730-
it('should add the BrowserAnimationsModule to the project module', async () => {
650+
it('should add the provideAnimationsAsync to the project module', async () => {
731651
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
732652
const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
733653

734-
expect(fileContent)
735-
.withContext('Expected the project app module to import the "BrowserAnimationsModule".')
736-
.toContain('BrowserAnimationsModule');
654+
expect(fileContent).toContain('provideAnimationsAsync()');
655+
expect(fileContent).toContain(
656+
`import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
657+
);
737658
});
738659
});
739660
});

0 commit comments

Comments
 (0)