• Karma 配置
    • 概述
      • 框架
      • 插件
      • files
      • 预处理器
      • webpack
      • coverageReporters 和 reporters
      • 环境配置
    • 完成配置
    • 其他资源

    Karma 配置

    Karma是我们测试工作流程的基础。 它集合了我们的其他测试工具来定义我们想要使用的框架，测试环境，我们想要执行的具体操作等。为了做到这一点，Karma依赖于一个以默认karma.conf.js命名的配置文件。
    您可以通过karma init命令生成新的配置文件，这将指导您完成几个基本问题，以便运行最基本的设置。

    概述

    通过导出一个接受Karma将要使用的配置对象的函数，可以将配置文件放在一起。 修改此对象的某些属性将告诉Karma我们想要做什么。 让我们来看一下在这个配置文件中使用的一些关键属性：

    1. module.exports = (config) => {
    2.   const coverage = config.singleRun ? ['coverage'] : [];
    4.   config.set({
    5.     frameworks: [...],
    6.     plugins: [ ... ],
    7.     files: [ ... ],
    8.     preprocessors: { ... },
    10.     webpack: { ... },
    12.     reporters: [ ... ],
    13.     coverageReporter: { ... },
    15.     port: 9999,
    16.     browsers: ['Chrome'], // 或者: 'PhantomJS'
    17.     colors: true,
    18.     logLevel: config.LOG_INFO,
    19.     autoWatch: true,
    20.     captureTimeout: 6000,
    21.   });
    22. };

    框架

    1. frameworks: [
    2.   'jasmine',
    3. ],

    frameworks是我们要使用的测试框架的列表。这些框架必须通过NPM作为依赖项安装在我们的项目中，或/和作为Karma插件。

    插件

    1. plugins: [
    2.   'karma-jasmine',
    3.   'karma-webpack',
    4.   'karma-coverage',
    5.   'karma-remap-istanbul',
    6.   'karma-chrome-launcher',
    7. ],

    将karma与测试框架（如Jasmine）或构建系统（如Webpack）集成的插件。

    files

    1. files: [
    2.   './src/tests.entry.ts',
    3.   {
    4.     pattern: '**/*.map',
    5.     served: true,
    6.     included: false,
    7.     watched: true,
    8.   },
    9. ],

    files 是要加载到浏览器/测试环境中的文件的列表。 这些文件会按顺序加载，所以顺序很重要。 文件列表还可以采用glob模式的形式，因为为每个创建的新测试脚本手动添加新文件变得相当繁琐。
    在angular2-redux-starter karma.conf.js中，我们将我们希望包含的测试文件放在一个单独的文件 - src / tests.entry.ts中，它包含一个require调用，使用regex模式导入文件. spec.ts文件扩展名。 随着项目越来越大，要包括的文件数量越来越复杂，这是一个很好的做法是将文件导入到一个单独的文件中 - 这使karma.conf.js文件更清晰，更易读。 这里是我们的src / tests.entry.ts看起来像：

    1. let testContext = (<{ context?: Function }>require).context('./', true, /\.test\.ts/);
    2. testContext.keys().forEach(testContext);

    预处理器

    1. preprocessors: {
    2.   './src/tests.entry.ts': [
    3.     'webpack',
    4.     'sourcemap',
    5.   ],
    6.   './src/**/!(*.test|tests.*).(ts|js)': [
    7.     'sourcemap',
    8.   ],
    9. }

    preprocessors 允许在单元测试文件的内容被执行之前对其执行一些操作。 这些操作通过使用Karma插件来执行，并且经常用于换行操作。 由于我们在TypeScript中编写单元测试，因此.ts文件必须转换为纯Javascript以便在基于浏览器的环境中运行。

    在angular2-redux-starter中，这个过程是用webpack完成的，所以我们在所有的测试文件（以.spec.ts结尾的文件）上显式调用webpack处理器。 我们还加载源自源映射处理器的换代的任何sourcemap文件。

    webpack

    1.  webpack: {
    2.   plugins,
    3.   entry: './src/tests.entry.ts',
    4.   devtool: 'inline-source-map',
    5.   resolve: {
    6.     extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
    7.   },
    8.   module: {
    9.     rules:
    10.       combinedLoaders().concat(
    11.         config.singleRun
    12.           ? [ loaders.istanbulInstrumenter ]
    13.           : [ ]),
    14.   },
    15.   stats: { colors: true, reasons: true },
    16. },
    17. webpackServer: {
    18.   noInfo: true, // prevent console spamming when running in Karma!
    19. }

    如果项目使用webpack，那么在Karma配置对象中的属性webpack是我们可以使用Karma配置webpack的位置。 在angular2-redux-starter中，插件和加载程序从它们自己的文件中导出，以便通过webpack config和karma config导入，使配置对象更小。

    使用webpack，我们可以配置如何捆绑我们的单元测试; 也就是说，是将所有测试打包到单个包中，还是将每个单元测试都包含在自己的包中等。无论如何，单元测试不应与其余应用程序代码捆绑在一起（尤其是在生产中！）。 在angular2-redux-starter中，我们选择将所有单元测试捆绑在一起。

    coverageReporters 和 reporters

    1. reporters: ['spec']
    2.   .concat(coverage)
    3.   .concat(coverage.length > 0 ? ['karma-remap-istanbul'] : []),
    5. remapIstanbulReporter: {
    6.   src: 'coverage/chrome/coverage-final.json',
    7.   reports: {
    8.     html: 'coverage',
    9.   },
    10. },
    12. coverageReporter: {
    13.   reporters: [
    14.     { type: 'json' },
    15.   ],
    16.   dir: './coverage/',
    17.   subdir: (browser) => {
    18.     return browser.toLowerCase().split(/[ /-]/)[0]; // returns 'chrome'
    19.   },
    20. },

    coverageReporter用于配置我们的代码覆盖率工具（我们的工具链使用伊斯坦布尔）的结果输出。 这里我们指定以JSON和HTML格式输出结果。 报告将显示在coverage/文件夹中。

    reporters 是在测试循环中使用的 reporters 的列表。 reporters 可以被认为是用于报告核心单元测试之外的测试例程的某些方面的模块化工具。 代码覆盖是reporters 的一个例子 - 我们希望它报告我们的代码有多少被测试。 有更多的 reporters 可用于Karma，可以帮助制定您的测试工作流。

    环境配置

    1. port: 9999,
    2. browsers: ['Chrome'], // Alternatively: 'PhantomJS'
    3. colors: true,
    4. logLevel: config.LOG_INFO,
    5. autoWatch: true,
    6. captureTimeout: 6000,

    port, browsers 和singleRun 配置我们的单元测试将运行的环境。 browsers属性指定了我们希望Karma启动和捕获输出的浏览器。 我们可以使用Chrome，Firefox，Safari，IE或Opera（需要为每个浏览器安装额外的Karma启动器）。 对于无浏览器的DOM实例，我们可以使用PhantomJS（如工具链部分中所述）。

    我们还可以通过浏览到http://localhost:port手动捕获浏览器的输出，其中port是port属性中指定的数字（如果未指定，则默认值为9876）。 属性singleRun控制Karma如何执行，如果设置为true，Karma将启动配置的浏览器，运行测试，然后退出0或1 ，这取决于是否所有测试通过。

    完成配置

    定制所有这些属性的最终结果是在angular-redux-starter中的karma.conf.js文件。

    其他资源

    这只是angular2-redux-starter项目使用的karma.conf.js中的核心属性的示例。 还有更多的属性可以用于扩展和配置Karma的功能 - 看看完整的官方API文档。