[譯]開始對Angular App進(jìn)行單元測試（1）

Tikitoo 發(fā)布于2019-08-19 18:27 / 1615人閱讀

摘要：小結(jié)我們初步了解了使用來進(jìn)行測試，這樣有利于我們接下來去理解使用進(jìn)行單元測試翻譯中

這是一些列文章，陸續(xù)翻譯整理中...

原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/

@ Bradley Braithwaite

前言

在寫測試之前，我們還得對基礎(chǔ)的JS的單元測試框架和如何寫測試用例等一些問題做一個(gè)簡要的介紹。

先說說 jasmine ，它算作一個(gè)行為驅(qū)動(dòng)開發(fā)(behaviour driven development,BBD)的 JavaSciprt的框架，會(huì)讓人困惑的是，它也可以用測試驅(qū)動(dòng)開發(fā)(test driven development,TBD)的思想來寫測試。
BBD和TBD兩種風(fēng)格會(huì)有些區(qū)別，但是使用jasmine確實(shí)可以用TBD的方式。jasmine會(huì)提供一種結(jié)構(gòu)去組織你的測試以及一些函數(shù)來進(jìn)行代碼輸出的斷言。究竟是TBD還是BBD實(shí)際取決于開發(fā)者自己的如何去組織自己的測試，當(dāng)然下文我們僅僅用TBD來進(jìn)行講解。

開始你的第一個(gè)測試

先建一個(gè)項(xiàng)目文件比如jasmine-test,然后粘貼下面的代碼到一個(gè)html文件中。

用瀏覽器打開該文件。界面如圖:

注意specs，它實(shí)際上指的是用例，它同樣也是BBD的專業(yè)術(shù)語之一。截下來我們先來點(diǎn)簡單的邏輯判斷。

describe("calculator", function () {
    it("1 + 1 should equal 2");
});

將上面的代碼粘貼到剛才的html文件中。

函數(shù)describe實(shí)際指的就是前文提到的specs（測試的邏輯分組），而函數(shù)it實(shí)際會(huì)展現(xiàn)這組測試。
運(yùn)行結(jié)果如下圖:

由于我們實(shí)際上沒有添加測試的主體，因此狀態(tài)上方顯示的是pending,截下來我們會(huì)添加一段函數(shù).

it("1 + 1 should equal 2", function() {
    expect(1 + 1).toBe(1);
});

上面的截圖，實(shí)際上反應(yīng)的就測試失敗，因?yàn)?b>1+1并不等于2。

上面出現(xiàn)了兩個(gè)新函數(shù)expect以及toBe，Expect代表著預(yù)期，我們將需要使用的測試放進(jìn)區(qū)，然后函數(shù)會(huì)進(jìn)行運(yùn)行結(jié)果的斷言。而toBe呢則代表著匹配器,卡框架提供的匹配器還有很多，常用的大概有下面這些：

expect(true).toBe(true);
expect(false).not.toBe(true);
expect(1).toEqual(1);
expect("foo").toEqual("foo");
expect("foo").not.toEqual("bar");

我們再把這段代碼改成正常的。

it("1 + 1 should equal 2", function() {
    expect(1 + 1).toBe(2);
});

刷新瀏覽器，我們就可以看到正確的結(jié)果了。

前面我們大致了解了jasmine的基本用法，實(shí)際上測試驅(qū)動(dòng)開發(fā)的的一個(gè)基本原則就是我們再寫功能的同時(shí)寫測試，花些時(shí)間去掌握這項(xiàng)技能有利于提升我們的工作效率的。

流程大致如圖三個(gè)部分，我們所寫的每個(gè)測試都英國是遵循這三個(gè)流程。

紅色部分:失敗的測試，有利于我們消除bug;

綠色部分：需要我們寫足夠的代碼讓我們的測試通過，透過前面的部分，我們可以了解這些bug;

黃色部分，代碼重構(gòu)過程我們可以避免重蹈覆轍，并且提升安全性。

Demo

記下來我們寫一些代碼去體會(huì)上面的流程

寫一個(gè)不通過的測試

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

2.使測試通過

如果我們開始寫足夠多的代碼時(shí)候，其中一些可能類似下面：

var calculator = {
    sum: function(x, y) {
        return 2; // <-- note this is hardcoded
    }
}

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

這樣做有利于我們避免代碼更多的錯(cuò)誤

3.重構(gòu)

在我們確保我們的邏輯正常后，我們可以測試更多用例，直到結(jié)果能夠一直和期望的一致。

var calculator = {
    sum: function(x, y) {
        return x + y;
    }
}

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

小結(jié)

我們初步了解了使用jasmine來進(jìn)行TBD測試，這樣有利于我們接下來去理解使用karama進(jìn)行單元測試（翻譯中...）