互聯網的快速發展,給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