feat(@angular-devkit/build-angular): option to build and test only specified spec files

Author: FDIM

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/single-test-transform.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright Google Inc. 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.io/license
+ */
+import { logging } from '@angular-devkit/core';
+import { getOptions } from 'loader-utils';
+import { extname, join } from 'path';
+import { loader } from 'webpack';
+
+export interface SingleTestTransformLoaderOptions {
+  files: string[];
+  logger: logging.Logger;
+}
+
+export const SingleTestTransformLoader = require.resolve(join(__dirname, 'single-test-transform'));
+
+/**
+ * This loader transforms the default test file to only run tests
+ * for some specs instead of all specs.
+ * It works by replacing the known content of the auto-generated test file:
+ *   const context = require.context('./', true, /\.spec\.ts$/);
+ *   context.keys().map(context);
+ * with:
+ *   const context = { keys: () => ({ map: (_a) => { } }) };
+ *   context.keys().map(context);
+ * So that it does nothing.
+ * Then it adds import statements for each file in the files options
+ * array to import them directly, and thus run the tests there.
+ */
+export default function loader(this: loader.LoaderContext, source: string) {
+  const options = getOptions(this) as SingleTestTransformLoaderOptions;
+  const lineSeparator = process.platform === 'win32' ? '\r\n' : '\n';
+
+  const targettedImports = options.files
+    .map(path => `require('./${path.replace('.' + extname(path), '')}');`)
+    .join(lineSeparator);
+
+  // TODO: maybe a documented 'marker/comment' inside test.ts would be nicer?
+  const regex = /require\.context\(.*/;
+
+  // signal the user that expected content is not present
+  if (!regex.test(source)) {
+    const message = [
+      `The 'spec' option requires that the 'main' file for tests include the line below:`,
+      `const context = require.context('./', true, /\.spec\.ts$/);`,
+      `Arguments passed to require.context are not strict and can be changed`,
+    ];
+    options.logger.error(message.join(lineSeparator));
+  }
+
+  const mockedRequireContext = '{ keys: () => ({ map: (_a) => { } }) };' + lineSeparator;
+  source = source.replace(regex, mockedRequireContext + targettedImports);
+
+  return source;
+}

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/find-specs.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Google Inc. 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.io/license
+ */
+import { existsSync } from 'fs';
+import * as glob from 'glob';
+import { basename, dirname, extname, join } from 'path';
+import { isDirectory } from './is-directory';
+
+export function findSpecs(pattern: string, sourceRoot: string, cwd: string): string[] {
+
+  // normalize pattern, glob lib only accepts forward slashes
+  pattern = pattern.replace(/\\/g, '/');
+
+  // remove source root to support relative paths from root
+  // such paths are easy to get when running script via IDEs
+  if (sourceRoot && pattern.startsWith(sourceRoot + '/')) {
+    pattern = pattern.substr(sourceRoot.length + 1); // +1 to include slash
+  }
+
+  // special logic when pattern does not look like a glob
+  if (!glob.hasMagic(pattern)) {
+    if (isDirectory(join(cwd, pattern))) {
+      pattern = `${pattern}/**/*.spec.@(ts|tsx)`;
+    } else {
+      // see if matching spec file exists
+      const extension = extname(pattern);
+      const matchingSpec = `${basename(pattern, extension)}.spec${extension}`;
+
+      if (existsSync(join(cwd, dirname(pattern), matchingSpec))) {
+        pattern = join(dirname(pattern), matchingSpec).replace(/\\/g, '/');
+      }
+    }
+  }
+
+  const files = glob.sync(pattern, {
+    cwd,
+  });
+
+  return files;
+}

packages/angular_devkit/build_angular/src/karma/index.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
-import { resolve } from 'path';
+import { experimental, getSystemPath, join } from '@angular-devkit/core';
+import { dirname, resolve } from 'path';
 import { Observable, from } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import * as webpack from 'webpack';
@@ -17,6 +18,11 @@ import {
   getTestConfig,
   getWorkerConfig,
 } from '../angular-cli-files/models/webpack-configs';
+import {
+  SingleTestTransformLoader,
+  SingleTestTransformLoaderOptions,
+} from '../angular-cli-files/plugins/single-test-transform';
+import { findSpecs } from '../angular-cli-files/utilities/find-specs';
 import { Schema as BrowserBuilderOptions } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { Version } from '../utils/version';
@@ -33,9 +39,13 @@ async function initialize(
   options: KarmaBuilderOptions,
   context: BuilderContext,
   webpackConfigurationTransformer?: ExecutionTransformer<webpack.Configuration>,
+): Promise<[
+  experimental.workspace.Workspace,
+  string,
   // tslint:disable-next-line:no-implicit-dependencies
-): Promise<[typeof import ('karma'), webpack.Configuration]> {
-  const { config } = await generateBrowserWebpackConfigFromContext(
+  typeof import ('karma'), webpack.Configuration
+]> {
+  const { config, workspace, projectName } = await generateBrowserWebpackConfigFromContext(
     // only two properties are missing:
     // * `outputPath` which is fixed for tests
     // * `budgets` which might be incorrect due to extra dev libs
@@ -54,6 +64,8 @@ async function initialize(
   const karma = await import('karma');
 
   return [
+    workspace,
+    projectName,
     karma,
     webpackConfigurationTransformer ? await webpackConfigurationTransformer(config[0]) : config[0],
   ];
@@ -72,7 +84,12 @@ export function execute(
   Version.assertCompatibleAngularVersion(context.workspaceRoot);
 
   return from(initialize(options, context, transforms.webpackConfiguration)).pipe(
-    switchMap(([karma, webpackConfig]) => new Observable<BuilderOutput>(subscriber => {
+    switchMap(([
+      workspace,
+      projectName,
+      karma,
+      webpackConfig,
+    ]) => new Observable<BuilderOutput>(subscriber => {
       const karmaOptions: KarmaConfigOptions = {};
 
       if (options.watch !== undefined) {
@@ -95,6 +112,31 @@ export function execute(
         }
       }
 
+      // prepend special webpack loader that will transform test.ts
+      if (webpackConfig && webpackConfig.module && options.spec) {
+        const sourceRoot = workspace.getProject(projectName).sourceRoot || '';
+        const mainFilePath = getSystemPath(join(workspace.root, options.main));
+        const files = findSpecs(options.spec, sourceRoot, dirname(mainFilePath));
+        // early exit, no reason to start karma
+        if (!files.length) {
+          subscriber.error(`Specified pattern: "${options.spec}" did not match any spec files`);
+
+          return;
+        }
+
+        webpackConfig.module.rules.unshift({
+          test: (path) => path === mainFilePath,
+          use: {
+            // cannot be a simple path as it differs between environments
+            loader: SingleTestTransformLoader,
+            options: {
+              files,
+              logger: context.logger,
+            } as SingleTestTransformLoaderOptions,
+          },
+        });
+      }
+
       // Assign additional karmaConfig options to the local ngapp config
       karmaOptions.configFile = resolve(context.workspaceRoot, options.karmaConfig);
 

packages/angular_devkit/build_angular/src/karma/schema.json

@@ -63,6 +63,10 @@
       "type": "string",
       "description": "Defines the build environment."
     },
+    "spec": {
+      "type": "string",
+      "description": "Glob of files to include, relative to workspace or project root."
+    },
     "sourceMap": {
       "description": "Output sourcemaps.",
       "default": true,

packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts

@@ -169,7 +169,11 @@ export async function generateBrowserWebpackConfigFromContext(
   context: BuilderContext,
   webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => webpack.Configuration[],
   host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
-): Promise<{ workspace: experimental.workspace.Workspace, config: webpack.Configuration[] }> {
+): Promise<{
+  workspace: experimental.workspace.Workspace,
+  projectName: string,
+  config: webpack.Configuration[],
+ }> {
   const registry = new schema.CoreSchemaRegistry();
   registry.addPostTransform(schema.transforms.addUndefinedDefaults);
 
@@ -195,5 +199,5 @@ export async function generateBrowserWebpackConfigFromContext(
     context.logger,
   );
 
-  return { workspace, config };
+  return { workspace, projectName, config };
 }

packages/angular_devkit/build_angular/test/karma/selected_spec_large.ts

@@ -0,0 +1,143 @@
+/**
+ * @license
+ * Copyright Google Inc. 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.io/license
+ */
+import { Architect } from '@angular-devkit/architect';
+import { logging } from '@angular-devkit/core';
+import { createArchitect, host, karmaTargetSpec } from '../utils';
+
+describe('Karma Builder', () => {
+  let architect: Architect;
+
+  beforeEach(async () => {
+    await host.initialize().toPromise();
+    architect = (await createArchitect(host.root())).architect;
+  });
+
+  afterEach(() => host.restore().toPromise());
+
+  describe('with spec option', () => {
+
+    it('should fail when spec does not match any files', async () => {
+      const overrides = {
+        spec: 'abc.spec.ts',
+      };
+      const run = await architect.scheduleTarget(karmaTargetSpec, overrides);
+
+      await expectAsync(run.result)
+        .toBeRejectedWith(`Specified pattern: "abc.spec.ts" did not match any spec files`);
+
+      await run.stop();
+    });
+
+    it('should fail when main test file does not include require.context usage', async () => {
+
+      let lastErrorLogEntry: logging.LogEntry | undefined;
+      const logger = new logging.Logger('test');
+      logger.subscribe(m => {
+        if (m.level === 'error') {
+          lastErrorLogEntry = m;
+        }
+      });
+
+      const mockedRequireContext = '{ keys: () => ({ map: (_a) => { } }) };';
+      const regex = /require\.context\(.*/;
+      host.replaceInFile('src/test.ts', regex, mockedRequireContext);
+
+      const overrides = {
+        spec: '**/*.spec.ts',
+      };
+
+      const run = await architect.scheduleTarget(karmaTargetSpec, overrides, {
+        logger,
+      });
+
+      await expectAsync(run.result).toBeResolved();
+
+      expect(lastErrorLogEntry && lastErrorLogEntry.message)
+        .toContain('const context = require.context');
+      expect(lastErrorLogEntry && lastErrorLogEntry.message)
+        // tslint:disable-next-line:max-line-length
+        .toContain('The \'spec\' option requires that the \'main\' file for tests include the line below:');
+
+      await run.stop();
+    });
+
+    beforeEach(() => {
+      host.writeMultipleFiles({
+        'src/app/services/test.service.spec.ts': `
+          describe('TestService', () => {
+            it('should succeed', () => {
+              expect(true).toBe(true);
+            });
+          });`,
+        'src/app/failing.service.spec.ts': `
+          describe('FailingService', () => {
+            it('should be ignored', () => {
+              expect(true).toBe(false);
+            });
+          });`,
+        'src/app/property.pipe.spec.ts': `
+          describe('PropertyPipe', () => {
+            it('should succeed', () => {
+              expect(true).toBe(true);
+            });
+          });`,
+      });
+    });
+    [
+      {
+        test: 'relative path from workspace to spec',
+        input: 'src/app/app.component.spec.ts',
+      },
+      {
+        test: 'relative path from workspace to file',
+        input: 'src/app/app.component.ts',
+      },
+      {
+        test: 'relative path from project root to spec',
+        input: 'app/services/test.service.spec.ts',
+      },
+      {
+        test: 'relative path from project root to file',
+        input: 'app/services/test.service.ts',
+      },
+      {
+        test: 'relative path from workspace to directory',
+        input: 'src/app/services',
+      },
+      {
+        test: 'relative path from project root to directory',
+        input: 'app/services',
+      },
+      {
+        test: 'glob with spec suffix',
+        input: '**/*.pipe.spec.ts',
+      },
+    ].forEach((options) => {
+
+      it(`should work with ${options.test}`, async () => {
+        const overrides = {
+          spec: options.input,
+        };
+        const logger = new logging.Logger('test');
+        logger.subscribe((m) => {
+          if (m.level === 'error') {
+            fail(m);
+          }
+        });
+        const run = await architect.scheduleTarget(karmaTargetSpec, overrides, {
+          logger,
+        });
+
+        await expectAsync(run.result).toBeResolvedTo(jasmine.objectContaining({ success: true }));
+
+        await run.stop();
+      }, 30000);
+    });
+  });
+
+});