Javascript單元測試框架Jasmine（結合karma使用）

 

Jasmine是用來寫javascript 單元測試的框架

1.官網 下載最新版本, 我當前使用 jasmine-standalone-2.0.0

2.解壓後,打開根目錄下的 SpecRunner.html

其中source files就是你要測試的js, spec files就是單元測試的JS, 分別替換成對應你項目的JS

 

4. 示例中我建立了一個被測試的對象 app.js, 包含一段簡單的javascript    

function giveMeFive() {
    return 5;
}

再建立一個app.test.js 用來對giveMeFive()進行單元測試, 其中describe方法就是由jasmine框架提供，這段單元測試指望giveMeFive()方法返回 5

describe('giveMeFiveTest', function() {
 
    it('should return 5', function() {
 
        expect(giveMeFive()).toEqual(5);
    });
});

示例中我把source和spec分別替換成 app.js 和 app.test.js

 

5. 瀏覽SpecRunner.html頁面,會執行並顯示測試結果

 

 

把app.test.js裏面的 toEqual(5) 改爲 toEqual(4), 單元測試就會報錯

 

 

在用Jasmine的html頁面測試的時候, 若是你要在多個瀏覽器中測試, 就要在多個瀏覽器中打開，這樣感受不是很方便, 因此咱們能夠結合Karma, Karma有不少功能，在這裏它就能夠自動把你的腳本測試在多個瀏覽器中執行並告訴你結果

 

結合Karma 更高效的測試

1. Karma 依賴於node.js， 須要先下載安裝 node.js

2. 安裝完node.js後，打開node.js的命令行根據，運行 npm install -g karma-cli (該命令在全局的node_modules中安裝karma模塊, 也能夠使用 npm install karma 在當前目錄會建立一個 node_modules文件夾放置你的module)

3.  安裝完 karma 模塊後, 用命令進入你要測試的JS的根目錄, 運行 karma init app.test.config.js  建立配置文件, 安裝過程當中會讓你根據實際需求選擇信息, 如圖

    

   (1) 這裏我選用 Jasmine做爲測試框架,  

   (2) 選擇要被測試的JS文件，還有寫好單元測試的JS文件

   (3) 瀏覽器我選擇 FF, Chrome, IE , 稍後運行測試的時, 你所選擇的因此瀏覽器會被自動打開且顯示測試結果,  這些配置信息會存在你建立的app.test.config.js中,能夠根據你的需求再修改.

 

4. 運行 npm start app.test.config.js, 會開啓你選擇的全部瀏覽器, 測試並顯示結果在瀏覽器和命令行上

 

當你對某個js文件作修改的時候, karma會自動監聽, 而後從新執行測試.

 

 

使用Jasmine爲基於angularJS框架的應用寫單元測試(基於前面的基礎)

1. 下載能夠mock angular的類庫 angular.mocks.js

2. 編寫基於angular框架的的javascript代碼 -> 例如angular-controller.js

var phonecatApp = angular.module('phonecatApp', []);
 
phonecatApp.controller('PhoneListCtrl', function ($scope) {
    $scope.phones = [
        {
            'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.'
        },
        {
            'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.'
        },
        {
            'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.'
        }
    ];
});

 

3. 建立針對 angular-controller.js 的單元測試-> angular-controller-spec.js

describe('PhoneListCtrl', function () {
 
    beforeEach(module('phonecatApp'));
 
    it('should create "phones" model with 3 phones', inject(function ($controller) {
        var scope = {},
            ctrl = $controller('PhoneListCtrl', { $scope: scope });
 
        expect(scope.phones.length).toBe(3);
    }));
 
});

 

4. SpecRunner.html的內容如圖,瀏覽該頁面就能夠知道測試結果

參考AngularJS Testing with Karma and Jasmine.