Karma 5：集成 Karma 和 Angular2

集成 Karma 和 Angular2 我们需要做很多工作，由于需要使用 TypeScript 进行开发，首先需要正确配置 Typescript ，然后正确配置对 Angular2 的引用。还要创建 Karma 的入口文件，以便进行打包。

1. 安装工具

安装 Angular2.beta.7

karma3@1.0. C:\study\karmaStudy\karma3
├── angular2@2.0.-beta.
├── UNMET PEER DEPENDENCY es6-promise@^3.0.
├── UNMET PEER DEPENDENCY es6-shim@^0.33.
├── UNMET PEER DEPENDENCY reflect-metadata@0.1.
├── UNMET PEER DEPENDENCY rxjs@5.0.-beta.
└── UNMET PEER DEPENDENCY zone.js@0.5.

npm WARN EPEERINVALID angular2@2.0.-beta. requires a peer of es6-promise@^3.0. but none was installed.
npm WARN EPEERINVALID angular2@2.0.-beta. requires a peer of es6-shim@^0.33. but none was installed.
npm WARN EPEERINVALID angular2@2.0.-beta. requires a peer of reflect-metadata@0.1. but none was installed.
npm WARN EPEERINVALID angular2@2.0.-beta. requires a peer of rxjs@5.0.-beta. but none was installed.
npm WARN EPEERINVALID angular2@2.0.-beta. requires a peer of zone.js@0.5. but none was installed.

如果使用了 NPM 3 以上版本，需要手工安装依赖库

es6-promise@^3.0.2

es6-shim@^0.33.3

reflect-metadata@0.1.2

rxjs@5.0.0-beta.2

zone.js@0.5.15

安装 webpack 和它的插件 ts-loader

npm i -D webpack ts-loader

安装 karma 及其插件

npm i -D karma karma-chrome-launcher karma-jasmine jasmine-core karma-webpack

安装 typings

这里，我们需要 es6-shim 的定义和 jasmine 的定义。

奇怪的是 install 必须是第一个参数。

安装 jasmine 的定义

> typings install --save --ambient jasmine
? Found jasmine typings for DefinitelyTyped. Continue? Yes
Installing jasmine@~2.2.0 (DefinitelyTyped)...

jasmine
└── (No dependencies)

安装 es6-shim 的定义

> typings install --save --ambient es6-shim
? Found es6-shim typings for DefinitelyTyped. Continue? Yes
Installing es6-shim@~0.31. (DefinitelyTyped)...

es6-shim
└── (No dependencies)

这些组件安装完成之后，你的 package.json 应该是这样的。

{
  "name": "karma3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": "^2.0.0-beta.7",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.2",
    "zone.js": "^0.5.15"
  },
  "devDependencies": {
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.21",
    "karma-chrome-launcher": "^0.2.2",
    "karma-jasmine": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "ts-loader": "^0.8.1",
    "typings": "^0.6.8",
    "webpack": "^1.12.14"
  }
}

2. 编写示例代码

在项目目录中创建 src 文件夹，在其中创建名为 MyMaths.ts 的代码文件

import { Component } from 'angular2/core';
import { Injectable } from 'angular2/core';

@Component({
    selector: "hello"
})
export class MyMaths{
    add(a: number, b:number ){
        return a + b;
    }
}

在项目目录中，创建 test 和其中的 unit 子文件夹，我们的单元测试将会保存在这个文件夹中。

创建名为 MyMaths.spec.ts 的单元测试文件

import { MyMaths } from '../../src/MyMaths';

describe('hello, unit test.', function(){
    var myMaths = new MyMaths();

    it('hello, add', function(){
        let a = 2, b = 3;
        let result = myMaths.add(a, b );
        expect(result).toBe( 5 );
    });

    it('it should failded.', function(){
        let a = 2, b = 3;
        let result = myMaths.add(a, b);
        expect(result).toBe( 100 );
    })
});

3. 配置环境

1. 配置 TypeScript

在项目目录中创建名为 tsconfig.Json 的 TypeScript配置文件。

注意其中的 noEmitHelpers 必须配置为 false，emitDecoratorMetadata 必须配置为 true.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitHelpers": false,
    "noImplicitAny": false,
    "sourceMap": true
  },

  "exclude":[
      "node_modules",
      "typings/main",
      "typings/main.d.ts"
  ],

  "filesGlob": [
    "./src/**/*.ts",
    "!./node_modules/**/*.ts"
  ]
}

2. 配置 webpack

webpack 的默认配置文件为 webpack.config.js，我们这里用来测试打包的正确性。

var path = require('path');

var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    entry: "./spec-bundle.js",

    output: {
        path: BUILD_PATH,
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    },

    node: {
        global: 'window',
        progress: false,
        crypto: 'empty',
        module: false,
        clearImmediate: false,
        setImmediate: false
    }
};

3. 配置 karma

首先，创建 karma 的入口文件，我们通过这个文件将所有的测试代码和待测试代码一起打包。

创建名为 spec-bundle.js 的入口文件。

require('es6-shim');
require('es6-promise');
require('reflect-metadata');
require('rxjs');
require('zone.js');

var testContext = require.context('./test', true, /\.spec\.ts/);
var appContext = require.context('./src', true, /\.ts/);

appContext.keys().forEach(appContext);
testContext.keys().forEach(testContext);

var domAdapter = require('angular2/src/platform/browser/browser_adapter');
domAdapter.BrowserDomAdapter.makeCurrent();

然后，创建 karma 的配置文件。可以先使用 karma init 创建基本的配置信息，然后修改为我们需要的内容。

// Karma configuration
// Generated on Thu Feb 25 2016 10:11:36 GMT+0800 (China Standard Time)

module.exports = function(config) {
    var testWebpackConfig = require('./webpack.test.config.js');

  config.set({

    // 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: [
      'spec-bundle.js'
    ],

    // 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: {
        'spec-bundle.js': ['webpack']
    },
    webpack: testWebpackConfig,

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

    // 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: true,

    // 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,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

这里用到了 webpack 进行打包，而且声明了使用 webpack.test.config.js 作为 webpack 的配置文件。

创建这个名为 webpack.test.config.js 的配置文件。这个文件不需要入口文件，也不需要输出目录。Karma 将提供入口和获取打包之后的输出。

var path = require('path');

var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
    resolve: {
        extensions: ['', '.js', '.ts']
    },

    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    },

    node: {
        global: 'window',
        progress: false,
        crypto: 'empty',
        module: false,
        clearImmediate: false,
        setImmediate: false
    }
};

4. 测试

1. 检查打包是否正确。

由于已经配置了 webpack，可以直接在项目目录中执行 webpack，应该可以在 build 子目录中看到打包之后的文件，文件中应该已经正确包含了我们的所有代码。

2. 执行测试

执行 karma start ，可以完成测试过程。

   ::15.560:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
   ::15.576:INFO [launcher]: Starting browser Chrome
   ::18.349:INFO [Chrome 47.0. (Windows  0.0.)]: Connected on socket /#uBbzQ9xOIQzT1jNOAAAA with id
Chrome 47.0. (Windows  0.0.) hello, unit test. it should failded. FAILED
        Expected  to be .
            at Object.<anonymous> (C:/study/karmaStudy/karma3/spec-bundle.js::)
Chrome 47.0. (Windows  0.0.): Executed  of  ( FAILED) (0.026 secs / 0.013 secs)

5. 讨论

这个过程的配置信息较为复杂，需要耐心检查错误。