Angularjs 如何進行單元測試

當我們在使用Angularjs這個框架時，可以發現到一個重要的觀念「依賴性注入」，也由於這個特點，讓我們各易於針對小模組進行單元測試，然而在這裡將使用Karma + Jasmine來進行。

一、安裝Node.js

二、安裝Karma

npm install -g karma

三、假設目錄結構為：

AngularjsTest
     |-angularjs-test
          |-includes
               |-angular
                    |-angular.min.js
                    !-angular-mocks.js
           |-unitTest
               |-controllers
                    |-app.js
               |-tests
                    |-app.tests.js
                    |-karma.config.js
               |-views

四、配置文件Karma.config.js首先將目錄切換到專案的test目錄下，並使用以下指令來產生配置文件：

cd git/AngularjsTest/angularjs-test/unitTest/tests
karma init karma.config.js

過程中會透過詢問式命令來讓我們產生配置文件，在這邊要注意的部分是files，需載入以下檔案進行測試。

  files: [
        "../../includes/angular/angular.min.js",
        "../../includes/angular/angular-mocks.js",
        "../controllers/*.js",
        "*.test.js"
    ]

五、啟動Karma

karma start karma.config.js

啟動後我們的chrome瀏覽器就會出現以下畫面

六、接著我們就可以來進行一些基本的測試，假設有一個app.js需要測試而內容如下

'use strict';
(function(){
    angular.module('unitTest',[])
        .controller('testCtrl',[testCtrl])
    function testCtrl(){
        var self = this;
        self.text = "Hello"
        self.add = add;
        function add(a,b){
            return a + b;
        }
    }
})()

那我們想要測試的情境包括：text變數為Hello、add的功能是否正常運行，須注意的是這邊的例子使用別名的方式，如果要使用原本scope的方式可參照： https://coderwall.com/p/u720zq/angular-unit-testing-with-jasmine

七、在app.tests.js內撰寫測試案例

'use strict';
describe('Controller: testCtrl', function(){
    var testCtrl;
    beforeEach(module('unitTest'));
    beforeEach(inject(function($controller) {
        testCtrl = $controller('testCtrl', {});
    }));
    it('should have variable text = "Hello"', function(){
        expect(testCtrl.text).toBe('Hello');
//        expect(testCtrl.text).toBe('Hello?');
    });
    it('should have two param Parameters to add',function(){
        expect(testCtrl.add(5,2)).toBe(7);
//        expect(testCtrl.add(5,2)).toBe(8);
    })
});

結果如下：

然而我們將註解拿掉後：

從上面結果可以得知一些錯誤的訊息，在這裡的錯誤是：text變數不等於 "Hello"、5+2不等於8。
如此一來我們就可以基於這個基本測試來進行更多的邏輯測試，也可以在開發過程中減少測試代碼與開發代碼的混淆，有效進行切割，更容易測試出某個小功能的bug，加快修正速度。