本文将讨论怎样搭建测试环境、以及Angular测试东西集。
测试环境
绝大部份都是应用Angular Cli来建立项目，因而，默许已集成我们所须要的npm包与剧本；固然，假如你是运用自建或官网 quickstart 的话，须要自行装置；但统统中心数据全都是一样的。
Angular单元测试我们能够将其分红两类：自力零丁测试与Angular测试东西集。
Pipe与Service适为自力零丁测试，由于它们只须要 new 实例类即可；同样是没法与Angular组件举行任何交互。
与之相反就是Angular测试东西集。
测试框架引见
Jasmine
Jasmine测试框架供应了编写测试剧本的东西集，而且异常优异的语义化，让测试代码看起来像是在读一段话。
Karma
有测试剧本，还须要Karma来帮助治理这些剧本，以便于在浏览器中运转。
Npm 包
假如你非要折腾，那末最简朴的方法就是经由过程Angular Cli建立一个新项目，然后将以下Npm包复制到您折腾的项目中。
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0"那末，我们主要照样看设置剧本部份。
设置剧本
我们中心是须要让 karma 运转器运转起来，而关于 Jasmine，是在我们编写测试剧本时才会运用到，因而，临时不必过分体贴。
我们须要在根目录建立 karma.conf.js 文件，这相当于一些商定。文件是为了示知karma须要启用哪些插件、加载哪些测试剧本、须要哪些测试浏览器环境、测试报告关照体式格局、日记等等。
karma.conf.js
以下是Angular Cli默许供应的 karma 设置文件：
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function(config) {
config.set({
// 基本途径（实用file、exclude属性）
basePath: '',
// 测试框架，@angular/cli 指Angular测试东西集
frameworks: ['jasmine', '@angular/cli'],
// 加载插件清单
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client: {
// 当测试运转完成后是不是消灭上文
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
// 哪些文件须要被浏览器加载，后面会特地引见 `test.ts`
files: [
{ pattern: './src/test.ts', watched: false }
],
// 许可文件抵达浏览器之前举行一些预处理操纵
// 异常丰富的预处理器：https://www.npmjs.com/browse/keyword/karma-preprocessor
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
// 指定要求文件MIME范例
mime: {
'text/x-typescript': ['ts', 'tsx']
},
// 插件【karma-coverage-istanbul-reporter】的设置项
coverageIstanbulReporter: {
// 覆蓋率报告体式格局
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
// 指定angular cli环境
angularCli: {
environment: 'dev'
},
// 测试效果报告体式格局
reporters: config.angularCli && config.angularCli.codeCoverage ?
['progress', 'coverage-istanbul'] :
['progress', 'kjhtml'],
port: 9876,
colors: true,
// 日记品级
logLevel: config.LOG_INFO,
// 是不是监听测试文件
autoWatch: true,
// 测试浏览器列表
browsers: ['Chrome'],
// 延续集成形式，true：示意浏览器实行测试后退出
singleRun: false
});
};以上设置基本上能够满足我们的需求；平常须要更改的，我想是测试浏览器列表了，由于karma支撑统统市面上的浏览器。别的，当你运用 Travis CI 延续集成时，启动一个禁用沙箱环境Chrome浏览器会让我们少了许多事：
customLaunchers: {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
}有关karma config文件的统统信息，请介入官网文档。
test.ts
在编写 karma.conf.js 时，我们设置过浏览器加载的文件指向的是 ./src/test.ts 文件。作用是为了指导 karma 启动，代码也简朴许多：
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
// 统统.spec.ts文件
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();统统停当后，我们能够尝试启动 karma 试一下，哪怕无任何测试代码，也是能够运转的。
假如是Angular Cli那末 ng test。折腾的用 node "./node_modules/karma-cli/bin/karma" start
末了，翻开浏览器：http://localhost:9876，能够检察测试报告。
简朴示例
既然环境搭好，那末我们来写个简朴示例试一下。
建立 ./src/demo.spec.ts 文件。.spec.ts为后缀这是一个商定，恪守它。
describe('demo test', () => {
it('should be true', () => {
expect(true).toBe(true);
})
});运转 ng test 后，我们能够在控制台看到：
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.031 secs / 0.002 secs)或许浏览器：
1 spec, 0 failures
demo test
true is true不论怎样，毕竟我们已进入Angular单元测试的天下了。
Angular测试东西集
一般类诸如Pipe或Service，只须要经由过程简朴的 new 建立实例。而关于指令、组件而言，须要肯定的环境。这是由于Angular的模块观点，要想组件能运转，起首得有一个 @NgModule 定义。
东西集的信息量并不许多，你很轻易能够控制它。下面我简单申明几个最经常使用的：
TestBed
TestBed 就是Angular测试东西集供应的用于构建一个 @NgModule 测试环境模块。固然有了模块，还须要应用 TestBed.createComponent 建立一个用于测试目的组件的测试组件。
异步
Angular随处都是异步，而异步测试能够应用东西集合 async、fakeAsync 编写文雅测试代码看着是同步。
东西集另有更多，这统统我们将在[Angular单元测试-组件与指令单元测试]()一一申明。
那末下一篇，我们将引见怎样运用Jasmine举行Angular单元测试。
happy coding!
