[譯]開始對Angular App進行單元測試（1）

時間 2019-12-05

原文原文鏈接

這是一些列文章，陸續翻譯整理中...javascript

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

前言

在寫測試以前，咱們還得對基礎的JS的單元測試框架和如何寫測試用例等一些問題作一個簡要的介紹。java

先說說 jasmine ，它算做一個行爲驅動開發(behaviour driven development,BBD)的 JavaSciprt的框架，會讓人困惑的是，它也能夠用測試驅動開發(test driven development,TBD)的思想來寫測試。
BBD和TBD兩種風格會有些區別，可是使用jasmine確實能夠用TBD的方式。jasmine會提供一種結構去組織你的測試以及一些函數來進行代碼輸出的斷言。到底是TBD仍是BBD實際取決於開發者本身的如何去組織本身的測試，固然下文咱們僅僅用TBD來進行講解。git

開始你的第一個測試

先建一個項目文件好比jasmine-test,而後粘貼下面的代碼到一個html文件中。angularjs

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script>
    </head>
    <body>
    </body>
    <script type="text/javascript">

        // Paste in the test code here.

    </script>
</html>

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

注意specs，它實際上指的是用例，它一樣也是BBD的專業術語之一。截下來咱們先來點簡單的邏輯判斷。ajax

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

將上面的代碼粘貼到剛纔的html文件中。瀏覽器

函數describe實際指的就是前文提到的specs（測試的邏輯分組），而函數it實際會展示這組測試。
運行結果以下圖:
安全

因爲咱們實際上沒有添加測試的主體，所以狀態上方顯示的是pending,截下來咱們會添加一段函數.

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

上面的截圖，實際上反應的就測試失敗，由於1+1並不等於2。

上面出現了兩個新函數expect以及toBe，Expect表明着預期，咱們將須要使用的測試放進區，而後函數會進行運行結果的斷言。而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);
});

刷新瀏覽器，咱們就能夠看到正確的結果了。

前面咱們大體瞭解了jasmine的基本用法，實際上測試驅動開發的的一個基本原則就是咱們再寫功能的同時寫測試，花些時間去掌握這項技能有利於提高咱們的工做效率的。

流程大體如圖三個部分，咱們所寫的每一個測試都英國是遵循這三個流程。

紅色部分:失敗的測試，有利於咱們消除bug;
綠色部分：須要咱們寫足夠的代碼讓咱們的測試經過，透過前面的部分，咱們能夠了解這些bug;
黃色部分，代碼重構過程咱們能夠避免重蹈覆轍，而且提高安全性。

Demo

記下來咱們寫一些代碼去體會上面的流程

寫一個不經過的測試

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

});

2.使測試經過

若是咱們開始寫足夠多的代碼時候，其中一些可能相似下面：

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);
    });

});

這樣作有利於咱們避免代碼更多的錯誤

3.重構

在咱們確保咱們的邏輯正常後，咱們能夠測試更多用例，直到結果可以一直和指望的一致。

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);
    });

});