使用Jasmine進行Angular單元測試的方法介紹

本篇文章跟大家談談如何使用Jasmine進行Angular單元測試？有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

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

一、概念

#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 代表期望值。

二、常用方法

#Matchers

斷言符合運算，在實際值與期望值之間進行比較，並將結果通知Jasmine，最終Jasmine會判斷此Spec 成功或失敗。

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

• #toBe() 等同===
• toNotBe() 等同!==
• toBeDefined() 等同!== undefined
##toBeUndefined() 等同
• == = undefined
toBeNull() 等同
• === null
toBeTruthy() 等同
• !!obj
toBeFalsy() 等同
• !obj
toBeLessThan() 等同
• 1de0d3c87268614f8191aac37d8bc3e8##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

全域函數來跳過這些測試程式碼區塊。

三、配合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, &#39;onSelected&#39;);
        fixture.detectChanges();
    });

    it(&#39;should be called [selected] event.&#39;, () => {
        // 触发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();
});

四、结论

本章几乎所有的内容在Angular单元测试经常使用到的东西；特别是异步部分，三种不同异步方式并非共存的，而是需要根据具体业务而采用。否则，你会发现真TM难写单元测试。毕竟这是一个异步的世界。

自此，我们算是为Angular写单元测试打下了基础。后续，将不会再对这类基础进行解释。

happy coding!

相关教程推荐：angular教程

以上是使用Jasmine進行Angular單元測試的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！