angular測試-Karma + Jasmine配置

首先講一下大緻的流程:

• 需要node環境,首先先要安裝node,node不會?請自行搜尋.版本>0.8
• 安裝node完成之後先要測試下npm是否測試通過,如下圖所示

  

• 首先看下目錄結構 目錄為:F:\karma>

• 其中karma.config.js另外說,因為這個是安裝karma之後,karma的運作完全依賴這個配置檔案
• 接下來安裝karma 

//為了能夠讓全局都可以運作karma的指令行
npm install -g karma-cli
//推薦全局,簡單不出錯
npm install karma -g --save-dev
//接下來安裝你項目需要的元件, 這個是為了保證運作karma可有直接調用系統的chrome浏覽器,如果沒有chrome浏覽器,還是建議安裝吧,不然隻能呵呵了..
npm install karma-jasmine karma-chrome-launcher -g --save-dev
      

• 　到現在為止基本完成80%了,接下來就是生成karma.config.js檔案

• enter完之後,在F:\karma\下就生成了karma.config.js
• === 廣告大法 angular測試-Karma + Jasmine配置  === http://www.cnblogs.com/NetSos/p/4371075.html
• 打開配置檔案

// Karma configuration
// Generated on Mon Mar 23 2015 16:18:18 GMT+0800 (中國标準時間)

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
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
        "js/plugin/angular.js",
        "js/plugin//angular-mocks.js",
        "js/*.js",
        "tests/*.tests.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
  });
};
      

• 每個配置的意思可以自行搜尋,重要的配置在files這個配置裡面,把必須的檔案引入進去,其他的*表示就可以了
• 由于咱們用的是jasmine測試架構,首先你需要了解jasmine的測試文法 duang~~ http://jasmine.github.io/edge/introduction.html
• 接下來貼出home.js(angular寫法的js) 和 對應測試檔案home.tests.js,由于是測試js,目前是不需要html頁面的
• home.js

'use strict';
var app = angular.module('netsos.cnblogs.com',[]);
app.controller('Hevily',['$scope',function($scope){
   $scope.text = 'hello';
}]);
    
      

• home.tests.js

'use strict';
describe('Hevily',function(){
    var scope;
    //module都是angular.mock.module的縮寫
    beforeEach(module('netsos.cnblogs.com'));
    //inject都是angular.mock.inject的縮寫
    beforeEach(inject(function($rootScope,$controller){
        scope = $rootScope.$new();
        $controller('Hevily',{$scope:scope});
    }));
    it('text = hello',function(){
        expect(scope.text).toBe('hello');
    });
});
      

• 　　運作karma

簡單的單元測試入門就這樣結束了,麼麼麼....

點選下載下傳示例代碼: angular測試-Karma + Jasmine配置 

如果是seajs的話 需要增加這個檔案

(function(__karma__, seajs) {
    var tests = [],
        file;
    // var alias = {
    //     'testfile':'testfile/test',
    //     'login':'webapp/resources/view/src/login',
    //     'test':'testjs/test'
    // }

    var  alias = {};
    for (file in __karma__.files) {
        if (__karma__.files.hasOwnProperty(file)) {
            // if (/test\.js$/i.test(file)) {
            //     tests.push(__karma__.basePath+file); //所有的測試用例代碼檔案以spec結尾
            // }
            // if (/ngjs/.test(file)) {

                var name = file.match(/([^.]+)\.js/)[1]; //擷取src目錄下的檔案路徑作為seajs子產品的key
                alias[name] = name;
                tests.push(name)
                // console.log(tests)
            // }
        }
    }

    seajs.config({
        alias: alias
    })

    var __start = __karma__.start;
    __karma__.start = function() {    
        seajs.use(['tests/epm.test'], function() {//測試檔案的路徑
            __start.call(); //要在seajs子產品載入後調用,否則會加載不到任何測試用例
             // mocha.run()
        });
    };


})(window.__karma__, seajs);      

小賀

黑站榜單

  90活在80後