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

  互聯網的快速發展,給 web開發人員帶來了史無前例的挑戰。對於前端開發,前端開發er所須要編寫的js早已不是那些寥寥幾行的視覺效果代碼。代碼量的大增,多人協同,人員素質懸殊不齊,這都須要一個標準,來對代碼的規範性進行控制。Jasmine做爲一個前端團隊使用的 測試框架,便運應而生。
   一、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);
  });
  });
  複製代碼
   二、下載jasmine
  你們能夠點擊下面的連接進行下載:
  https://github.com/pivotal/jasmine/tree/master/dist
  推薦下載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 :控制網頁結果輸出的樣式文件。
  咱們來看看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來進行單元測試是很是方便的。
   五、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函數,用它能夠監控函數的調用狀況,由於涉及的內容比較多且文章只是起到拋磚引玉的做用,因此我就不一一列舉了,你們感興趣能夠到官網進行深刻了解。
相關文章
相關標籤/搜索