集成 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. 讨论

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

巴特西

Karma 5：集成 Karma 和 Angular2