摘要：四結(jié)論本章幾乎所有的內(nèi)容在單元測試經(jīng)常使用到的東西特別是異步部分，三種不同異步方式并非共存的，而是需要根據(jù)具體業(yè)務(wù)而采用。否則，你會發(fā)現(xiàn)真難寫單元測試。自此，我們算是為寫單元測試打下了基礎(chǔ)。

以下是我假定那些極少或壓根沒寫單元測試的人準備的，因此，會白話解釋諸多概念性問題，同時會結(jié)合 Jasmine 與之對應(yīng)的方法進行講解。

測試套件，哪怕一個簡單的類，也會有若干的測試用例，因此將這些測試用例集合在一個分類下就叫Test Suite。

而在 Jasmine 就是使用 describe 全局函數(shù)來表示，它的第一個字符串參數(shù)用來表示Suite的名稱或標題，第二個方法參數(shù)就是實現(xiàn)Suite代碼了。

describe("test suite name", () => {
});

一個Specs相當于一個測試用例，也就是我們實現(xiàn)測試具體代碼體。

Jasmine 就是使用 it 全局函數(shù)來表示，和 describe 類似，字符串和方法兩個參數(shù)。

而每個 Spec 內(nèi)包括多個 expectation 來測試需要測試的代碼，只要任何一個 expectation 結(jié)果為 false 就表示該測試用例為失敗狀態(tài)。

describe("demo test", () => {
    const VALUE = true;
    it("should be true", () => {
        expect(VALUE).toBe(VALUE);
    })
});

斷言，使用 expect 全局函數(shù)來表示，只接收一個代表要測試的實際值，并且需要與 Matcher 代表期望值。

斷言匹配操作，在實際值與期望值之間進行比較，并將結(jié)果通知Jasmine，最終Jasmine會判斷此 Spec 成功還是失敗。

Jasmine 提供非常豐富的API，一些常用的Matchers：

toBe() 等同 ===

toNotBe() 等同 !==

toBeDefined() 等同 !== undefined

toBeUndefined() 等同 === undefined

toBeNull() 等同 === null

toBeTruthy() 等同 !!obj

toBeFalsy() 等同 !obj

toBeLessThan() 等同 <

toBeGreaterThan() 等同 >

toEqual() 相當于 ==

toNotEqual() 相當于 !=

toContain() 相當于 indexOf

toBeCloseTo() 數(shù)值比較時定義精度，先四舍五入后再比較。

toHaveBeenCalled() 檢查function是否被調(diào)用過

toHaveBeenCalledWith() 檢查傳入?yún)?shù)是否被作為參數(shù)調(diào)用過

toMatch() 等同 new RegExp().test()

toNotMatch() 等同 !new RegExp().test()

toThrow() 檢查function是否會拋出一個錯誤

而這些API之前用 not 來表示負值的判斷。

expect(true).not.toBe(false);

這些Matchers幾乎可以滿足我們?nèi)粘Ｐ枨?，當然你也可以定制自己的Matcher來實現(xiàn)特殊需求。

一份干將的測試代碼很重要，因此我們可以將這些重復(fù)的 setup 與 teardown 代碼，放在與之相對應(yīng)的 beforeEach 與 afterEach 全局函數(shù)里面。

beforeEach 表示每個 Spec 執(zhí)行之前，反之。

describe("demo test", () => {
    let val: number = 0;
    beforeEach(() => {
        val = 1;
    });
    it("should be true", () => {
        expect(val).toBe(1);
    });
    it("should be false", () => {
        expect(val).not.toBe(0);
    });
});

如同上面示例中，我們可以在每個測試文件開頭、describe 來定義相應(yīng)的變量，這樣每個 it 內(nèi)部可以共享它們。

當然，每個 Spec 的執(zhí)行周期間也會伴隨著一個空的 this 對象，直至 Spec 執(zhí)行結(jié)束后被清空，利用 this 也可以做數(shù)據(jù)共享。

有時候當我們對某個組件進行測試時，而這個組件會有不同狀態(tài)來展示不同的結(jié)果，這個時候如果只用一個 describe 會顯得不過優(yōu)雅。

因此，嵌套 describe，會讓測試代碼、測試報告看起來更漂亮。

describe("AppComponent", () => {
    describe("Show User", () => {
        it("should be show panel.", () => {});
        it("should be show avatar.", () => {});
    });
    describe("Hidden User", () => { 
        it("should be hidden panel.", () => {});
    });
});

需求總是三心二意的，但好不容易寫好的測試代碼，難道要刪除嗎？非也……

Suites 和 Specs 分別可以用 xdescribe 和 xit 全局函數(shù)來跳過這些測試代碼塊。

Angular的自定義事件實在太普遍了，但為了測試這些自定義事件，因此監(jiān)控事件是否正常被調(diào)用是非常重要。好在，Spy 可以用于監(jiān)測函數(shù)是否被調(diào)用，這簡直就是我們的好伙伴。

以下示例暫時無須理會，暫且體驗一下：

describe("AppComponent", () => {
    let fixture: ComponentFixture;
    let context: TestComponent;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestComponent]
        });
        fixture = TestBed.createComponent(TestComponent);
        context = fixture.componentInstance;
        // 監(jiān)聽onSelected方法
        spyOn(context, "onSelected");
        fixture.detectChanges();
    });

    it("should be called [selected] event.", () => {
        // 觸發(fā)selected操作

        // 斷言是否被調(diào)用過
        expect(context.onSelected).toHaveBeenCalled();
    });
});

首先，這里的異步是指帶有 Observable 或 Promise 的異步行為，因此對于組件在調(diào)用某個 Service 來異步獲取數(shù)據(jù)時的測試狀態(tài)。

假設(shè)我們的待測試組件代碼：

export class AppComponent {
  constructor(private _user: UserService) {}

  query() {
    this._user.quer().subscribe(() => {});
  }
}

async

async 無任何參數(shù)與返回值，所有包裹代碼塊里的測試代碼，可以通過調(diào)用 whenStable() 讓所有待處理異步行為都完成后再進行回調(diào)；最后，再進行斷言操作。

it("should be get user list (async)", async(() => {
    // call component.query();
    fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(true).toBe(true);
    });
}));

fakeAsync

如果說 async 還需要回調(diào)才能進行斷點讓你受不了的話，那么 fakeAsync 可以解決這一點。

it("should be get user list (async)", fakeAsync(() => {
    // call component.query();
    tick();
    fixture.detectChanges();
    expect(true).toBe(true);
}));

這里只是將回調(diào)換成 tick()，怎么樣，是不是很酷。

Jasmine自帶異步

如前面所說的異步是指帶有 Observable 或 Promise 的異步行為，而有時候我們有些東西是依賴 setTimeout 或者可能是需要外部訂閱結(jié)果以后才能觸發(fā)時怎么辦呢？

可以使用 done() 方法。

it("async demo", (done: () => void) => {
    context.show().subscribe(res => {
        expect(true).toBe(true);
        done();
    });
    el.querySelected("xxx").click();
});

本章幾乎所有的內(nèi)容在Angular單元測試經(jīng)常使用到的東西；特別是異步部分，三種不同異步方式并非共存的，而是需要根據(jù)具體業(yè)務(wù)而采用。否則，你會發(fā)現(xiàn)真TM難寫單元測試。畢竟這是一個異步的世界。

自此，我們算是為Angular寫單元測試打下了基礎(chǔ)。后續(xù)，將不會再對這類基礎(chǔ)進行解釋。

那么下一篇，我們將介紹Component、Directive、Pipe 以及Service單元測試。

happy coding!