使用jasmine來對js進行單元測試


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

1、jasmine簡介

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

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

一個基本的測試代碼如下:

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

2、下載jasmine

大家可以點擊下面的鏈接進行下載:

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

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

解壓之后,我們進入文件目錄下的lib\jasmine-2.0.0,這下面通常包括以下這些文件。

這些文件是我們進行js測試所需要的。

3、jasmine的依賴

 

jasmine的運行依賴4個部分:

 

1) 運行環境
瀏覽器(ie,Firefox,chrome)

 

2) 源文件

 

開發人員編寫的js腳步

 

3) 測試文件

 

符合jasmineAPI的測試腳本

 

4) 輸出結果

 

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

 

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 :控制網頁結果輸出的樣式文件。

 

我們來看看src.js文件,我們定義了一個showName的函數

function showName(name){
    return 'my name is '+name;
}

我們在test.js內進行測試腳本的編寫:

describe('just a test',function(){
    it('test showName',function(){
       var a='ck';
        var exp='my name is ck';
        expect(exp).toEqual(showName(a));
    });
});

瀏覽器端運行test.html文件,輸出如下:

這表明我們的腳本順利通過了測試。

我們修改test.js文件

var exp='my name is mm';

再次運行test.html文件,輸入如下:

可以看到jasmine把錯誤信息都打印了出來。

通過這個簡單例子,我們可以看到,使用jasmine來進行單元測試是非常方便的。

5、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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM