AngularJS 教學 - 單元測試(Unit Testing)

本篇先小篇幅介紹如何建構一個 AngularJS 的單元測試

內容很簡單，之後再放上進一步的介紹，包括 Controller、Service、Ajax 等等

單元測試顧名思義就是要能夠確保程式的某個 function 或是部分的程式邏輯是正確的

至於單元測試所帶來的好處就不花時間描述了

不過單元測試除了驗證正確性外其實也是描述了系統的 Spec (Specification)

也就是單元測試中的每一個測試函式就表明了一件 Spec

回歸到 AngularJS 上，目前 JavaScript 領域中有很多單元測試的框架(Testing Framework)

包括 QUnit、Mocha、Jasmine 等等

除了測試框架之外還有所謂的 Testing Runner

例如我們接下來要介紹的 Karma，它不同於 Testing Framework

Testing Runner 的任務在於讓你能夠方便且快速的執行測試程式

透過設定可以讓這些 Testing Runner 找出測試程式、打開瀏覽器、執行、顯示結果甚至是產出測試報表

以上廢話結束 :)，趕快來介紹如何利用 Karma 與 Jasmine 搭建一個簡單的測試環境與程式

1. 安裝 Karma $npm install -g karma-cli

2. 在專案 root 路徑下執行 $npm install karma --save-dev

3. 在專案 root 路徑下安裝 Jasmine 的 Karma plugin $npm install karma-jasmine --save-dev

4. 在專案 root 路徑下安裝 Chrome 的 Karma plugin $npm install karma-chrome-launcher --save-dev

   第4點我們安裝了 Chrome 的 Karma plugin，如果你不是用 Chrome 也沒關係

   Karma plugin 都有支援其他的瀏覽器，至於為何要裝瀏覽器的 plugin

   是因為 Karma 在運行測試程式時需要先行載入瀏覽器

5. 在專案 root 路徑下建立 Karma 的設定檔 (Karma.conf.js)，以下本次範例的內容

//Karma configuration

//Generated on Sat Oct 25 2014 06:51:07 GMT+0000 (UTC)

module.exports = function(config) {

     config.set({

    

      // base path that will be used to resolve all patterns (eg. files, exclude)

      basePath: '',

      // frameworks to use

      // available frameworks: https://npmjs.org/browse/keyword/karma-adapter

      /* 我們使用 Jasmine 做為測試框架 */

      frameworks: ['jasmine'],

      // list of files / patterns to load in the browser

      /* 這裡指定了需要被執行的測試程式的路徑 */

      files: [

        'karma-jasmine-test.js'

      ],

      // list of files to exclude

      exclude: [

      ],

      // preprocess matching files before serving them to the browser

      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor

      preprocessors: {

      },

    

    

      // test results reporter to use

      // possible values: 'dots', 'progress'

      // available reporters: https://npmjs.org/browse/keyword/karma-reporter

      reporters: ['progress'],

    

      // web server port

      port: 9876,

    

      // enable / disable colors in the output (reporters and logs)

      colors: true,

    

      // level of logging

      // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG

      logLevel: config.LOG_INFO,

    

      // enable / disable watching file and executing tests whenever any file changes

      autoWatch: true,

    

      // start these browsers

      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher

      /* 指定瀏覽器 */

      browsers: ['Chrome'],

    

      // Continuous Integration mode

      // if true, Karma captures browsers, runs the tests and exits

      singleRun: false

     });

};

   不過這個設定檔內容有點複雜，你可以透過 $karma init 來建立該檔案

   指令會依序引導你建立一個基本的 Karma 設定檔，有點類似 $npm init 

6. 建立測試程式，在專案 root 路徑下建立 karma-jasmine-test.js

    describe("Karma Jasmine Sample Test", function(){

        var aValue;

    

        beforeEach(function(){

            aValue = 1;

        });

     

        // youre spec 1.

        it("aValue should be 1", function(){

            expect(aValue).toEqual(1);

        });

    });

   以上都是 Jasmine 的程式，如果不熟悉的可以去官方網站看

7. 最後在專案 root 路徑下執行 $karma start Karma.conf.js

   你會發現 Chrome 瀏覽器被叫起，並且會有以下的 console 內容