Angular單元測試系列-如何使用Jasmine進行Angular單元測試

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

1、概念

Test Suite

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

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

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

Specs

一個Specs至關於一個測試用例，也就是咱們實現測試具體代碼體。

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

而每一個 Spec 內包括多個 expectation 來測試須要測試的代碼，只要任何一個 expectation 結果爲 false 就表示該測試用例爲失敗狀態。

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

Expectations

斷言，使用 expect 全局函數來表示，只接收一個表明要測試的實際值，而且須要與 Matcher 表明指望值。

2、經常使用方法

Matchers

斷言匹配操做，在實際值與指望值之間進行比較，並將結果通知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() 數值比較時定義精度，先四捨五入後再比較。
• toHaveBeenCalled() 檢查function是否被調用過
• toHaveBeenCalledWith() 檢查傳入參數是否被做爲參數調用過
• toMatch() 等同 new RegExp().test()
• toNotMatch() 等同 !new RegExp().test()
• toThrow() 檢查function是否會拋出一個錯誤

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

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

這些Matchers幾乎能夠知足咱們平常需求，固然你也能夠定製本身的Matcher來實現特殊需求。

Setup 與 Teardown

一份干將的測試代碼很重要，所以咱們能夠將這些重複的 setup 與 teardown 代碼，放在與之相對應的 beforeEach 與 afterEach 全局函數裏面。

beforeEach 表示每一個 Spec 執行以前，反之。

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 來定義相應的變量，這樣每一個 it 內部能夠共享它們。

固然，每一個 Spec 的執行週期間也會伴隨着一個空的 this 對象，直至 Spec 執行結束後被清空，利用 this 也能夠作數據共享。

嵌套代碼

有時候當咱們對某個組件進行測試時，而這個組件會有不一樣狀態來展現不一樣的結果，這個時候若是隻用一個 describe 會顯得不過優雅。

所以，嵌套 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 全局函數來跳過這些測試代碼塊。

3、配合Angular工具集

Spy

Angular的自定義事件實在太廣泛了，但爲了測試這些自定義事件，所以監控事件是否正常被調用是很是重要。好在，Spy 能夠用於監測函數是否被調用，這簡直就是咱們的好夥伴。

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

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

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

    it('should be called [selected] event.', () => {
        // 觸發selected操做

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

異步支持

首先，這裏的異步是指帶有 Observable 或 Promise 的異步行爲，所以對於組件在調用某個 Service 來異步獲取數據時的測試狀態。

假設咱們的待測試組件代碼：

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

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

async

async 無任何參數與返回值，全部包裹代碼塊裏的測試代碼，能夠經過調用 whenStable() 讓全部待處理異步行爲都完成後再進行回調；最後，再進行斷言操做。

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

fakeAsync

若是說 async 還須要回調才能進行斷點讓你受不了的話，那麼 fakeAsync 能夠解決這一點。

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

這裏只是將回調換成 tick()，怎麼樣，是否是很酷。

Jasmine自帶異步

如前面所說的異步是指帶有 Observable 或 Promise 的異步行爲，而有時候咱們有些東西是依賴 setTimeout 或者多是須要外部訂閱結果之後才能觸發時怎麼辦呢？

可使用 done() 方法。

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

4、結論

本章幾乎全部的內容在Angular單元測試常用到的東西；特別是異步部分，三種不一樣異步方式並不是共存的，而是須要根據具體業務而採用。不然，你會發現真TM難寫單元測試。畢竟這是一個異步的世界。

自此，咱們算是爲Angular寫單元測試打下了基礎。後續，將不會再對這類基礎進行解釋。

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

happy coding!