nodeJS grunt karma+jasmine+require 快速構建前臺自動化測試環境搭建

前臺自動化測試環境搭建

前言

在Java領域，Apache, Spring, JBoss 三大社區的開源庫，一應俱全，但每一個庫都在其領域中都鶴立雞羣。而Nodejs中各類各樣的開源庫，卻讓人眼花繚亂，不知從何下手。

Nodejs領域: Jasmine作單元測試，Karma自動化完成單元測試，Grunt啓動Karma統一項目管理，Yeoman最後封裝成一個項目原型模板，npm作nodejs的包依賴管理，bower作javascript的包依賴管理。

Java領域：JUnit作單元測試, Maven自動化單元測試，統一項目管理，構建項目原型模板，包依賴管理。

Nodejs讓組合變得更豐富，卻又在加劇咱們的學習門檻。我還說不清楚，也看不透！

上面寫的有點遠了，回到文章的主題，Jasmine+Karma自動化單元測試。

1．Karma簡介

Karma是Testacular的新名字，在2012年google開源了Testacular，2013年Testacular更名爲Karma。Karma是一個讓人感到很是神祕的名字，表示佛教中的緣分，因果報應，比Cassandra這種名字更讓人猜不透！

Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具可用於測試全部主流Web瀏覽器，也可集成到CI（Continuous integration）工具，也可和其餘代碼編輯器一塊兒使用。這個測試工具的一個強大特性就是，它能夠監控(Watch)文件的變化，而後自行執行，經過console.log顯示測試結果。

Jasmine是單元測試框架，本單將介紹用Karma讓Jasmine測試自動化完成。

istanbul是一個單元測試代碼覆蓋率檢查工具，能夠很直觀地告訴咱們，單元測試對代碼的控制程度。

2．Jasmine簡介

Jasmine是一個用來編寫Javascript測試的框架，它不依賴於任何其它的javascript框架，也不須要DOM。它有擁有靈巧而明確的語法可讓你輕鬆的編寫測試代碼。

jasmine的結構很簡單：

 

describe("A suite", function() {

  var foo;

  beforeEach(function() {

    foo = 0;

    foo += 1;

  });

 

  afterEach(function() {

    foo = 0;

  });

 

  it("contains spec with an expectation", function() {

    expect(true).toBe(true);

  });

});

每一個測試都在一個測試集中運行，Suite就是一個測試集，用describe函數封裝。 Spec表示每一個測試用例，用it函數封裝。經過expect函數，做爲程序斷言來判斷相等關係。setup過程用beforeEach函數封裝，tearDown過程用afterEach封裝。

3.Karma的安裝

3.1:系統環境:

win7 64bit, node v0.10.32, npm 1.4.28

3.2:開始安裝karma

E:\workspace npm install -g karma      

注：-g表明全局安裝                    

3.4:測試是否安裝成功

E:\workspace karma start                                         

                       

打開瀏覽器訪問http:\\localhost:9876出現下面界面表示OK

 

4karma+jasmine+requirejs

4.1:初始化karma配置文件karma.conf.js

 

~ D:\workspace\javascript\karma>karma init

 

Which testing framework do you want to use ?

Press tab to list possible options. Enter to move to the next question.

> jasmine

注：測試框架選擇

Do you want to use Require.js ?

This will add Require.js plugin.

Press tab to list possible options. Enter to move to the next question.

> yes

注：需不須要引入requirejs

引入requirejs的緣由：加載相互依賴的js文件

Do you want to capture a browser automatically ?

Press tab to list possible options. Enter empty string to move to the next question.

> Chrome

> 

注：選擇打開的瀏覽器

What is the location of your source and test files ?

You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".

Enter empty string to move to the next question.

> 

注：karma啓動時加載的目標文件和測試文件

Should any of the files included by the previous patterns be excluded ?

You can use glob patterns, eg. "**/*.swp".

Enter empty string to move to the next question.

> 

注：加載的目標文件不須要測試的文件

Do you want Karma to watch all the files and run the tests on change ?

Press tab to list possible options.

> yes

注：karma要不要動態監聽目標文件和測試用例變化

Config file generated at "D:\workspace\javascript\karma\karma.conf.js".

這個指令跑完後你就會發現目錄底下多了個配置文件karma.conf.js，test-main.js

karma.conf.js：  karma配置文件

test-main.js:    requireJS配置文件

 

4.2.Karma第一次啓動時的問題

1，chrome的plugins

 

 

~ E:\workspace npm install karma-chrome-launcher  --save-dev     

2，環境變量CHROM­_BIN的問題

