JavaScript單元測試框架：Jasmine

時間 2019-11-26

標籤 javascript 單元測試框架 jasmine 欄目 JavaScript 简体版

原文原文鏈接

摘抄：http://blog.csdn.net/GuoJiangweigege/article/details/52130589javascript

互聯網的快速發展，給web開發人員帶來了史無前例的挑戰。對於前端開發，前端開發er所須要編寫的js早已不是那些寥寥幾行的視覺效果代碼。代碼量的大增，多人協同，人員素質懸殊不齊，這都須要一個標準，來對代碼的規範性進行控制。Jasmine做爲一個前端團隊使用的測試框架，便運應而生。css

一、jasmine簡介html

jasmine是一個用來編寫Javascript測試的框架，它不依賴於任何其它的javascript框架。它有擁有靈巧而明確的語法可讓你輕鬆的編寫測試代碼。目前最新的版本爲2.0.0。前端

在jasmine中，一個典型的單元測試起始於一個全局函數describe,describe包含了N個it函數，一個it函數包含N個斷言。java

一個基本的測試代碼以下：git

describe("A suite", function() {
  it("contains spec with an expectation", function() {
    expect(true).toBe(true);
  });
});

二、下載jasminegithub

你們能夠點擊下面的連接進行下載：web

https://github.com/pivotal/jasmine/tree/master/distchrome

推薦下載2.0.0版本的壓縮包。數組

解壓以後，咱們進入文件目錄下的lib\jasmine-2.0.0，這下面一般包括如下這些文件。

這些文件是咱們進行js測試所須要的。

三、jasmine的依賴

jasmine的運行依賴4個部分：

1) 運行環境
瀏覽器（ie，Firefox，chrome）

2) 源文件

開發人員編寫的js腳步

3) 測試文件

符合jasmineAPI的測試腳本

4) 輸出結果

基於網頁輸出或控制檯輸出

四、jasmine的使用

咱們在項目中新建test.html文件，主體代碼以下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>jasmine-js單元測試框架</title>
    <link rel="stylesheet" href="jasmine/jasmine.css">
    <script src="jasmine/jasmine.js"></script>
    <script src="jasmine/jasmine-html.js"></script>
    <script src="jasmine/boot.js"></script>
</head>
<body>
<div>
    <p>js單元測試</p>
</div>
<script src="src.js"></script>
<script src="test.js"></script>
</body>
</html>

在頁面中咱們引入了5個js文件和1個css文件。

jasmine.js : jasmine框架的核心文件。

jasmine-html.js : 用於網頁結果輸出的js文件。

boot.js : jasmine框架的的啓動腳本。值得注意的是，這個腳本的執行應該在jasmine.js加載完成以後。

src.js : 咱們的業務邏輯腳本。

test.js : jasmine測試腳本。

jasmine.css :控制網頁結果輸出的樣式文件。

~ vi report.js

(function() {
    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var htmlReporter = new jasmine.HtmlReporter();

    jasmineEnv.addReporter(htmlReporter);

    jasmineEnv.specFilter = function(spec) {
        return htmlReporter.specFilter(spec);
    };

    var currentWindowOnload = window.onload;

    window.onload = function() {
        if (currentWindowOnload) {
            currentWindowOnload();
        }
        execJasmine();
    };

    function execJasmine() {
        jasmineEnv.execute();
    }

})();

src.js是實現業務邏輯的文件，咱們定義sayHello的函數

~ vi src.js

function sayHello(name){
    return "Hello " + name;
}

test.js對源文件進行單元測試

~ vi test.js

describe("A suite of basic functions", function() {
    var name;

    it("sayHello", function() {
        name = "Conan";
        var exp = "Hello Conan";
        expect(exp).toEqual(sayHello(name));
    });
});

頁面報告截圖：

咱們完成了，最基礎的jasmine功能。

4. jasmine使用

1). 測試先行
測試先行，就是未寫現實，先寫用例。

咱們剛纔已經配置好了jasmine的環境，後面咱們全部功能代碼都寫在src.js中，測試代碼都寫在test.js中。

有一個需求，要實現單詞倒寫的功能。如：」ABCD」 ==> 「DCBA」

咱們編輯test.js，增長一個測試用例

~ vi test.js

it("reverse word",function(){
    expect("DCBA").toEqual(reverse("ABCD"));
});

執行這個頁面，單元測試失敗，提示沒有reverse函數。

編輯src.js，增長reverse函數

function reverse(name){
    return "DCBA";
}

執行頁面，單元測試成功！

