Karma+Jasmie做前端項目的單元測試

karma+jasmine簡單介紹

karma主要是網頁端的javascript測試，karma會将你的js代碼引用到浏覽器中，給代碼一個浏覽器的運作環境，這是karma的一個主要功能。

jasmine是一個測試架構，首先提供了基本的斷言機制，還有其他的進階功能，函數的監控，判斷這個函數是不是被調用過，還有可以mock僞裝ajax請求的結果，等等吧，具體的上jasmine的官網上看，這個玩的還不是很熟。

karma+jasmine安裝

注意點：karma不要安裝到全局，這個一定要注意。

隻要注意到這一點，其他的都是官網上都有的了。

npm install karma
npm install -g karma-cli
npm install karma-jasmine
npm install karma-chrome-launcher
           

karma安裝到本地，通過全局的karma-cli（用戶端）來執行karma指令，不需要單獨安裝jasmine，用karma-jasmine就可以了。

下面講一下karma和requirejs一起怎麼使用。

首先安裝karma-requirejs插件，然後karma init來配置karma.conf.js

也可以直接建立一個這個js，這裡給一個現成的。

module.exports = function(config) {
  config.set({

    // 基本路徑，這個是決定從哪裡找引用的檔案和要排除的檔案
    basePath: '',

    // 要用的架構，這裡用到了下面兩個
    frameworks: ['jasmine', 'requirejs'],


    // 要加載到浏覽器的檔案，注意html結尾的也是可以加載的。
    files: [
      {pattern: 'lib/**/*.js', included: false},
      {pattern: 'service/**/*.js', included: false},
      {pattern: 'route/**/*.js', included: false},
      {pattern: 'conponent/**/*.js', included: false},
      {pattern: 'constants/**/*.js', included: false},
      {pattern: 'model/**/*.js', included: false},
      {pattern: 'template/**/*.html', included: false},
      {pattern: 'test/**/*Spec.js', included: false},
      'test-main.js'
    ],


    // 不想引用的js
    exclude: [
      'src/main.js'
    ],

    //插件，用到什麼就寫什麼，不寫會報錯
    plugins : [
      'karma-jasmine',
        'karma-requirejs'
    ],
    // 生成測試結果報告的類型
    // 可能的值: 'dots', 'progress', 'junit', 'growl', 'coverage'
    reporters: ['dots'],
    // 端口号
    port: ,
    // 輸出的要不要顔色
    colors: true,
    // 日志的等級，就那幾樣看着選
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // 是否自動監控，如果是檔案一改就自動跑測試用例，這邊選擇的是否
    autoWatch: false,
    // 支援的浏覽器，用來做相容性測試，感覺diaodiao的。
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: ['Chrome'],
    // 浏覽器逾時時間，超過這個時間就kill掉了
    captureTimeout: ,
    // 
    // true表示找到浏覽器就自動運作test然後退出，預設就好。
    singleRun: false
  });
};
           

上面就是conf檔案了，copy放到項目根目錄下就歐了，如果不用reqirejs就把相應的require的去掉，把test-main.js去掉就可以了。

用requirejs看下面怎麼配置test-main.js

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    // If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
    // then do not normalize the paths
    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
    allTestFiles.push(normalizedTestModule);
  }
});

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base',

  paths: {
    'jquery': 'lib/jquery',
    'underscore': 'lib/underscore'
  },

  shim: {
    'underscore': {
      exports: '_'
    },
    'lib/bootstrap' : {
      deps : ['jquery'],
      exports : 'bootstrap'
    },
    'lib/jquery.qrcode.min' : {
      deps : ['jquery'],
      exports : 'qrcode'
    }
  },

  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});
           

require.config 裡面的東西才是要修改的，這個用過requirejs的都應該知道怎麼修改成自己項目的，如果想開始用require，去官網上搜搜。

給出一個測試例子，項目用到了backbone，render的時候需要dom節點，就可以在測試之前建立個節點出來。

define(['underscore','conponent/appCon'], function(_,appCon) {
    describe('just checking', function() {
        it('works for underscore', function() {
            // just checking that _ works
            expect(_.size([,,])).toEqual();
        });
    });

    beforeEach(function() {
        var element = "<div id='body'></div>";
        $("body").append(element);
    });

    describe('html page render', function() {
        it('runder page', function() {
            var app = new appCon();
            app.renderFirstPage({
                is_display_org_info : false
            });
        });
    });
});
           

如果是webstorm，直接右鍵karma.conf.js然後選擇run就可以跑測試用例了。如果不是，就karma start 然後karma run 同樣可以。

感覺一篇沒法寫完debug的東西，下一篇再介紹js的debug和測試覆寫率怎麼弄。感覺用webstorm來debug js還是感覺吊吊的。