~ D:\workspace\javascript\karma>karma start

INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/

INFO [launcher]: Starting browser Chrome

ERROR [launcher]: Cannot start Chrome

        Can not find the binary C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe

        Please set env variable CHROME_BIN

設置chrom的CHROM­_BIN

~ E:\workspace Set CHROM­_BIN= 「C:/Program Files (x86)/Chrome/chrome.exe」

 

4.3.安裝集成包karma-jasmine

~ E:\workspace npm install karma-jasmine

4.4. Requirejs簡介

RequireJS是一個Javascript 文件和模塊框架，能夠從 http://requirejs.org/下載，若是你使用Visual Studio也能夠經過Nuget獲取。它支持瀏覽器和像node.js之類的服務器環境。使用RequireJS,你能夠順序讀取僅須要相關依賴模塊。

RequireJS所作的是，在你使用script標籤加載你所定義的依賴時，將這些依賴經過head.appendChild()函數來加載他們。當依 賴加載之後，RequireJS計算出模塊定義的順序，並按正確的順序進行調用。這意味着你須要作的僅僅是使用一個「根」來讀取你須要的全部功能，而後剩下的事情只須要交給RequireJS就好了。爲了正確的使用這些功能，你定義的全部模塊都須要使用RequireJS的API，否者它不會像指望的那樣 工做。

 

4.5.安裝集成包 requires

經過nodejs安裝RequireJS

~ E:\workspace npm install requires –save-dev

~ E:\workspace npm install karma-requires –save-dev                                              

注：-save-dev : 能夠直接 安裝的包自動添加到grunt包管理配置文件中  

                         

4.6. RequireJS配置

在通常的web項目中 require都是經過<sricpt>標籤靜態加載到項目中去的

例如：< sricpt data-main=」main.js」 src=」require.js」></ sricpt >

注：RequireJS是怎麼開始工做：當RequireJS被加載的時候，它會使用 data-main屬性去搜尋一個腳本文件（它應該是與使用src加載RequireJS是相同的腳本）。data-main須要給全部的腳本文件設置一 個根路徑。根據這個根路徑，RequireJS將會去加載全部相關的模塊。

Data-main:指向的requirejs的配置文件

配置test-main.js

// This file is test/spec/main.js

var allTestFiles = [];

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

 

var pathToModule = function(path) {

  return path.replace(/^\/base\//, '').replace(/\.js$/, '');

};

 

Object.keys(window.__karma__.files).forEach(function(file) {

  if (TEST_REGEXP.test(file)) {

    // Normalize paths to RequireJS module names.

    allTestFiles.push(pathToModule(file));

  }

});

 

require.config({

  // Karma serves files under /base, which is the basePath from your config file

  baseUrl: 'base/src/js',

   paths: {

      'mootools' : ' lib/mootools',

       'jquery' : 'lib/jquery-1.10.2',

      'jquery-ui' : 'ib/jquery-1.10.2/jquery-ui'

  },

  shim: {

     'jquery-ui': {

         deps: ['jquery']

     }

   },

 

  // dynamically load all test files

  deps: allTestFiles,

 

  // we have to kickoff jasmine, as it is asynchronous

  callback: window.__karma__.start

});

 

再經過 karma 配置文件將其引入

  files: [

               {pattern: 'src/js/lib/*.js', included: false},

               {pattern: 'src/js/apps/*.js', included: false},

               {pattern: 'test/*-spec.js', included: false},

               'test/*-spec.js',

               ‘test-main.js',

               'src/*.js'

               ],

5.自動單元測試

5.1:三步準備工做：

建立源文件

源文件：用於實現某種業務邏輯的文件，就是咱們平時寫的js腳本

假如咱們的源文件原來有個需求有一個需求：要實現單詞倒寫的功能，如：」ABCD」 ==> 「DCBA」

Src/test.js

function reverse(name){

    return name.split("").reverse().join("");

}

建立測試文件

測試文件：符合jasmineAPI的測試js腳本

Test/spec/module1/test-spec.js

describe("A suite of basic functions", function() {

    it("reverse word",function(){

        expect("DCBA").toEqual(reverse("ABCD"));

    });

});

修改karma .conf.js

前期 自動生成的配置文件比較凌亂，並且有好多地方配置不到位，這個時候你們能夠地下的代碼 替換其內容

module.exports = function(config) {

  config.set({

    // base path, that will be used to resolve files and exclude

    basePath: '',

    // frameworks to use

    frameworks: ['jasmine', 'requirejs'],

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

    files: [

      {pattern: 'src/js/apps/inspect/*.js', included: false},

      {pattern: 'src/js/modules/*.js', included: false},

      {pattern: 'src/js/lib/*.js', included: false},

      {pattern: 'src/js/apps/settings/*.js', included: false},

      {pattern: 'test/spec/**/*-spec.js', included: false},

      'test-main.js'

    ],

    

    preprocessors: {

        'src/js/apps/inspect/*.js': ['coverage']

    },

    // list of files to exclude

    exclude: [],

    // test results reporter to use

    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'

    reporters: ['progress', 'coverage'],

    coverageReporter: {

        type: 'html',

        dir: 'coverage/'

    },

    // 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, currently available:

    // - Chrome

    // - ChromeCanary

    // - Firefox

    // - Opera (has to be installed with `npm install karma-opera-launcher`)

    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)

    // - PhantomJS

    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)

    browsers: ['Chrome'],

    // If browser does not capture in given timeout [ms], kill it

    captureTimeout: 60000,

    // Continuous Integration mode

    // if true, it capture browsers, run tests and exit

    singleRun: false

  });

};

