Karma覆盖率不能100%工作但是(0/0)

时间:2018-04-13 07:15:27

标签: javascript webpack jasmine karma-runner

我试图将我当前的Angular2项目与Karma Coverage集成。请在下面找到我的karma-config。

    module.exports = function (config) {
        const testWebpackConfig = require('./config/webpack/webpack.test.js')({ env: 'test' });
    const configuration = {

        /**
         * Base path that will be used to resolve all patterns (e.g. files, exclude).
         */
        basePath: '',

        /**
         * Frameworks to use
         *
         * available frameworks: https://npmjs.org/browse/keyword/karma-adapter
         */
        frameworks: ['jasmine'],

        /**
         * List of files to exclude.
         */
        exclude: [],

        client: {
            captureConsole: false
        },

        /**
         * List of files / patterns to load in the browser
         *
         * we are building the test environment in ./spec-bundle.js
         */
        files: [
            { pattern: './config/testing/spec-bundle.js', watched: false },
            { pattern: './client/assets/**/*', watched: false, included: false, served: true, nocache: false }
        ],


        /**
         * By default all assets are served at http://localhost:[PORT]/base/
         */
        proxies: {
            "/assets/": "/base/src/assets/"
        },

        /**
         * Preprocess matching files before serving them to the browser
         * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         */
        preprocessors: { './config/testing/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },

        /**
         * Webpack Config at ./webpack.test.js
         */
        webpack: testWebpackConfig,

        coverageReporter: {
            type: 'in-memory'
        },

        remapCoverageReporter: {
            'text-summary': null,
            json: './coverage/coverage.json',
            html: './coverage/html'
        },

        /**
         * Webpack please don't spam the console when running in karma!
         */
        webpackMiddleware: {
            /**
             * webpack-dev-middleware configuration
             * i.e.
             */
            logLevel: 'warn',
            /**
             * and use stats to turn off verbose output
             */
            stats: {
                /**
                 * options i.e.
                 */
                chunks: false
            }
        },

        /**
         * Test results reporter to use
         *
         * possible values: 'dots', 'progress'
         * available reporters: https://npmjs.org/browse/keyword/karma-reporter
         */
        reporters: ['mocha', 'coverage', 'remap-coverage'],

        /**
         * Web server port.
         */
        port: 9876,

        /**
         * enable / disable colors in the output (reporters and logs)
         */
        colors: true,

        /**
         * Level of logging
         * possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
         */
        logLevel: config.LOG_WARN,

        /**
         * enable / disable watching file and executing tests whenever any file changes
         */
        autoWatch: false,

        /**
         * start these browsers
         * available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
         */
        browsers: [
            'ChromeTravisCi'
        ],

        customLaunchers: {
            ChromeTravisCi: {
                base: 'ChromeHeadless',
                flags: ['--no-sandbox', '--disable-gpu']
            }
        },

        /**
         * Continuous Integration mode
         * if true, Karma captures browsers, runs the tests and exits
         */
        singleRun: true
        /**
         * For slower machines you may need to have a longer browser
         * wait time . Uncomment the line below if required.
         */
        // browserNoActivityTimeout: 30000

    };


    config.set(configuration);
};

报道摘要报告为

   Coverage summary 
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )

问题:我在这里做错了吗?如何使业力报道加载我的文件? 这在我的项目中使用Express可能很重要。

这是我的测试webpack配置。

    var path = require('path');
const helpers = require('./helpers');

/**
 * Webpack Plugins
 */
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

/**
 * Webpack Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';

/**
 * Webpack configuration
 *
 * See: https://webpack.js.org/configuration/
 */
