使用Jasmine進(jìn)行Angular單元測(cè)試的方法是什么

使用Jasmine進(jìn)行Angular單元測(cè)試的方法是什么？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)額敏免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

以下是我假定那些極少或壓根沒(méi)寫(xiě)單元測(cè)試的人準(zhǔn)備的，因此，會(huì)白話解釋諸多概念性問(wèn)題，同時(shí)會(huì)結(jié)合 Jasmine 與之對(duì)應(yīng)的方法進(jìn)行講解。

一、概念

Test Suite

測(cè)試套件，哪怕一個(gè)簡(jiǎn)單的類(lèi)，也會(huì)有若干的測(cè)試用例，因此將這些測(cè)試用例集合在一個(gè)分類(lèi)下就叫Test Suite。

而在 Jasmine 就是使用 describe 全局函數(shù)來(lái)表示，它的第一個(gè)字符串參數(shù)用來(lái)表示Suite的名稱(chēng)或標(biāo)題，第二個(gè)方法參數(shù)就是實(shí)現(xiàn)Suite代碼了。

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

Specs

一個(gè)Specs相當(dāng)于一個(gè)測(cè)試用例，也就是我們實(shí)現(xiàn)測(cè)試具體代碼體。

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

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

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

Expectations

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

二、常用方法

Matchers

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

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

toBe() 等同 ===
toNotBe() 等同 !==
toBeDefined() 等同 !== undefined
toBeUndefined() 等同 === undefined
toBeNull() 等同 === null
toBeTruthy() 等同 !!obj
toBeFalsy() 等同 !obj
toBeLessThan() 等同 <
toBeGreaterThan() 等同 >
toEqual() 相當(dāng)于 ==
toNotEqual() 相當(dāng)于 !=
toContain() 相當(dāng)于 indexOf
toBeCloseTo() 數(shù)值比較時(shí)定義精度，先四舍五入后再比較。
toHaveBeenCalled() 檢查function是否被調(diào)用過(guò)
toHaveBeenCalledWith() 檢查傳入?yún)?shù)是否被作為參數(shù)調(diào)用過(guò)
toMatch() 等同 new RegExp().test()
toNotMatch() 等同 !new RegExp().test()
toThrow() 檢查function是否會(huì)拋出一個(gè)錯(cuò)誤

而這些API之前用 not 來(lái)表示負(fù)值的判斷。

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

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

Setup 與 Teardown

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

beforeEach 表示每個(gè) 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);
    });
});

數(shù)據(jù)共享

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

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

嵌套代碼

有時(shí)候當(dāng)我們對(duì)某個(gè)組件進(jìn)行測(cè)試時(shí)，而這個(gè)組件會(huì)有不同狀態(tài)來(lái)展示不同的結(jié)果，這個(gè)時(shí)候如果只用一個(gè) describe 會(huì)顯得不過(guò)優(yōu)雅。

因此，嵌套 describe，會(huì)讓測(cè)試代碼、測(cè)試報(bào)告看起來(lái)更漂亮。

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

跳過(guò)測(cè)試代碼塊

需求總是三心二意的，但好不容易寫(xiě)好的測(cè)試代碼，難道要?jiǎng)h除嗎？非也……

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

三、配合Angular工具集

Spy

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

以下示例暫時(shí)無(wú)須理會(huì)，暫且體驗(yàn)一下：

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

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

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

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

異步支持

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

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

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

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

async

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

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

fakeAsync

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

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

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

Jasmine自帶異步

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

可以使用 done() 方法。

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

四、結(jié)論

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

自此，我們算是為Angular寫(xiě)單元測(cè)試打下了基礎(chǔ)。后續(xù)，將不會(huì)再對(duì)這類(lèi)基礎(chǔ)進(jìn)行解釋。

happy coding!

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)使用Jasmine進(jìn)行Angular單元測(cè)試的方法是什么大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：使用Jasmine進(jìn)行Angular單元測(cè)試的方法是什么
網(wǎng)站地址：http://bm7419.com/article24/jdsdce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站導(dǎo)航、域名注冊(cè)、做網(wǎng)站、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容