我的第一个Angular2测试

2016-11-25

简介

最近刚学习了 angular2，于是想给 angular2 加上测试内容。

遇到的坑

文档问题，以及测试配置问题。
单元测试与功能测试的区别。

文档

这点还好。angular2 提供的 testings 模块非常的详细。（文档全英文，不过也有中文文档)

配置问题

因为官方推荐使用karma 这个前端公认的测试框架。但是angualr2官方的坑在于它没有提供配置文件的源文件展示。这让我第一次入手测试出现了困难。（因为在这里，我没有使用 angular-cli 导致的问题, 在 cli 中，测试配置文件已被自动生成）

单元测试与功能测试

因为不懂karma配置，于是自己疯狂去 github 以及 google 需找第三方代码的karma配置文件，但是搜索的关键词是 angular2 + karma 大多数介绍的是功能测试。但是我需要的是一个单独的单元测试功能。

开始配置

首先，前往 karma 官方，寻找到配置文件的基本信息。创建我们的 karma.config.js

module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        reporters: ['coverage'],
        port: 7500,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });

因为我使用的是 typescript 编程，在很多的测试案例中，大多数都是使用 tsc 将 ts 代码直接编程成 js。但是我想直接使用 ts 不想编程成 js 文件进行测试。因为我使用的是 webpack 进行程序打包，因此可以直接在测试配置中使用 webpack, 一切都归功于 karma-webpack 这个插件。

在使用之前需要 npm install karma-webpack

const webpackConfig = require('./webpack-test.config');
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        preprocessors: {
            './tests/unnit/**/*.ts': ['webpack'],
        },
        webpack: webpackConfig,
        port: 7500,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });
}

我创建了一个 webpack-test.config.js

let webpack = require('webpack');
module.exports = {
    entry: [
        './node_modules/core-js/client/shim.min.js',
        './node_modules/zone.js/dist/zone.js',
        './node_modules/reflect-metadata/Reflect.js',
    ],
    output: {
        filename: './dist/bundle.js'
    },
    resolve: {
        extensions: ['', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader'},
            { test: /\.tsx?$/, loader: 'angular2-load-children-loader'},
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.html$/, loader: 'raw-loader'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ],
        preLoaders: [
            { test: /\.js$/, loader: 'source-map-loader'}
        ]
    },
    node: {
        fs: 'empty'
    },
}

接着将 angular2 所需要的环境提前在 karma.config.js 中加载.

因为在运行 angular2 之前，需要将 core-js 以及 zone.js, reflect-metadata 提前加载好。这些文件以及测试文件需要被 webpack 打包，所以需要提前加载进来。

const webpackConfig = require('./webpack-test.config');
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            './node_modules/core-js/client/shim.min.js',
            './node_modules/zone.js/dist/zone.js',
            './node_modules/zone.js/dist/sync-test.js',
            './node_modules/zone.js/dist/proxy.js',
            './node_modules/zone.js/dist/jasmine-patch.js',
            './node_modules/reflect-metadata/Reflect.js',
            './tests/unnit/**/*.ts'
        ],
        preprocessors: {
            './tests/unnit/**/*.ts': ['webpack'],
        },
        webpack: webpackConfig,
        port: 7500,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });
}

最后运行我的测试代码, 结果如下

测试1

哎呀这代码太丑了，甚至我连跑了哪个测试都不知道。于是去 karma 选择一个 reporter 插件。

const webpackConfig = require('./webpack-test.config');
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine', 'chai'],
        reporters: ['spec', 'coverage'],
        files: [
            './node_modules/core-js/client/shim.min.js',
            './node_modules/zone.js/dist/zone.js',
            './node_modules/zone.js/dist/sync-test.js',
            './node_modules/zone.js/dist/proxy.js',
            './node_modules/zone.js/dist/jasmine-patch.js',
            './node_modules/reflect-metadata/Reflect.js',
            './tests/unnit/**/*.ts'
        ],
        preprocessors: {
            './tests/unnit/**/*.ts': ['webpack'],
        },
        coverageReporter: {
            dir: './tests/coverage',
            reporters: [
                { type: 'lcov', subdir: '.' },
                { type: 'text-summary' }
            ]
        },
        webpack: webpackConfig,
        port: 7500,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });
}

在这里，我选择了使用 chai 以及 karma-spec-reporter 插件。以及添加 coverageReporter 配置。

修改之后，再次运行我的代码。

测试2

这能够清晰的看出我的代码哪些测试被通过了。

总结

在 angular2 的测试中，这里主要使用了 karma 和 webpack 的结合进行测试。