Angular單元測試系列-簡介

本文將探討如何搭建測試環境、以及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!