diff --git a/packages/angular/build/src/builders/karma/application_builder.ts b/packages/angular/build/src/builders/karma/application_builder.ts index 004c46930ff9..4b6d66ed1cad 100644 --- a/packages/angular/build/src/builders/karma/application_builder.ts +++ b/packages/angular/build/src/builders/karma/application_builder.ts @@ -10,27 +10,30 @@ import type { BuilderContext, BuilderOutput } from '@angular-devkit/architect'; import type { Config, ConfigOptions, FilePattern, InlinePluginDef, Server } from 'karma'; import { randomUUID } from 'node:crypto'; import * as fs from 'node:fs/promises'; -import type { IncomingMessage, ServerResponse } from 'node:http'; -import { createRequire } from 'node:module'; import path from 'node:path'; -import { ReadableStreamController } from 'node:stream/web'; -import { globSync } from 'tinyglobby'; -import { BuildOutputFileType } from '../../tools/esbuild/bundler-context'; -import { emitFilesToDisk } from '../../tools/esbuild/utils'; +import { ReadableStream } from 'node:stream/web'; import { createVirtualModulePlugin } from '../../tools/esbuild/virtual-module-plugin'; -import { getProjectRootPaths } from '../../utils/project-metadata'; import { buildApplicationInternal } from '../application/index'; import { ApplicationBuilderInternalOptions } from '../application/options'; -import { Result, ResultFile, ResultKind } from '../application/results'; +import { Result, ResultKind } from '../application/results'; import { OutputHashing } from '../application/schema'; -import { findTests, getTestEntrypoints } from './find-tests'; +import { AngularAssetsMiddleware } from './assets-middleware'; +import { createInstrumentationFilter, getInstrumentationExcludedPaths } from './coverage'; +import { getBaseKarmaOptions } from './karma-config'; import { NormalizedKarmaBuilderOptions, normalizeOptions } from './options'; +import { AngularPolyfillsPlugin } from './polyfills-plugin'; +import { injectKarmaReporter } from './progress-reporter'; import { Schema as KarmaBuilderOptions } from './schema'; +import { + collectEntrypoints, + first, + getProjectSourceRoot, + hasChunkOrWorkerFiles, + normalizePolyfills, + writeTestFiles, +} from './utils'; import type { KarmaBuilderTransformsOptions } from './index'; -const localResolve = createRequire(__filename).resolve; -const isWindows = process.platform === 'win32'; - interface BuildOptions extends ApplicationBuilderInternalOptions { // We know that it's always a string since we set it. outputPath: string; @@ -43,242 +46,6 @@ class ApplicationBuildError extends Error { } } -interface ServeFileFunction { - ( - filepath: string, - rangeHeader: string | string[] | undefined, - response: ServerResponse, - transform?: (c: string | Uint8Array) => string | Uint8Array, - content?: string | Uint8Array, - doNotCache?: boolean, - ): void; -} - -interface LatestBuildFiles { - files: Record; -} - -const LATEST_BUILD_FILES_TOKEN = 'angularLatestBuildFiles'; - -class AngularAssetsMiddleware { - static readonly $inject = ['serveFile', LATEST_BUILD_FILES_TOKEN]; - - static readonly NAME = 'angular-test-assets'; - - constructor( - private readonly serveFile: ServeFileFunction, - private readonly latestBuildFiles: LatestBuildFiles, - ) {} - - handle(req: IncomingMessage, res: ServerResponse, next: (err?: unknown) => unknown) { - const url = new URL(`http://${req.headers['host']}${req.url}`); - // Remove the leading slash from the URL path and convert to platform specific. - // The latest build files will use the platform path separator. - let pathname = url.pathname.slice(1); - if (isWindows) { - pathname = pathname.replaceAll(path.posix.sep, path.win32.sep); - } - - const file = this.latestBuildFiles.files[pathname]; - if (!file) { - next(); - - return; - } - - // Implementation of serverFile can be found here: - // https://github.com/karma-runner/karma/blob/84f85e7016efc2266fa6b3465f494a3fa151c85c/lib/middleware/common.js#L10 - switch (file.origin) { - case 'disk': - this.serveFile(file.inputPath, undefined, res, undefined, undefined, /* doNotCache */ true); - break; - case 'memory': - // Include pathname to help with Content-Type headers. - this.serveFile( - `/unused/${url.pathname}`, - undefined, - res, - undefined, - file.contents, - /* doNotCache */ false, - ); - break; - } - } - - static createPlugin(initialFiles: LatestBuildFiles): InlinePluginDef { - return { - [LATEST_BUILD_FILES_TOKEN]: ['value', { files: { ...initialFiles.files } }], - - [`middleware:${AngularAssetsMiddleware.NAME}`]: [ - 'factory', - Object.assign((...args: ConstructorParameters) => { - const inst = new AngularAssetsMiddleware(...args); - - return inst.handle.bind(inst); - }, AngularAssetsMiddleware), - ], - }; - } -} - -class AngularPolyfillsPlugin { - static readonly $inject = ['config.files']; - - static readonly NAME = 'angular-polyfills'; - - static createPlugin( - polyfillsFile: FilePattern, - jasmineCleanupFiles: FilePattern, - scriptsFiles: FilePattern[], - ): InlinePluginDef { - return { - // This has to be a "reporter" because reporters run _after_ frameworks - // and karma-jasmine-html-reporter injects additional scripts that may - // depend on Jasmine but aren't modules - which means that they would run - // _before_ all module code (including jasmine). - [`reporter:${AngularPolyfillsPlugin.NAME}`]: [ - 'factory', - Object.assign((files: (string | FilePattern)[]) => { - // The correct order is zone.js -> jasmine -> zone.js/testing. - // Jasmine has to see the patched version of the global `setTimeout` - // function so it doesn't cache the unpatched version. And /testing - // needs to see the global `jasmine` object so it can patch it. - const polyfillsIndex = 0; - files.splice(polyfillsIndex, 0, polyfillsFile); - - // Insert just before test_main.js. - const zoneTestingIndex = files.findIndex((f) => { - if (typeof f === 'string') { - return false; - } - - return f.pattern.endsWith('/test_main.js'); - }); - if (zoneTestingIndex === -1) { - throw new Error('Could not find test entrypoint file.'); - } - files.splice(zoneTestingIndex, 0, jasmineCleanupFiles); - - // We need to ensure that all files are served as modules, otherwise - // the order in the files list gets really confusing: Karma doesn't - // set defer on scripts, so all scripts with type=js will run first, - // even if type=module files appeared earlier in `files`. - for (const f of files) { - if (typeof f === 'string') { - throw new Error(`Unexpected string-based file: "${f}"`); - } - if (f.included === false) { - // Don't worry about files that aren't included on the initial - // page load. `type` won't affect them. - continue; - } - if (f.pattern.endsWith('.js') && 'js' === (f.type ?? 'js')) { - f.type = 'module'; - } - } - - // Add "scripts" option files as classic scripts - files.unshift(...scriptsFiles); - - // Add browser sourcemap support as a classic script - files.unshift({ - pattern: localResolve('source-map-support/browser-source-map-support.js'), - included: true, - watched: false, - }); - - // Karma needs a return value for a factory and Karma's multi-reporter expects an `adapters` array - return { adapters: [] }; - }, AngularPolyfillsPlugin), - ], - }; - } -} - -function injectKarmaReporter( - buildOptions: BuildOptions, - buildIterator: AsyncIterator, - karmaConfig: Config & ConfigOptions, - controller: ReadableStreamController, -) { - const reporterName = 'angular-progress-notifier'; - - interface RunCompleteInfo { - exitCode: number; - } - - interface KarmaEmitter { - refreshFiles(): void; - } - - class ProgressNotifierReporter { - static $inject = ['emitter', LATEST_BUILD_FILES_TOKEN]; - - constructor( - private readonly emitter: KarmaEmitter, - private readonly latestBuildFiles: LatestBuildFiles, - ) { - this.startWatchingBuild(); - } - - private startWatchingBuild() { - void (async () => { - // This is effectively "for await of but skip what's already consumed". - let isDone = false; // to mark the loop condition as "not constant". - while (!isDone) { - const { done, value: buildOutput } = await buildIterator.next(); - if (done) { - isDone = true; - break; - } - - if (buildOutput.kind === ResultKind.Failure) { - controller.enqueue({ success: false, message: 'Build failed' }); - } else if ( - buildOutput.kind === ResultKind.Incremental || - buildOutput.kind === ResultKind.Full - ) { - if (buildOutput.kind === ResultKind.Full) { - this.latestBuildFiles.files = buildOutput.files; - } else { - this.latestBuildFiles.files = { - ...this.latestBuildFiles.files, - ...buildOutput.files, - }; - } - await writeTestFiles(buildOutput.files, buildOptions.outputPath); - this.emitter.refreshFiles(); - } - } - })(); - } - - onRunComplete = function (_browsers: unknown, results: RunCompleteInfo) { - if (results.exitCode === 0) { - controller.enqueue({ success: true }); - } else { - controller.enqueue({ success: false }); - } - }; - } - - karmaConfig.reporters ??= []; - karmaConfig.reporters.push(reporterName); - - karmaConfig.plugins ??= []; - karmaConfig.plugins.push({ - [`reporter:${reporterName}`]: [ - 'factory', - Object.assign( - (...args: ConstructorParameters) => - new ProgressNotifierReporter(...args), - ProgressNotifierReporter, - ), - ], - }); -} - export function execute( options: KarmaBuilderOptions, context: BuilderContext, @@ -327,54 +94,6 @@ export function execute( }); } -async function getProjectSourceRoot(context: BuilderContext): Promise { - // We have already validated that the project name is set before calling this function. - const projectName = context.target?.project; - if (!projectName) { - return context.workspaceRoot; - } - - const projectMetadata = await context.getProjectMetadata(projectName); - const { projectSourceRoot } = getProjectRootPaths(context.workspaceRoot, projectMetadata); - - return projectSourceRoot; -} - -function normalizePolyfills( - polyfills: string[] = [], -): [polyfills: string[], jasmineCleanup: string[]] { - const jasmineGlobalEntryPoint = localResolve('./polyfills/jasmine_global.js'); - const jasmineGlobalCleanupEntrypoint = localResolve('./polyfills/jasmine_global_cleanup.js'); - const sourcemapEntrypoint = localResolve('./polyfills/init_sourcemaps.js'); - - const zoneTestingEntryPoint = 'zone.js/testing'; - const polyfillsExludingZoneTesting = polyfills.filter((p) => p !== zoneTestingEntryPoint); - - return [ - polyfillsExludingZoneTesting.concat([jasmineGlobalEntryPoint, sourcemapEntrypoint]), - polyfillsExludingZoneTesting.length === polyfills.length - ? [jasmineGlobalCleanupEntrypoint] - : [jasmineGlobalCleanupEntrypoint, zoneTestingEntryPoint], - ]; -} - -async function collectEntrypoints( - options: NormalizedKarmaBuilderOptions, - context: BuilderContext, - projectSourceRoot: string, -): Promise> { - // Glob for files to test. - const testFiles = await findTests( - options.include, - options.exclude, - context.workspaceRoot, - projectSourceRoot, - ); - - return getTestEntrypoints(testFiles, { projectSourceRoot, workspaceRoot: context.workspaceRoot }); -} - -// eslint-disable-next-line max-lines-per-function async function initializeApplication( options: NormalizedKarmaBuilderOptions, context: BuilderContext, @@ -383,14 +102,41 @@ async function initializeApplication( ): Promise< [typeof import('karma'), Config & ConfigOptions, BuildOptions, AsyncIterator | null] > { - const outputPath = path.join(context.workspaceRoot, 'dist/test-out', randomUUID()); + const karma = await import('karma'); const projectSourceRoot = await getProjectSourceRoot(context); + const outputPath = path.join(context.workspaceRoot, 'dist/test-out', randomUUID()); + await fs.rm(outputPath, { recursive: true, force: true }); + + const { buildOptions, mainName } = await setupBuildOptions( + options, + context, + projectSourceRoot, + outputPath, + ); + + const [buildOutput, buildIterator] = await runEsbuild(buildOptions, context, projectSourceRoot); + + const karmaConfig = await configureKarma( + karma, + context, + karmaOptions, + options, + buildOptions, + buildOutput, + mainName, + transforms, + ); - const [karma, entryPoints] = await Promise.all([ - import('karma'), - collectEntrypoints(options, context, projectSourceRoot), - fs.rm(outputPath, { recursive: true, force: true }), - ]); + return [karma, karmaConfig, buildOptions, buildIterator]; +} + +async function setupBuildOptions( + options: NormalizedKarmaBuilderOptions, + context: BuilderContext, + projectSourceRoot: string, + outputPath: string, +): Promise<{ buildOptions: BuildOptions; mainName: string }> { + const entryPoints = await collectEntrypoints(options, context, projectSourceRoot); const mainName = 'test_main'; if (options.main) { @@ -436,6 +182,14 @@ async function initializeApplication( externalDependencies: options.externalDependencies, }; + return { buildOptions, mainName }; +} + +async function runEsbuild( + buildOptions: BuildOptions, + context: BuilderContext, + projectSourceRoot: string, +): Promise<[Result & { kind: ResultKind.Full }, AsyncIterator | null]> { const virtualTestBedInit = createVirtualModulePlugin({ namespace: 'angular:test-bed-init', loadContent: async () => { @@ -446,7 +200,7 @@ async function initializeApplication( `getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {`, ` errorOnUnknownElements: true,`, ` errorOnUnknownProperties: true,`, - '});', + `});`, ]; return { @@ -473,6 +227,21 @@ async function initializeApplication( // Write test files await writeTestFiles(buildOutput.files, buildOptions.outputPath); + return [buildOutput, buildIterator]; +} + +async function configureKarma( + karma: typeof import('karma'), + context: BuilderContext, + karmaOptions: ConfigOptions, + options: NormalizedKarmaBuilderOptions, + buildOptions: BuildOptions, + buildOutput: Result & { kind: ResultKind.Full }, + mainName: string, + transforms?: KarmaBuilderTransformsOptions, +): Promise { + const outputPath = buildOptions.outputPath; + // We need to add this to the beginning *after* the testing framework has // prepended its files. The output path is required for each since they are // added later in the test process via a plugin. @@ -632,160 +401,5 @@ async function initializeApplication( parsedKarmaConfig.reporters = (parsedKarmaConfig.reporters ?? []).concat(['coverage']); } - return [karma, parsedKarmaConfig, buildOptions, buildIterator]; -} - -function hasChunkOrWorkerFiles(files: Record): boolean { - return Object.keys(files).some((filename) => { - return /(?:^|\/)(?:worker|chunk)[^/]+\.js$/.test(filename); - }); -} - -export async function writeTestFiles(files: Record, testDir: string) { - const directoryExists = new Set(); - // Writes the test related output files to disk and ensures the containing directories are present - await emitFilesToDisk(Object.entries(files), async ([filePath, file]) => { - if (file.type !== BuildOutputFileType.Browser && file.type !== BuildOutputFileType.Media) { - return; - } - - const fullFilePath = path.join(testDir, filePath); - - // Ensure output subdirectories exist - const fileBasePath = path.dirname(fullFilePath); - if (fileBasePath && !directoryExists.has(fileBasePath)) { - await fs.mkdir(fileBasePath, { recursive: true }); - directoryExists.add(fileBasePath); - } - - if (file.origin === 'memory') { - // Write file contents - await fs.writeFile(fullFilePath, file.contents); - } else { - // Copy file contents - await fs.copyFile(file.inputPath, fullFilePath, fs.constants.COPYFILE_FICLONE); - } - }); -} - -/** Returns the first item yielded by the given generator and cancels the execution. */ -async function first( - generator: AsyncIterable, - { cancel }: { cancel: boolean }, -): Promise<[T, AsyncIterator | null]> { - if (!cancel) { - const iterator: AsyncIterator = generator[Symbol.asyncIterator](); - const firstValue = await iterator.next(); - if (firstValue.done) { - throw new Error('Expected generator to emit at least once.'); - } - - return [firstValue.value, iterator]; - } - - for await (const value of generator) { - return [value, null]; - } - - throw new Error('Expected generator to emit at least once.'); -} - -function createInstrumentationFilter(includedBasePath: string, excludedPaths: Set) { - return (request: string): boolean => { - return ( - !excludedPaths.has(request) && - !/\.(e2e|spec)\.tsx?$|[\\/]node_modules[\\/]/.test(request) && - request.startsWith(includedBasePath) - ); - }; -} - -function getInstrumentationExcludedPaths(root: string, excludedPaths: string[]): Set { - const excluded = new Set(); - - for (const excludeGlob of excludedPaths) { - const excludePath = excludeGlob[0] === '/' ? excludeGlob.slice(1) : excludeGlob; - globSync(excludePath, { cwd: root }).forEach((p) => excluded.add(path.join(root, p))); - } - - return excluded; -} -function getBaseKarmaOptions( - options: NormalizedKarmaBuilderOptions, - context: BuilderContext, -): ConfigOptions { - // Determine project name from builder context target - const projectName = context.target?.project; - if (!projectName) { - throw new Error(`The 'karma' builder requires a target to be specified.`); - } - - const karmaOptions: ConfigOptions = options.karmaConfig - ? {} - : getBuiltInKarmaConfig(context.workspaceRoot, projectName); - - const singleRun = !options.watch; - karmaOptions.singleRun = singleRun; - - // Workaround https://github.com/angular/angular-cli/issues/28271, by clearing context by default - // for single run executions. Not clearing context for multi-run (watched) builds allows the - // Jasmine Spec Runner to be visible in the browser after test execution. - karmaOptions.client ??= {}; - karmaOptions.client.clearContext ??= singleRun; - - // Convert browsers from a string to an array - if (options.browsers) { - karmaOptions.browsers = options.browsers; - } - - if (options.reporters) { - karmaOptions.reporters = options.reporters; - } - - return karmaOptions; -} - -function getBuiltInKarmaConfig( - workspaceRoot: string, - projectName: string, -): ConfigOptions & Record { - let coverageFolderName = projectName.charAt(0) === '@' ? projectName.slice(1) : projectName; - coverageFolderName = coverageFolderName.toLowerCase(); - - const workspaceRootRequire = createRequire(workspaceRoot + '/'); - - // Any changes to the config here need to be synced to: packages/schematics/angular/config/files/karma.conf.js.template - return { - basePath: '', - frameworks: ['jasmine'], - plugins: [ - 'karma-jasmine', - 'karma-chrome-launcher', - 'karma-jasmine-html-reporter', - 'karma-coverage', - ].map((p) => workspaceRootRequire(p)), - jasmineHtmlReporter: { - suppressAll: true, // removes the duplicated traces - }, - coverageReporter: { - dir: path.join(workspaceRoot, 'coverage', coverageFolderName), - subdir: '.', - reporters: [{ type: 'html' }, { type: 'text-summary' }], - }, - reporters: ['progress', 'kjhtml'], - browsers: ['Chrome'], - customLaunchers: { - // Chrome configured to run in a bazel sandbox. - // Disable the use of the gpu and `/dev/shm` because it causes Chrome to - // crash on some environments. - // See: - // https://github.com/puppeteer/puppeteer/blob/v1.0.0/docs/troubleshooting.md#tips - // https://stackoverflow.com/questions/50642308/webdriverexception-unknown-error-devtoolsactiveport-file-doesnt-exist-while-t - ChromeHeadlessNoSandbox: { - base: 'ChromeHeadless', - flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage'], - }, - }, - restartOnFileChange: true, - }; + return parsedKarmaConfig; } diff --git a/packages/angular/build/src/builders/karma/assets-middleware.ts b/packages/angular/build/src/builders/karma/assets-middleware.ts new file mode 100644 index 000000000000..fd6ce489e583 --- /dev/null +++ b/packages/angular/build/src/builders/karma/assets-middleware.ts @@ -0,0 +1,93 @@ +/** + * @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 type { InlinePluginDef } from 'karma'; +import type { IncomingMessage, ServerResponse } from 'node:http'; +import path from 'node:path'; +import type { ResultFile } from '../application/results'; + +const isWindows = process.platform === 'win32'; + +interface ServeFileFunction { + ( + filepath: string, + rangeHeader: string | string[] | undefined, + response: ServerResponse, + transform?: (c: string | Uint8Array) => string | Uint8Array, + content?: string | Uint8Array, + doNotCache?: boolean, + ): void; +} + +export interface LatestBuildFiles { + files: Record; +} + +const LATEST_BUILD_FILES_TOKEN = 'angularLatestBuildFiles'; + +export class AngularAssetsMiddleware { + static readonly $inject = ['serveFile', LATEST_BUILD_FILES_TOKEN]; + + static readonly NAME = 'angular-test-assets'; + + constructor( + private readonly serveFile: ServeFileFunction, + private readonly latestBuildFiles: LatestBuildFiles, + ) {} + + handle(req: IncomingMessage, res: ServerResponse, next: (err?: unknown) => unknown): void { + const url = new URL(`http://${req.headers['host'] ?? ''}${req.url ?? ''}`); + // Remove the leading slash from the URL path and convert to platform specific. + // The latest build files will use the platform path separator. + let pathname = url.pathname.slice(1); + if (isWindows) { + pathname = pathname.replaceAll(path.posix.sep, path.win32.sep); + } + + const file = this.latestBuildFiles.files[pathname]; + if (!file) { + next(); + + return; + } + + // Implementation of serverFile can be found here: + // https://github.com/karma-runner/karma/blob/84f85e7016efc2266fa6b3465f494a3fa151c85c/lib/middleware/common.js#L10 + switch (file.origin) { + case 'disk': + this.serveFile(file.inputPath, undefined, res, undefined, undefined, /* doNotCache */ true); + break; + case 'memory': + // Include pathname to help with Content-Type headers. + this.serveFile( + `/unused/${url.pathname}`, + undefined, + res, + undefined, + file.contents, + /* doNotCache */ false, + ); + break; + } + } + + static createPlugin(initialFiles: LatestBuildFiles): InlinePluginDef { + return { + [LATEST_BUILD_FILES_TOKEN]: ['value', { files: { ...initialFiles.files } }], + + [`middleware:${AngularAssetsMiddleware.NAME}`]: [ + 'factory', + Object.assign((...args: ConstructorParameters) => { + const inst = new AngularAssetsMiddleware(...args); + + return inst.handle.bind(inst); + }, AngularAssetsMiddleware), + ], + }; + } +} diff --git a/packages/angular/build/src/builders/karma/coverage.ts b/packages/angular/build/src/builders/karma/coverage.ts new file mode 100644 index 000000000000..acacc3f7acc7 --- /dev/null +++ b/packages/angular/build/src/builders/karma/coverage.ts @@ -0,0 +1,34 @@ +/** + * @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 path from 'node:path'; +import { globSync } from 'tinyglobby'; + +export function createInstrumentationFilter(includedBasePath: string, excludedPaths: Set) { + return (request: string): boolean => { + return ( + !excludedPaths.has(request) && + !/\.(e2e|spec)\.tsx?$|[\\/]node_modules[\\/]/.test(request) && + request.startsWith(includedBasePath) + ); + }; +} + +export function getInstrumentationExcludedPaths( + root: string, + excludedPaths: string[], +): Set { + const excluded = new Set(); + + for (const excludeGlob of excludedPaths) { + const excludePath = excludeGlob[0] === '/' ? excludeGlob.slice(1) : excludeGlob; + globSync(excludePath, { cwd: root }).forEach((p) => excluded.add(path.join(root, p))); + } + + return excluded; +} diff --git a/packages/angular/build/src/builders/karma/karma-config.ts b/packages/angular/build/src/builders/karma/karma-config.ts new file mode 100644 index 000000000000..08e39887bcb1 --- /dev/null +++ b/packages/angular/build/src/builders/karma/karma-config.ts @@ -0,0 +1,93 @@ +/** + * @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 type { BuilderContext } from '@angular-devkit/architect'; +import type { ConfigOptions } from 'karma'; +import { createRequire } from 'node:module'; +import path from 'node:path'; +import type { NormalizedKarmaBuilderOptions } from './options'; + +export function getBaseKarmaOptions( + options: NormalizedKarmaBuilderOptions, + context: BuilderContext, +): ConfigOptions { + // Determine project name from builder context target + const projectName = context.target?.project; + if (!projectName) { + throw new Error(`The 'karma' builder requires a target to be specified.`); + } + + const karmaOptions: ConfigOptions = options.karmaConfig + ? {} + : getBuiltInKarmaConfig(context.workspaceRoot, projectName); + + const singleRun = !options.watch; + karmaOptions.singleRun = singleRun; + + // Workaround https://github.com/angular/angular-cli/issues/28271, by clearing context by default + // for single run executions. Not clearing context for multi-run (watched) builds allows the + // Jasmine Spec Runner to be visible in the browser after test execution. + karmaOptions.client ??= {}; + karmaOptions.client.clearContext ??= singleRun; + + // Convert browsers from a string to an array + if (options.browsers) { + karmaOptions.browsers = options.browsers; + } + + if (options.reporters) { + karmaOptions.reporters = options.reporters; + } + + return karmaOptions; +} + +function getBuiltInKarmaConfig( + workspaceRoot: string, + projectName: string, +): ConfigOptions & Record { + let coverageFolderName = projectName.charAt(0) === '@' ? projectName.slice(1) : projectName; + coverageFolderName = coverageFolderName.toLowerCase(); + + const workspaceRootRequire = createRequire(workspaceRoot + '/'); + + // Any changes to the config here need to be synced to: packages/schematics/angular/config/files/karma.conf.js.template + return { + basePath: '', + frameworks: ['jasmine'], + plugins: [ + 'karma-jasmine', + 'karma-chrome-launcher', + 'karma-jasmine-html-reporter', + 'karma-coverage', + ].map((p) => workspaceRootRequire(p)), + jasmineHtmlReporter: { + suppressAll: true, // removes the duplicated traces + }, + coverageReporter: { + dir: path.join(workspaceRoot, 'coverage', coverageFolderName), + subdir: '.', + reporters: [{ type: 'html' }, { type: 'text-summary' }], + }, + reporters: ['progress', 'kjhtml'], + browsers: ['Chrome'], + customLaunchers: { + // Chrome configured to run in a bazel sandbox. + // Disable the use of the gpu and `/dev/shm` because it causes Chrome to + // crash on some environments. + // See: + // https://github.com/puppeteer/puppeteer/blob/v1.0.0/docs/troubleshooting.md#tips + // https://stackoverflow.com/questions/50642308/webdriverexception-unknown-error-devtoolsactiveport-file-doesnt-exist-while-t + ChromeHeadlessNoSandbox: { + base: 'ChromeHeadless', + flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage'], + }, + }, + restartOnFileChange: true, + }; +} diff --git a/packages/angular/build/src/builders/karma/polyfills-plugin.ts b/packages/angular/build/src/builders/karma/polyfills-plugin.ts new file mode 100644 index 000000000000..5cf1022766ec --- /dev/null +++ b/packages/angular/build/src/builders/karma/polyfills-plugin.ts @@ -0,0 +1,86 @@ +/** + * @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 type { FilePattern, InlinePluginDef } from 'karma'; +import { createRequire } from 'node:module'; + +const localResolve = createRequire(__filename).resolve; + +export class AngularPolyfillsPlugin { + static readonly $inject = ['config.files']; + + static readonly NAME = 'angular-polyfills'; + + static createPlugin( + polyfillsFile: FilePattern, + jasmineCleanupFiles: FilePattern, + scriptsFiles: FilePattern[], + ): InlinePluginDef { + return { + // This has to be a "reporter" because reporters run _after_ frameworks + // and karma-jasmine-html-reporter injects additional scripts that may + // depend on Jasmine but aren't modules - which means that they would run + // _before_ all module code (including jasmine). + [`reporter:${AngularPolyfillsPlugin.NAME}`]: [ + 'factory', + Object.assign((files: (string | FilePattern)[]) => { + // The correct order is zone.js -> jasmine -> zone.js/testing. + // Jasmine has to see the patched version of the global `setTimeout` + // function so it doesn't cache the unpatched version. And /testing + // needs to see the global `jasmine` object so it can patch it. + const polyfillsIndex = 0; + files.splice(polyfillsIndex, 0, polyfillsFile); + + // Insert just before test_main.js. + const zoneTestingIndex = files.findIndex((f) => { + if (typeof f === 'string') { + return false; + } + + return f.pattern.endsWith('/test_main.js'); + }); + if (zoneTestingIndex === -1) { + throw new Error('Could not find test entrypoint file.'); + } + files.splice(zoneTestingIndex, 0, jasmineCleanupFiles); + + // We need to ensure that all files are served as modules, otherwise + // the order in the files list gets really confusing: Karma doesn't + // set defer on scripts, so all scripts with type=js will run first, + // even if type=module files appeared earlier in `files`. + for (const f of files) { + if (typeof f === 'string') { + throw new Error(`Unexpected string-based file: "${f}"`); + } + if (f.included === false) { + // Don't worry about files that aren't included on the initial + // page load. `type` won't affect them. + continue; + } + if (f.pattern.endsWith('.js') && 'js' === (f.type ?? 'js')) { + f.type = 'module'; + } + } + + // Add "scripts" option files as classic scripts + files.unshift(...scriptsFiles); + + // Add browser sourcemap support as a classic script + files.unshift({ + pattern: localResolve('source-map-support/browser-source-map-support.js'), + included: true, + watched: false, + }); + + // Karma needs a return value for a factory and Karma's multi-reporter expects an `adapters` array + return { adapters: [] }; + }, AngularPolyfillsPlugin), + ], + }; + } +} diff --git a/packages/angular/build/src/builders/karma/progress-reporter.ts b/packages/angular/build/src/builders/karma/progress-reporter.ts new file mode 100644 index 000000000000..80cbd998d8f5 --- /dev/null +++ b/packages/angular/build/src/builders/karma/progress-reporter.ts @@ -0,0 +1,106 @@ +/** + * @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 type { BuilderOutput } from '@angular-devkit/architect'; +import type { Config, ConfigOptions } from 'karma'; +import type { ReadableStreamController } from 'node:stream/web'; +import type { ApplicationBuilderInternalOptions } from '../application/options'; +import type { Result } from '../application/results'; +import { ResultKind } from '../application/results'; +import type { LatestBuildFiles } from './assets-middleware'; +import { writeTestFiles } from './utils'; + +const LATEST_BUILD_FILES_TOKEN = 'angularLatestBuildFiles'; + +interface BuildOptions extends ApplicationBuilderInternalOptions { + // We know that it's always a string since we set it. + outputPath: string; +} + +export function injectKarmaReporter( + buildOptions: BuildOptions, + buildIterator: AsyncIterator, + karmaConfig: Config & ConfigOptions, + controller: ReadableStreamController, +): void { + const reporterName = 'angular-progress-notifier'; + + interface RunCompleteInfo { + exitCode: number; + } + + interface KarmaEmitter { + refreshFiles(): void; + } + + class ProgressNotifierReporter { + static $inject = ['emitter', LATEST_BUILD_FILES_TOKEN]; + + constructor( + private readonly emitter: KarmaEmitter, + private readonly latestBuildFiles: LatestBuildFiles, + ) { + this.startWatchingBuild(); + } + + private startWatchingBuild() { + void (async () => { + // This is effectively "for await of but skip what's already consumed". + let isDone = false; // to mark the loop condition as "not constant". + while (!isDone) { + const { done, value: buildOutput } = await buildIterator.next(); + if (done) { + isDone = true; + break; + } + + if (buildOutput.kind === ResultKind.Failure) { + controller.enqueue({ success: false, message: 'Build failed' }); + } else if ( + buildOutput.kind === ResultKind.Incremental || + buildOutput.kind === ResultKind.Full + ) { + if (buildOutput.kind === ResultKind.Full) { + this.latestBuildFiles.files = buildOutput.files; + } else { + this.latestBuildFiles.files = { + ...this.latestBuildFiles.files, + ...buildOutput.files, + }; + } + await writeTestFiles(buildOutput.files, buildOptions.outputPath); + this.emitter.refreshFiles(); + } + } + })(); + } + + onRunComplete = function (_browsers: unknown, results: RunCompleteInfo): void { + if (results.exitCode === 0) { + controller.enqueue({ success: true }); + } else { + controller.enqueue({ success: false }); + } + }; + } + + karmaConfig.reporters ??= []; + karmaConfig.reporters.push(reporterName); + + karmaConfig.plugins ??= []; + karmaConfig.plugins.push({ + [`reporter:${reporterName}`]: [ + 'factory', + Object.assign( + (...args: ConstructorParameters) => + new ProgressNotifierReporter(...args), + ProgressNotifierReporter, + ), + ], + }); +} diff --git a/packages/angular/build/src/builders/karma/utils.ts b/packages/angular/build/src/builders/karma/utils.ts new file mode 100644 index 000000000000..20a0be5612c7 --- /dev/null +++ b/packages/angular/build/src/builders/karma/utils.ts @@ -0,0 +1,125 @@ +/** + * @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 type { BuilderContext } from '@angular-devkit/architect'; +import * as fs from 'node:fs/promises'; +import { createRequire } from 'node:module'; +import path from 'node:path'; +import { BuildOutputFileType } from '../../tools/esbuild/bundler-context'; +import { emitFilesToDisk } from '../../tools/esbuild/utils'; +import { getProjectRootPaths } from '../../utils/project-metadata'; +import { ResultFile } from '../application/results'; +import { findTests, getTestEntrypoints } from './find-tests'; +import type { NormalizedKarmaBuilderOptions } from './options'; + +const localResolve = createRequire(__filename).resolve; + +export async function getProjectSourceRoot(context: BuilderContext): Promise { + // We have already validated that the project name is set before calling this function. + const projectName = context.target?.project; + if (!projectName) { + return context.workspaceRoot; + } + + const projectMetadata = await context.getProjectMetadata(projectName); + const { projectSourceRoot } = getProjectRootPaths(context.workspaceRoot, projectMetadata); + + return projectSourceRoot; +} + +export function normalizePolyfills( + polyfills: string[] = [], +): [polyfills: string[], jasmineCleanup: string[]] { + const jasmineGlobalEntryPoint = localResolve('./polyfills/jasmine_global.js'); + const jasmineGlobalCleanupEntrypoint = localResolve('./polyfills/jasmine_global_cleanup.js'); + const sourcemapEntrypoint = localResolve('./polyfills/init_sourcemaps.js'); + + const zoneTestingEntryPoint = 'zone.js/testing'; + const polyfillsExludingZoneTesting = polyfills.filter((p) => p !== zoneTestingEntryPoint); + + return [ + polyfillsExludingZoneTesting.concat([jasmineGlobalEntryPoint, sourcemapEntrypoint]), + polyfillsExludingZoneTesting.length === polyfills.length + ? [jasmineGlobalCleanupEntrypoint] + : [jasmineGlobalCleanupEntrypoint, zoneTestingEntryPoint], + ]; +} + +export async function collectEntrypoints( + options: NormalizedKarmaBuilderOptions, + context: BuilderContext, + projectSourceRoot: string, +): Promise> { + // Glob for files to test. + const testFiles = await findTests( + options.include, + options.exclude, + context.workspaceRoot, + projectSourceRoot, + ); + + return getTestEntrypoints(testFiles, { projectSourceRoot, workspaceRoot: context.workspaceRoot }); +} + +export function hasChunkOrWorkerFiles(files: Record): boolean { + return Object.keys(files).some((filename) => { + return /(?:^|\/)(?:worker|chunk)[^/]+\.js$/.test(filename); + }); +} + +export async function writeTestFiles( + files: Record, + testDir: string, +): Promise { + const directoryExists = new Set(); + // Writes the test related output files to disk and ensures the containing directories are present + await emitFilesToDisk(Object.entries(files), async ([filePath, file]) => { + if (file.type !== BuildOutputFileType.Browser && file.type !== BuildOutputFileType.Media) { + return; + } + + const fullFilePath = path.join(testDir, filePath); + + // Ensure output subdirectories exist + const fileBasePath = path.dirname(fullFilePath); + if (fileBasePath && !directoryExists.has(fileBasePath)) { + await fs.mkdir(fileBasePath, { recursive: true }); + directoryExists.add(fileBasePath); + } + + if (file.origin === 'memory') { + // Write file contents + await fs.writeFile(fullFilePath, file.contents); + } else { + // Copy file contents + await fs.copyFile(file.inputPath, fullFilePath, fs.constants.COPYFILE_FICLONE); + } + }); +} + +/** Returns the first item yielded by the given generator and cancels the execution. */ +export async function first( + generator: AsyncIterable, + { cancel }: { cancel: boolean }, +): Promise<[T, AsyncIterator | null]> { + if (!cancel) { + const iterator: AsyncIterator = generator[Symbol.asyncIterator](); + const firstValue = await iterator.next(); + if (firstValue.done) { + throw new Error('Expected generator to emit at least once.'); + } + + return [firstValue.value, iterator]; + } + + for await (const value of generator) { + return [value, null]; + } + + throw new Error('Expected generator to emit at least once.'); +}