module.exports = function (options) {
    return {

        /**
         * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
         *
         * Do not change, leave as is or it wont work.
         * See: https://github.com/webpack/karma-webpack#source-maps
         */
        devtool: 'inline-source-map',

        /**
         * Options affecting the resolving of modules.
         *
         * See: https://webpack.js.org/configuration/resolve/
         */
        resolve: {

            /**
             * An array of extensions that should be used to resolve modules.
             *
             * See: https://webpack.js.org/configuration/resolve/#resolve-extensions
             */
            extensions: ['.ts', '.js'],

            /**
             * Make sure root is src
             */
            modules: [helpers.root('client'), 'node_modules']

        },

        /**
         * Options affecting the normal modules.
         *
         * See: https://webpack.js.org/configuration/module/
         *
         * 'use:' revered back to 'loader:' as a temp. workaround for #1188
         * See: https://github.com/gdi2290/angular-starter/issues/1188#issuecomment-262872034
         */
        module: {

            rules: [

                /**
                 * Source map loader support for *.js files
                 * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
                 *
                 * See: https://github.com/webpack/source-map-loader
                 */
                {
                    enforce: 'pre',
                    test: /\.js$/,
                    loader: 'source-map-loader',
                    exclude: [
                        /**
                         * These packages have problems with their sourcemaps
                         */
                        helpers.root('node_modules/rxjs'),
                        helpers.root('node_modules/@angular'),
                        helpers.root('node_modules/@angular/compiler'),
                        path.join(process.cwd(), 'node_modules')
                    ]
                },

                /**
                 * Typescript loader support for .ts and Angular 2 async routes via .async.ts
                 *
                 * See: https://github.com/s-panferov/awesome-typescript-loader
                 */
                {
                    test: /\.ts$/,
                    use: [
                        {
                            loader: 'awesome-typescript-loader',
                            query: {
                                /**
                                 * Use inline sourcemaps for "karma-remap-coverage" reporter
                                 */
                                configFileName:  'tsconfig.test.json',
                                sourceMap: false,
                                inlineSourceMap: true,
                                compilerOptions: {

                                    /**
                                     * Remove TypeScript helpers to be injected
                                     * below by DefinePlugin
                                     */
                                    removeComments: true

                                }
                            }
                        },
                        'angular2-template-loader'
                    ],
                    exclude: [/\.e2e\.ts$/]
                },

                /**
                 * Raw loader support for *.css files
                 * Returns file content as string
                 *
                 * See: https://github.com/webpack/raw-loader
                 */
                {
                    test: /\.css$/,
                    loader: ['to-string-loader', { loader: 'css-loader', options: { url: false } }],
                    exclude: [helpers.root('client/index.html')]
                },

                /**
                 * Raw loader support for *.scss files
                 *
                 * See: https://github.com/webpack/raw-loader
                 */
                {
                    test: /\.scss$/,
                    loader: ['raw-loader', 'sass-loader'],
                    exclude: [helpers.root('client/index.html')]
                },

                /**
                 * Raw loader support for *.html
                 * Returns file content as string
                 *
                 * See: https://github.com/webpack/raw-loader
                 */
                {
                    test: /\.html$/,
                    loader: 'raw-loader',
                    exclude: [helpers.root('client/index.html')]
                },

                /**
                 * Instruments JS files with Istanbul for subsequent code coverage reporting.
                 * Instrument only testing sources.
                 *
                 * See: https://github.com/deepsweet/istanbul-instrumenter-loader
                 */
                {
                    enforce: 'post',
                    test: /\.(js|ts)$/,
                    loader: 'istanbul-instrumenter-loader',
                    include: helpers.root('client'),
                    exclude: [
                        /\.(e2e|spec)\.ts$/,
                        /node_modules/
                    ]
                }

            ]
        },

        /**
         * Add additional plugins to the compiler.
         *
         * See: https://webpack.js.org/configuration/plugins/
         */
        plugins: [

            /**
             * Plugin: DefinePlugin
             * Description: Define free variables.
             * Useful for having development builds with debug logging or adding global constants.
             *
             * Environment helpers
             *
             * See: https://webpack.js.org/plugins/define-plugin/
             *
             * NOTE: when adding more properties make sure you include them in custom-typings.d.ts
             */
            new DefinePlugin({
                'ENV': JSON.stringify(ENV),
                'HMR': false,
                'process.env': {
                    'ENV': JSON.stringify(ENV),
                    'NODE_ENV': JSON.stringify(ENV),
                    'HMR': false,
                }
            }),

            /**
             * Plugin: ContextReplacementPlugin
             * Description: Provides context to Angular's use of System.import
             *
             * See: https://webpack.js.org/plugins/context-replacement-plugin/
             * See: https://github.com/angular/angular/issues/11580
             */


            new ContextReplacementPlugin(
                // The (\\|\/) piece accounts for path separators in *nix and Windows
                /angular(\\|\/)core(\\|\/)@angular/,
                helpers.root('client'), // location of your src
                {} // a map of your routes
            ),

            /**
             * Plugin LoaderOptionsPlugin (experimental)
             *
             * See: https://gist.github.com/sokra/27b24881210b56bbaff7
             */
            new LoaderOptionsPlugin({
                debug: false,
                options: {
                    /**
                     * legacy options go here
                     */
                }
            })

        ],

        /**
         * Disable performance hints
         *
         * See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
         */
        performance: {
            hints: false
        },

        /**
         * Include polyfills or mocks for various node stuff
         * Description: Node configuration
         *
         * See: https://webpack.js.org/configuration/node/
         */
        node: {
            global: true,
            crypto: 'empty',
            process: false,
            module: false,
            clearImmediate: false,
            setImmediate: false,
            fs: 'empty'
        }

    };
};