5.2.測試requireJS

1.將前面的test.js剪切至src/js/apps/inspect/

2.修改karma配置文件引入路徑

3. 運行karma start會出現下面的結果

6.Karma統計UT覆蓋率輸出報告

~ E:\workspace  npm install karma-coverage                           

注：打完指令若是細心觀察你就會發現karma的配置文件中多了藍色部分代碼，是對UT覆蓋率輸出的配置。

module.exports = function(config) {

  config.set({

    // base path, that will be used to resolve files and exclude

    basePath: '',

    // frameworks to use

    frameworks: ['jasmine', 'requirejs'],

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

    files: [

      {pattern: 'src/js/apps/inspect/*.js', included: false},

      {pattern: 'src/js/modules/*.js', included: false},

      {pattern: 'src/js/lib/*.js', included: false},

      {pattern: 'src/js/apps/settings/*.js', included: false},

      {pattern: 'test/spec/**/*-spec.js', included: false},

      'test-main.js'

    ],

    preprocessors: {

        'src/js/apps/inspect/*.js': ['coverage']

    },

    // list of files to exclude

    exclude: [],

    // test results reporter to use

    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'

    reporters: ['progress', 'coverage'],

    coverageReporter: {

        type: 'html',

        dir: 'coverage/'

    },

    // 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, currently available:

    // - Chrome

    // - ChromeCanary

    // - Firefox

    // - Opera (has to be installed with `npm install karma-opera-launcher`)

    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)

    // - PhantomJS

    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)

    browsers: ['Chrome'],

    // If browser does not capture in given timeout [ms], kill it

    captureTimeout: 60000,

    // Continuous Integration mode

    // if true, it capture browsers, run tests and exit

    singleRun: false

  });

};啓動karma start，在工程目錄下面找到index.html文件，coverage/chrome/index.html

打開後，咱們看到代碼測試覆蓋綠報告

點擊文件路徑進入文件夾點擊文件能夠此文件的UT覆蓋率

 

有顏色的文件表明未覆蓋到的文件(覆蓋由好到壞顯示顯色綠，黃，紅)

7 grunt 託管karma

 7.1.Grunt 簡介

Grunt是一個自動化的項目構建工具. 若是你須要重複的執行像壓縮, 編譯, 單元測試, 代碼檢查以及打包發佈的任務. 那麼你可使用Grunt來處理這些任務, 你所須要作的只是配置好Grunt, 這樣能很大程度的簡化你的工做.

若是在團隊中使用Grunt, 你只須要與其餘人員約定好使用Grunt應該規避的問題, 就可以很方便的自動化的處理大部分的常見工做任務, 你所付出的努力幾乎爲0.

7.2.任務配置修改

Install grunt-karma

使用install grunt-karma –save-dev將 grunt-karma載入grunt包管理配置文件Gruntfile.js

 

Gruntfile.js中增長配置

注：任務配置

karma: {

            unit: {

                configFile: "karma.conf.js",

                singleRun: true

            }

        },

注：載入模塊文件

grunt.loadNpmTasks('grunt-karma');

注：定義具體的任務。第一個參數爲任務名，第二個參數是一個數組，表示該任務須要依次使用的模塊。default任務名錶示，若是直接輸入grunt命令，後面不跟任何參數，這時所調用的模塊（該例爲jshint，concat和uglify）

grunt.registerTask('unit', [‘jshint’, ‘concat’, ‘uglify’]);

 

grunt.registerTask('unit', ['karma']);