angularjs+jasmine單元測試入門

　　使用cordova、angularjs、ionic開發hybrid App有一段時間了。為了做單元測試，之前一直是把要測的某一部分產品代碼復制到另一個單獨的工程中來寫測試代碼，測好了以后再復制回去。弊端顯而易見。於是就想，能不能在同一份產品代碼上做單元測試呢？

　　搜百度，結果千篇一律，而且語焉不詳，一點實踐意義都沒有。還是谷歌好，給出了三篇非常具體的指導文章，請看附錄。

 

一、我的工程概況

　　因為是cordova工程，所以除了www之外還有別的很多目錄，這里不一一列出。以下只看www目錄：

+ www/

　　+ lib/　　　　　　庫根目錄

　　　　+ angular/　　   放angular庫

　　　　+ ionic/　　     放ionic庫（一般已包含了angular庫）

　　+ app/　　　　　　app控制器、視圖模板，按大功能塊再分子目錄

　　+ app.services/　　 app相關的service

　　+ app.directives/　 app相關的directive

　　+ test/　　　　　　測試代碼根目錄

　　　　+ lib/　　　　   測試用到的庫

　　　　　　+ jasmine-2.4.1/　　　　放jasmine庫

　　　　　　+ angular/　　　　      放angular-mock等依賴項

　　　　+ spec/　　　　  測試用例

　　　　SpecRunner.html　　測試運行器頁面

 

【注1】Jasmine庫具體是哪些文件呢？請后參考資料：2. Jasmine獨立包下載頁面： https://github.com/jasmine/jasmine/releases

【注2】測試運行器頁面 SpecRunner.html 也可以仿照 Jasmine庫的示例來寫，例如：

    <!-- jasmine -->
    <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
    <link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
    <script src="lib/jasmine-2.4.1/jasmine.js"></script>
    <script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
    <script src="lib/jasmine-2.4.1/boot.js"></script>

    <!-- angular -->
    <script src="../lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/angular/angular-mocks.js"></script>

    <title>測試運行器</title>

    <!-- 被測源碼 -->
    <script src="../app.services/constService.js"></script>

    <!-- 測試用例 -->
    <script src="spec/app.services/constServiceSpec.js"></script>

【注3】test目錄不需要出現在最終打包后的Android apk中，所以要排除掉，方法如下：

　　找到cordova工程中platforms\android\ant.properties文件，添加一句：

aapt.ignore.assets=<dir>test:

相當於：

aapt.ignore.assets=<dir>test:

 

 

二、測試Service

假如www/app.services/目錄下有個constService.js文件:

angular.module("app.services").service("constService", function(){

　　this.one = 1;

});

 

現在編寫測試Spec，文件名為constServiceSpec.js，位於www/test/spec/app.services/目錄，內容如下：

describe("constService", function () {
    var out;                                     // 被測對象
    beforeEach(function () {
        module('app.services');　　               // 導入模塊
　　　　 inject(function (constService) {　　      // 注入依賴
        　　out = constService;                   // 關聯被測對象實例
    }));

    it("one == 1", function () {
        expect(out.one).toEqual(1);
    });
});        

 

然后在 SpecRunner.html中添加該Spec文件的引用：

    <!-- 測試用例 -->
    <script src="spec/app.services/constServiceSpec.js"></script>

 

最后運行SpecRunner.html即可，輸出如下：

 

三、測試Controller

待續...

 

參考資料：

1. Jasmine官網： http://jasmine.github.io/
2. Jasmine獨立包下載頁面： https://github.com/jasmine/jasmine/releases
3. Unit Testing in AngularJS: Services, Controllers & Providers
4. Mocking Dependencies in AngularJS Tests
5. Unit Testing Services in AngularJS for Fun and for Profit