fix(@angular-devkit/build-angular): jasmine.clock with app builder

Author: hybrist

packages/angular_devkit/build_angular/src/builders/karma/application_builder.ts

@@ -20,7 +20,7 @@ import { randomUUID } from 'crypto';
 import glob from 'fast-glob';
 import * as fs from 'fs/promises';
 import { IncomingMessage, ServerResponse } from 'http';
-import type { Config, ConfigOptions, InlinePluginDef } from 'karma';
+import type { Config, ConfigOptions, FilePattern, InlinePluginDef } from 'karma';
 import * as path from 'path';
 import { Observable, Subscriber, catchError, defaultIfEmpty, from, of, switchMap } from 'rxjs';
 import { Configuration } from 'webpack';
@@ -106,6 +106,41 @@ class AngularAssetsMiddleware {
   }
 }
 
+class AngularPolyfillsFramework {
+  static readonly $inject = ['config.files'];
+
+  static readonly NAME = 'angular-test-polyfills';
+
+  static createPlugin(
+    polyfillsFile: FilePattern,
+    zoneTestingFile: FilePattern | null,
+  ): InlinePluginDef {
+    return {
+      [`framework:${AngularPolyfillsFramework.NAME}`]: [
+        'factory',
+        Object.assign((files: (string | FilePattern)[]) => {
+          // The correct order is zone.js -> jasmine -> zone.js/testing.
+          files.unshift(polyfillsFile);
+          if (zoneTestingFile) {
+            const jasmineBootIndex = files.findIndex((f) => {
+              if (typeof f === 'string') {
+                return false;
+              }
+              return f.pattern.endsWith('karma-jasmine/lib/boot.js');
+            });
+            if (jasmineBootIndex === -1) {
+              // Insert after polyfills.
+              files.splice(1, 0, zoneTestingFile);
+            } else {
+              files.splice(jasmineBootIndex + 1, 0, zoneTestingFile);
+            }
+          }
+        }, AngularPolyfillsFramework),
+      ],
+    };
+  }
+}
+
 function injectKarmaReporter(
   buildOptions: BuildOptions,
   buildIterator: AsyncIterator<Result>,
@@ -247,12 +282,20 @@ async function getProjectSourceRoot(context: BuilderContext): Promise<string> {
   return path.join(context.workspaceRoot, sourceRoot);
 }
 
-function normalizePolyfills(polyfills: string | string[] | undefined): string[] {
+function normalizePolyfills(polyfills: string | string[] | undefined): [string[], string | null] {
   if (typeof polyfills === 'string') {
-    return [polyfills];
+    polyfills = [polyfills];
+  } else if (!polyfills) {
+    polyfills = [];
   }
 
-  return polyfills ?? [];
+  const zoneTestingEntryPoint = 'zone.js/testing';
+  const polyfillsExludingZoneTesting = polyfills.filter((p) => p !== zoneTestingEntryPoint);
+
+  return [
+    polyfillsExludingZoneTesting,
+    polyfillsExludingZoneTesting.length === polyfills.length ? null : zoneTestingEntryPoint,
+  ];
 }
 
 async function collectEntrypoints(
@@ -311,6 +354,11 @@ async function initializeApplication(
       )
     : undefined;
 
+  const [polyfills, zoneTesting] = normalizePolyfills(options.polyfills);
+  if (zoneTesting) {
+    entryPoints.set('zone-testing', zoneTesting);
+  }
+
   const buildOptions: BuildOptions = {
     assets: options.assets,
     entryPoints,
@@ -327,7 +375,7 @@ async function initializeApplication(
     },
     instrumentForCoverage,
     styles: options.styles,
-    polyfills: normalizePolyfills(options.polyfills),
+    polyfills,
     webWorkerTsConfig: options.webWorkerTsConfig,
     watch: options.watch ?? !karmaOptions.singleRun,
     stylePreprocessorOptions: options.stylePreprocessorOptions,
@@ -349,10 +397,26 @@ async function initializeApplication(
   // Write test files
   await writeTestFiles(buildOutput.files, buildOptions.outputPath);
 
+  // We need to add this to the beginning *after* the testing framework has
+  // prepended its files.
+  const polyfillsFile: FilePattern = {
+    pattern: `${outputPath}/polyfills.js`,
+    included: true,
+    served: true,
+    watched: false,
+  };
+  const zoneTestingFile: FilePattern | null = zoneTesting
+    ? {
+        pattern: `${outputPath}/zone-testing.js`,
+        included: true,
+        served: true,
+        type: 'module',
+        watched: false,
+      }
+    : null;
+
   karmaOptions.files ??= [];
   karmaOptions.files.push(
-    // Serve polyfills first.
-    { pattern: `${outputPath}/polyfills.js`, type: 'module', watched: false },
     // Serve global setup script.
     { pattern: `${outputPath}/${mainName}.js`, type: 'module', watched: false },
     // Serve all source maps.
@@ -413,6 +477,11 @@ async function initializeApplication(
   parsedKarmaConfig.middleware ??= [];
   parsedKarmaConfig.middleware.push(AngularAssetsMiddleware.NAME);
 
+  parsedKarmaConfig.plugins.push(
+    AngularPolyfillsFramework.createPlugin(polyfillsFile, zoneTestingFile),
+  );
+  parsedKarmaConfig.frameworks.push(AngularPolyfillsFramework.NAME);
+
   // When using code-coverage, auto-add karma-coverage.
   // This was done as part of the karma plugin for webpack.
   if (

packages/angular_devkit/build_angular/src/builders/karma/tests/behavior/jasmine-clock_spec.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { execute } from '../../index';
+import { BASE_OPTIONS, KARMA_BUILDER_INFO, describeKarmaBuilder } from '../setup';
+
+describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget) => {
+  describe('Behavior: "jasmine.clock()"', () => {
+    beforeEach(async () => {
+      await setupTarget(harness);
+    });
+
+    it('can install and uninstall the mock clock', async () => {
+      await harness.writeFiles({
+        './src/app/app.component.spec.ts': `
+            import { AppComponent } from './app.component';
+
+            describe('Using jasmine.clock()', () => {
+              beforeEach(async () => {
+                jasmine.clock().install();
+              });
+
+              afterEach(() => {
+                jasmine.clock().uninstall();
+              });
+
+              it('runs a basic test case', () => {
+                expect(!!AppComponent).toBe(true);
+              });
+            });`,
+      });
+
+      harness.useTarget('test', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+    });
+  });
+});