2 个答案:

答案 0 :(得分:1)

在您的Kamar-config文件中,您看起来缺少预处理器以指示要覆盖的源文件。我理解'./config/testing/spec-bundle.js'仅适用于测试文件......

{
  preprocessors: {'./src/**/*.ts': ['coverage']}
}

https://github.com/karma-runner/karma-coverage

答案 1 :(得分:1)

问题通常与版本不兼容或无法获得正确的需求集有关。我的建议是从经过试验和测试的锅炉板代码开始。

https://github.com/preboot/angular-webpack

密钥文件列在下面

<强>的package.json

{
  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "clean": "rimraf node_modules doc dist && npm cache clean",
    "clean-install": "npm run clean && npm install",
    "clean-start": "npm run clean-install && npm start",
    "watch": "webpack --watch --progress --profile",
    "build": "rimraf dist && webpack --progress --profile --bail",
    "server": "webpack-dev-server --inline --progress --port 8080",
    "webdriver-update": "webdriver-manager update",
    "webdriver-start": "webdriver-manager start",
    "lint": "tslint --force \"src/**/*.ts\"",
    "e2e": "protractor",
    "e2e-live": "protractor --elementExplorer",
    "pretest": "npm run lint",
    "test": "karma start",
    "posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
    "test-watch": "karma start --no-single-run --auto-watch",
    "ci": "npm run e2e && npm run test",
    "docs": "typedoc --options typedoc.json src/app/app.component.ts",
    "start": "npm run server",
    "start:hmr": "npm run server -- --hot",
    "postinstall": "npm run webdriver-update"
  },
  "dependencies": {
    "@angular/common": "~4.2.6",
    "@angular/compiler": "~4.2.6",
    "@angular/core": "~4.2.6",
    "@angular/forms": "~4.2.6",
    "@angular/http": "~4.2.6",
    "@angular/platform-browser": "~4.2.6",
    "@angular/platform-browser-dynamic": "~4.2.6",
    "@angular/router": "~4.2.6",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "tslib": "^1.7.1",
    "rxjs": "^5.0.1",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@angularclass/hmr": "^1.0.1",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.53.39",
    "angular2-template-loader": "^0.6.0",
    "autoprefixer": "^6.3.2",
    "awesome-typescript-loader": "^3.1.2",
    "codelyzer": "2.0.0",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.10.0",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.8.1",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.3.4",
    "jasmine-spec-reporter": "^3.2.0",
    "json-loader": "^0.5.3",
    "karma": "1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.3",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.2",
    "node-sass": "^4.5.0",
    "null-loader": "0.1.1",
    "postcss-loader": "^1.1.0",
    "protractor": "^4.0.10",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.4",
    "rimraf": "^2.5.1",
    "sass-loader": "^6.0.1",
    "shelljs": "^0.7.0",
    "style-loader": "^0.13.0",
    "ts-helpers": "^1.1.1",
    "tslint": "^4.3.1",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.1",
    "typescript": "^2.3.1",
    "url-loader": "^0.5.6",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.3.0"
  }
}