單元測試成功，是否是能說明咱們完成了「單詞倒寫」的功能呢？答案是不肯定的。若是想保證功能是正確性，咱們須要進行更屢次的驗證。

編輯test.js，繼續增長測試用例

it("reverse word",function(){
        expect("DCBA").toEqual(reverse("ABCD"));
        expect("Conan").toEqual(reverse("nanoC"));
    });

刷新頁面，又提示單元測試失敗，由於咱們但願輸入是」Conan」，輸出是」nanoC」，可是功能代碼返回是」DCBA」，顯然業務邏輯寫的是不對的。

修改src.js，修改reverse函數

~ vi src.js

function reverse(name){
    return name.split("").reverse().join("");
}

再次刷新頁面，單元測試成功！！

這是敏捷開發中提倡的「測試先行」的案例，對於產品級的代碼，咱們真的應該要高質量控制。

2). jasmine語法實踐
如下內容是對jasmine語法的介紹，都在test.js中實現。

作一個嵌套的describe(「A suite of jasmine’s function」)

對斷言表達式的使用

describe("A suite of jasmine's function", function() {
    describe("Expectations",function(){
        it("Expectations",function(){
            expect("AAA").toEqual("AAA");
            expect(52.78).toMatch(/\d*.\d\d/);
            expect(null).toBeNull();
            expect("ABCD").toContain("B");
            expect(52,78).toBeLessThan(99);
            expect(52.78).toBeGreaterThan(18);

            var x = true;
            var y;
            expect(x).toBe(true);
            expect(x).toBeDefined();
            expect(y).toBeUndefined();
            expect(x).toBeTruthy();
            expect(!x).toBeFalsy();

            var fun = function() { return a + 1;};
            expect(fun).toThrow();
        });
    });
});

對開始前和使用後的變量賦值

describe("Setup and Teardown",function(){
        var foo;
        beforeEach(function() {
            foo = 0;
            foo += 1;
        });
        afterEach(function() {
            foo = 0;
        });

        it("is just a function, so it can contain any code", function() {
            expect(foo).toEqual(1);
        });

        it("can have more than one expectation", function() {
            expect(foo).toEqual(1);
            expect(true).toEqual(true);
        });
    });

對忽略suite的聲明

xdescribe("Disabling Specs and Suites", function() {
        it("Disabling Specs and Suites",function(){
            expect("AAA").toEqual("AAA");
        });
    });

對異步程序的單元測試

describe("Asynchronous Support",function(){
        var value, flag;
        it("Asynchronous Support", function() {
            runs(function() {
                flag = false;
                value = 0;
                setTimeout(function() {
                    flag = true;
                }, 500);
            });
            waitsFor(function() {
                value++;
                return flag;
            }, "The Value should be incremented", 750);

            runs(function() {
                expect(value).toBeGreaterThan(0);
            });
        });
    });

咱們成功地對Javascript完成各類的單元測試，下面是測試報告。

最後，BDD其實就是TDD。因此，不要被新名詞嚇到，實質是同樣的。

轉載請註明出處：

五、API

describe(string,function)

全局函數，接收兩個參數

string:函數的描述

function:測試組函數

It(string,function)

一個測試specs,接收兩個參數

string:spces的名稱

function:spces函數

beforeEach(function)

定義在一個describe的全部it執行前作的操做

afterEach(function)

定義在一個describe的全部it執行後作的操做

toBe

等同於===，比較變量

toEqual

處理變量，數組，對象等等

toMatch

使用正則式進行匹配

toBeDefined

是否已聲明且賦值

toBeUndefined

是否未聲明

toBeNull

是否null

toBeTruthy

若是轉換爲布爾值，是否爲true

toBeFalsy

若是轉換爲布爾值，是否爲false

toContain

數組中是否包含元素（值）。只能用於數組，不能用於對象

toBeLessThan

數值比較，小於

toBeGreaterThan

數值比較，大於

toBeCloseTo

數值比較時定義精度，先四捨五入後再比較

toThrow

檢驗一個函數是否會拋出一個錯誤

it("toThrow檢驗一個函數是否會拋出一個錯誤", function() {
    var foo = function() {
      return 1 + 2;
    };
    var bar = function() {
      return a + 1;
    };
    expect(foo).not.toThrow();
    expect(bar).toThrow();
});

jasmine中還有一個強大的spy函數，用它能夠監控函數的調用狀況，由於涉及的內容比較多且文章只是起到拋磚引玉的做用，因此我就不一一列舉了，你們感興趣能夠到官網進行深刻了解。

官網連接：http://jasmine.github.io/2.0/introduction.html