fix(@schematics/angular): use fixture.whenStable() instead of fixture.detectChanges() for zoneless apps

Author: mistrykaran91

packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template

@@ -20,9 +20,9 @@ describe('App', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should render title', () => {
+  it('should render title', <% if(zoneless) { %> async <% } %>() => {
     const fixture = TestBed.createComponent(App);
-    fixture.detectChanges();
+    <%= zoneless ? 'await fixture.whenStable();' : 'fixture.detectChanges();' %>
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');
   });

packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template

@@ -14,9 +14,9 @@ describe('App', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should render title', () => {
+  it('should render title', <% if(zoneless) { %> async <% } %>() => {
     const fixture = TestBed.createComponent(App);
-    fixture.detectChanges();
+    <%= zoneless ? 'await fixture.whenStable();' : 'fixture.detectChanges();' %>
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');
   });

packages/schematics/angular/application/index_spec.ts

@@ -829,6 +829,66 @@ describe('Application Schematic', () => {
       const fileContent = tree.readContent(path);
       expect(fileContent).not.toMatch(/provideZone(less)?ChangeDetection/gi);
     });
+
+    it('should add fixture.whenStable() in initial spec files when zoneless application', async () => {
+      const tree = await schematicRunner.runSchematic(
+        'application',
+        {
+          ...defaultOptions,
+          standalone: false,
+        },
+        workspaceTree,
+      );
+
+      const content = tree.readContent('/projects/foo/src/app/app.spec.ts');
+      expect(content).toContain('fixture.whenStable()');
+      expect(content).not.toContain('fixture.detectChanges()');
+    });
+
+    it('should not add fixture.whenStable() in initial spec files when its not zoneless application', async () => {
+      const tree = await schematicRunner.runSchematic(
+        'application',
+        {
+          ...defaultOptions,
+          zoneless: false,
+          standalone: false,
+        },
+        workspaceTree,
+      );
+
+      const content = tree.readContent('/projects/foo/src/app/app.spec.ts');
+      expect(content).not.toContain('fixture.whenStable()');
+      expect(content).toContain('fixture.detectChanges()');
+    });
+  });
+
+  it('should add fixture.whenStable() when zoneless application', async () => {
+    const tree = await schematicRunner.runSchematic(
+      'application',
+      {
+        ...defaultOptions,
+      },
+      workspaceTree,
+    );
+
+    const content = tree.readContent('/projects/foo/src/app/app.spec.ts');
+    expect(content).toContain('fixture.whenStable()');
+    expect(content).not.toContain('fixture.detectChanges()');
+  });
+
+  it('should not add fixture.whenStable() in initial spec files when its not zoneless application', async () => {
+    const tree = await schematicRunner.runSchematic(
+      'application',
+      {
+        ...defaultOptions,
+        zoneless: false,
+      },
+      workspaceTree,
+    );
+
+    const content = tree.readContent('/projects/foo/src/app/app.spec.ts');
+    expect(content).not.toContain('fixture.whenStable()');
+    expect(content).toContain('fixture.detectChanges()');
   });
 
   it('should call the tailwind schematic when style is tailwind', async () => {

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -14,7 +14,7 @@ describe('<%= classifiedName %>', () => {
 
     fixture = TestBed.createComponent(<%= classifiedName %>);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    <%= zoneless ? 'await fixture.whenStable();' : 'fixture.detectChanges();' %>
   });
 
   it('should create', () => {

packages/schematics/angular/component/index.ts

@@ -24,6 +24,7 @@ import { addDeclarationToNgModule } from '../utility/add-declaration-to-ng-modul
 import { findModuleFromOptions } from '../utility/find-module';
 import { parseName } from '../utility/parse-name';
 import { createProjectSchematic } from '../utility/project';
+import { isZonelessApp } from '../utility/project-targets';
 import { validateClassName, validateHtmlSelector } from '../utility/validation';
 import { buildDefaultPath } from '../utility/workspace';
 import { Schema as ComponentOptions, Style } from './schema';
@@ -59,6 +60,7 @@ export default createProjectSchematic<ComponentOptions>((options, { project, tre
     strings.classify(options.name) +
     (options.addTypeToClassName && options.type ? strings.classify(options.type) : '');
   validateClassName(classifiedName);
+  const zoneless = isZonelessApp(project);
 
   const skipStyleFile = options.inlineStyle || options.style === Style.None;
   const templateSource = apply(url('./files'), [
@@ -72,6 +74,7 @@ export default createProjectSchematic<ComponentOptions>((options, { project, tre
       ...options,
       // Add a new variable for the classified name, conditionally including the type
       classifiedName,
+      zoneless,
     }),
     !options.type
       ? forEach(((file) => {

packages/schematics/angular/component/index_spec.ts

@@ -531,6 +531,15 @@ describe('Component Schematic', () => {
 
       await expectAsync(schematicRunner.runSchematic('component', options, appTree)).toBeRejected();
     });
+
+    it('should add fixture.whenStable() in spec file for non standalone', async () => {
+      const options = { ...defaultNonStandaloneOptions };
+      const tree = await schematicRunner.runSchematic('component', options, appTree);
+      const tsContent = tree.readContent('/projects/baz/src/app/foo/foo.component.spec.ts');
+
+      expect(tsContent).toContain('fixture.whenStable()');
+      expect(tsContent).not.toContain('fixture.detectChanges()');
+    });
   });
 
   it('should export the component as default when exportDefault is true', async () => {
@@ -554,4 +563,53 @@ describe('Component Schematic', () => {
     const specContent = tree.readContent('/projects/bar/src/app/foo/foo.component.spec.ts');
     expect(specContent).toContain("import { FooComponent } from './foo.component';");
   });
+
+  it('should add fixture.whenStable() in spec file when zoneless and standalone apps', async () => {
+    const tree = await schematicRunner.runSchematic('component', { ...defaultOptions }, appTree);
+    const tsContent = tree.readContent('/projects/bar/src/app/foo/foo.component.spec.ts');
+
+    expect(tsContent).toContain('fixture.whenStable()');
+    expect(tsContent).not.toContain('fixture.detectChanges()');
+  });
+
+  describe('with zone.js application', () => {
+    const zoneAppOptions: ApplicationOptions = {
+      ...appOptions,
+      name: 'baz',
+      zoneless: false,
+    };
+
+    it('should add not fixture.whenStable() in spec file for standalone', async () => {
+      appTree = await schematicRunner.runSchematic(
+        'application',
+        { ...zoneAppOptions, standalone: true },
+        appTree,
+      );
+      const tree = await schematicRunner.runSchematic(
+        'component',
+        { ...defaultOptions, standalone: true, project: 'baz' },
+        appTree,
+      );
+
+      const tsContent = tree.readContent('/projects/baz/src/app/foo/foo.component.spec.ts');
+
+      expect(tsContent).not.toContain('fixture.whenStable()');
+      expect(tsContent).toContain('fixture.detectChanges()');
+    });
+
+    it('should add not fixture.whenStable() in spec file for standalone is false', async () => {
+      appTree = await schematicRunner.runSchematic('application', { ...zoneAppOptions }, appTree);
+
+      const tree = await schematicRunner.runSchematic(
+        'component',
+        { ...defaultOptions, standalone: false, skipImport: true, project: 'baz' },
+        appTree,
+      );
+
+      const tsContent = tree.readContent('/projects/baz/src/app/foo/foo.component.spec.ts');
+
+      expect(tsContent).not.toContain('fixture.whenStable()');
+      expect(tsContent).toContain('fixture.detectChanges()');
+    });
+  });
 });

packages/schematics/angular/utility/project-targets.ts

@@ -21,3 +21,15 @@ export function isUsingApplicationBuilder(project: ProjectDefinition): boolean {
 
   return isUsingApplicationBuilder;
 }
+
+export function isZonelessApp(project: ProjectDefinition): boolean {
+  const buildTarget = project.targets.get('build');
+  if (!buildTarget?.options?.polyfills) {
+    return true;
+  }
+
+  const polyfills = buildTarget.options.polyfills as string[] | string;
+  const polyfillsList = Array.isArray(polyfills) ? polyfills : [polyfills];
+
+  return !polyfillsList.includes('zone.js');
+}