fix(@angular/cli): fix error handling on test

Fix #2778
Fix #3424

Author: filipesilva

packages/@angular/cli/models/webpack-configs/test.ts

@@ -4,6 +4,7 @@ import * as webpack from 'webpack';
 
 import { CliConfig } from '../config';
 import { WebpackTestOptions } from '../webpack-test-config';
+import { KarmaWebpackEmitlessError } from '../../plugins/karma-webpack-emitless-error';
 
 /**
  * Enumerate loaders and their dependencies from this file to let the dependency validator
@@ -57,7 +58,8 @@ export function getTestConfig(testConfig: WebpackTestOptions) {
       new webpack.SourceMapDevToolPlugin({
         filename: null, // if no value is provided the sourcemap is inlined
         test: /\.(ts|js)($|\?)/i // process .js and .ts files only
-      })
+      }),
+      new KarmaWebpackEmitlessError()
     ]
   };
 }

packages/@angular/cli/plugins/karma-webpack-emitless-error.ts

@@ -0,0 +1,20 @@
+// Don't emit anything when there are compilation errors. This is useful for preventing Karma
+// from re-running tests when there is a compilation error.
+// Workaround for https://github.com/webpack-contrib/karma-webpack/issues/49
+
+export class KarmaWebpackEmitlessError {
+  constructor() { }
+
+  apply(compiler: any): void {
+    compiler.plugin('done', (stats: any) => {
+      if (stats.compilation.errors.length > 0) {
+        stats.stats = [{
+          toJson: function () {
+            return this;
+          },
+          assets: []
+        }];
+      }
+    });
+  }
+}

packages/@angular/cli/plugins/karma-webpack-throw-error.ts

@@ -0,0 +1,14 @@
+// Force Webpack to throw compilation errors. Useful with karma-webpack when in single-run mode.
+// Workaround for https://github.com/webpack-contrib/karma-webpack/issues/66
+
+export class KarmaWebpackThrowError {
+  constructor() { }
+
+  apply(compiler: any): void {
+    compiler.plugin('done', (stats: any) => {
+      if (stats.compilation.errors.length > 0) {
+        throw new Error(stats.compilation.errors.map((err: any) => err.message || err));
+      }
+    });
+  }
+}

packages/@angular/cli/plugins/karma.ts

@@ -5,6 +5,7 @@ import * as glob from 'glob';
 import { Pattern } from './glob-copy-webpack-plugin';
 import { extraEntryParser } from '../models/webpack-configs/utils';
 import { WebpackTestConfig, WebpackTestOptions } from '../models/webpack-test-config';
+import { KarmaWebpackThrowError } from './karma-webpack-throw-error';
 
 const getAppFromConfig = require('../utilities/app-utils').getAppFromConfig;
 
@@ -102,6 +103,11 @@ const init: any = (config: any) => {
     }
   };
 
+  // If Karma is being ran in single run mode, throw errors.
+  if (config.singleRun) {
+    webpackConfig.plugins.push(new KarmaWebpackThrowError());
+  }
+
   config.webpack = Object.assign(webpackConfig, config.webpack);
   config.webpackMiddleware = Object.assign(webpackMiddlewareConfig, config.webpackMiddleware);
 

tests/e2e/tests/test/test-fail-single-run.ts

@@ -0,0 +1,10 @@
+import { ng } from '../../utils/process';
+import { writeFile } from '../../utils/fs';
+import { expectToFail } from '../../utils/utils';
+
+
+export default function () {
+  // Fails on single run with broken compilation.
+  return writeFile('src/app.component.spec.ts', '<p> definitely not typescript </p>')
+    .then(() => expectToFail(() => ng('test', '--single-run')));
+}

tests/e2e/tests/test/test-fail-watch.ts

@@ -0,0 +1,28 @@
+import {
+  killAllProcesses,
+  waitForAnyProcessOutputToMatch,
+  silentExecAndWaitForOutputToMatch
+} from '../../utils/process';
+import { expectToFail } from '../../utils/utils';
+import { readFile, writeFile } from '../../utils/fs';
+
+
+const karmaGoodRegEx = /Executed 3 of 3/;
+
+export default function () {
+  let originalSpec: string;
+  return silentExecAndWaitForOutputToMatch('ng', ['test'], karmaGoodRegEx)
+    .then(() => readFile('src/app.component.spec.ts'))
+    .then((data) => originalSpec = data)
+    // Trigger a failed rebuild, which shouldn't run tests again.
+    .then(() => writeFile('src/app.component.spec.ts', '<p> definitely not typescript </p>'))
+    .then(() => expectToFail(() => waitForAnyProcessOutputToMatch(karmaGoodRegEx, 10000)))
+    // Restore working spec.
+    .then(() => writeFile('src/app.component.spec.ts', originalSpec))
+    .then(() => waitForAnyProcessOutputToMatch(karmaGoodRegEx, 10000))
+    .then(() => killAllProcesses(), (err: any) => {
+      killAllProcesses();
+      throw err;
+    });
+}
+