<强> webpack.config.js

// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');

// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig() {
  /**
   * Config
   * Reference: http://webpack.github.io/docs/configuration.html
   * This is the object where all configuration gets set
   */
  var config = {};

  /**
   * Devtool
   * Reference: http://webpack.github.io/docs/configuration.html#devtool
   * Type of sourcemap to use per build type
   */
  if (isProd) {
    config.devtool = 'source-map';
  }
  else if (isTest) {
    config.devtool = 'inline-source-map';
  }
  else {
    config.devtool = 'eval-source-map';
  }

  if (!isTest) {
    /**
     * Entry
     * Reference: http://webpack.github.io/docs/configuration.html#entry
     */
    config.entry = isTest ? {} : {
      'polyfills': './src/polyfills.ts',
      'vendor': './src/vendor.ts',
      'app': './src/main.ts' // our angular app
    };
  }

  /**
   * Output
   * Reference: http://webpack.github.io/docs/configuration.html#output
   */
  config.output = isTest ? {} : {
    path: root('dist'),
    publicPath: isProd ? '/' : 'http://localhost:8080/',
    filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
    chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
  };

  /**
   * Resolve
   * Reference: http://webpack.github.io/docs/configuration.html#resolve
   */
  config.resolve = {
    // only discover files that have those extensions
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
  };

  var atlOptions = '';
  if (isTest && !isTestWatch) {
    // awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
    atlOptions = 'inlineSourceMap=true&sourceMap=false';
  }

  /**
   * Loaders
   * Reference: http://webpack.github.io/docs/configuration.html#module-loaders
   * List: http://webpack.github.io/docs/list-of-loaders.html
   * This handles most of the magic responsible for converting modules
   */
  config.module = {
    rules: [
      // Support for .ts files.
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
        exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
      },

      // copy those assets to output
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=fonts/[name].[hash].[ext]?'
      },

      // Support for *.json files.
      {test: /\.json$/, loader: 'json-loader'},

      // Support for CSS as raw text
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.css$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader']})
      },
      // all css required in src/app files will be merged in js files
      {test: /\.css$/, include: root('src', 'app'), loader: 'raw-loader!postcss-loader'},

      // support for .scss files
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.(scss|sass)$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader']})
      },
      // all css required in src/app files will be merged in js files
      {test: /\.(scss|sass)$/, exclude: root('src', 'style'), loader: 'raw-loader!postcss-loader!sass-loader'},

      // support for .html as raw text
      // todo: change the loader to something that adds a hash to images
      {test: /\.html$/, loader: 'raw-loader',  exclude: root('src', 'public')}
    ]
  };

  if (isTest && !isTestWatch) {
    // instrument only testing sources with Istanbul, covers ts files
    config.module.rules.push({
      test: /\.ts$/,
      enforce: 'post',
      include: path.resolve('src'),
      loader: 'istanbul-instrumenter-loader',
      exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
    });
  }

  if (!isTest || !isTestWatch) {
    // tslint support
    config.module.rules.push({
      test: /\.ts$/,
      enforce: 'pre',
      loader: 'tslint-loader'
    });
  }

  /**
   * Plugins
   * Reference: http://webpack.github.io/docs/configuration.html#plugins
   * List: http://webpack.github.io/docs/list-of-plugins.html
   */
  config.plugins = [
    // Define env variables to help with builds
    // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
    new webpack.DefinePlugin({
      // Environment helpers
      'process.env': {
        ENV: JSON.stringify(ENV)
      }
    }),

    // Workaround needed for angular 2 angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      root('./src') // location of your src
    ),

    // Tslint configuration for webpack 2
    new webpack.LoaderOptionsPlugin({
      options: {
        /**
         * Apply the tslint loader as pre/postLoader
         * Reference: https://github.com/wbuchwalter/tslint-loader
         */
        tslint: {
          emitErrors: false,
          failOnHint: false
        },
        /**
         * Sass
         * Reference: https://github.com/jtangelder/sass-loader
         * Transforms .scss files to .css
         */
        sassLoader: {
          //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
        },
        /**
         * PostCSS
         * Reference: https://github.com/postcss/autoprefixer-core
         * Add vendor prefixes to your css
         */
        postcss: [
          autoprefixer({
            browsers: ['last 2 version']
          })
        ]
      }
    })
  ];

  if (!isTest && !isTestWatch) {
    config.plugins.push(
      // Generate common chunks if necessary
      // Reference: https://webpack.github.io/docs/code-splitting.html
      // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
      new CommonsChunkPlugin({
        name: ['vendor', 'polyfills']
      }),

      // Inject script and link tags into html files
      // Reference: https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        template: './src/public/index.html',
        chunksSortMode: 'dependency'
      }),

      // Extract css files
      // Reference: https://github.com/webpack/extract-text-webpack-plugin
      // Disabled when in test mode or not in build mode
      new ExtractTextPlugin({filename: 'css/[name].[hash].css', disable: !isProd})
    );
  }

  // Add build specific plugins
  if (isProd) {
    config.plugins.push(
      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
      // Only emit files when there are no errors
      new webpack.NoEmitOnErrorsPlugin(),

      // // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
      // // Dedupe modules in the output
      // new webpack.optimize.DedupePlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
      // Minify all javascript, switch loaders to minimizing mode
      new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),

      // Copy assets from the public folder
      // Reference: https://github.com/kevlened/copy-webpack-plugin
      new CopyWebpackPlugin([{
        from: root('src/public')
      }])
    );
  }

  /**
   * Dev server configuration
   * Reference: http://webpack.github.io/docs/configuration.html#devserver
   * Reference: http://webpack.github.io/docs/webpack-dev-server.html
   */
  config.devServer = {
    contentBase: './src/public',
    historyApiFallback: true,
    quiet: true,
    stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
  };

  return config;
}();

// Helper functions
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

<强> karma.conf.js

var path = require('path');

var webpackConfig = require('./webpack.config');

var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';

module.exports = function (config) {
  var _config = {

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],

    // list of files to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './karma-shim.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      stats: 'errors-only'
    },

    webpackServer: {
      noInfo: true // please don't spam the console when running in karma!
    },

    // test results reporter to use
    // possible values: 'dots', 'progress', 'mocha'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ["mocha"],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  };

  if (!isTestWatch) {
    _config.reporters.push("coverage");

    _config.coverageReporter = {
      dir: 'coverage/',
      reporters: [{
        type: 'json',
        dir: 'coverage',
        subdir: 'json',
        file: 'coverage-final.json'
      }]
    };
  }

  config.set(_config);

};

<强> tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "lib": ["es2015", "dom"]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  }
}

<强> protractor.conf.js

exports.config = {
  baseUrl: 'http://localhost:8080/',

  specs: [
    'src/**/*.e2e-spec.js'
  ],
  exclude: [],

  framework: 'jasmine2',

  allScriptsTimeout: 110000,

  jasmineNodeOpts: {
    showTiming: true,
    showColors: true,
    isVerbose: false,
    includeStackTrace: false,
    defaultTimeoutInterval: 400000
  },
  directConnect: true,

  capabilities: {
    'browserName': 'chrome'
  },

  onPrepare: function () {
    var SpecReporter = require('jasmine-spec-reporter').SpecReporter;
    // add jasmine spec reporter
    jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: true}));

    browser.ignoreSynchronization = true;
  },


  /**
   * Angular 2 configuration
   *
   * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
   * `rootEl`
   *
   */
  useAllAngular2AppRoots: true
};