angular+karma+bower搭建自動化測試環境

目錄

• angularkarmabower搭建自動化測試環境
  • 目錄
  • express建立項目
  • bower
    • bower的安裝
    • Git
    • bower的使用
    • bower的下載下傳目錄
  • Karma
  • 開始測試

在開發過程中要保證開發代碼的品質，單元測試是一種很有效的方式，特别是針對像angular這種可以自定義指令元件特性的架構更加有必要。下面将介紹配置angular自動化測試環境的具體步驟，至于安裝node和express這些過程就省略不提了。

express建立項目

h:\work> express project
           

先随便建立一個項目，就叫project吧，于是我得到了如下的結構

bower

bower的安裝

接下來，讓我們來安裝bower為我們管理js

h:\work\project> npm install --save-dev bower
           

bower子產品安裝好後，就可以用bower來安裝我們要用的架構了。

不過，安裝前先建一個配置檔案bower.json,執行以下指令。

h:\work\project> bower init
           

我就一路預設下去了，很快就得到了一個配置檔案bower.json。

這個檔案的功能跟package.json差不多，在我們以後執行bower install也用的上。

// project>>bower.json
{
  "name": "project",
  "version": "0.0.0",
  "authors": [
    ".."
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}
           

Git

在使用bower安裝架構之前，我們首先要安裝git，git的安裝很簡單，這裡是官方下載下傳

bower的使用

現在，可以用bower安幾個常用的架構

h:\work\project> bower install --save jquery angular angular-resource bootstrap angular-mocks
           

預設的bower下載下傳下來的架構是安在根目錄的bower_components下面，這時候我的目錄變成了這樣

bower的下載下傳目錄

對與bower的預設下載下傳目錄，我們可以通過兩種方式來修改。

第一種最簡單，在根目錄下建立一個.bowerrc檔案

//.bowerrc
 {
  "directory": "app/lib"
}
           

這樣，所有bower下載下傳的架構都會到檔案指定的位置

第二種比較麻煩一點，但更加的靈活，那就是用grunt幫我們處理

通過上面的指令，安裝grunt和grunt-bower-task子產品。

grunt安裝好後，在根目錄下建立檔案Gruntfile.js

//Gruntfile.js
module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint']);

};
           

省得麻煩，我直接去grunt官網把例子copy了過來，接下來在去grunt-bower-task官網把例子拷過來，具體的用法可以去官網看。于是得到了以下檔案

//Gruntfile.js
module.exports = function(grunt) {

  grunt.initConfig({
    bower: {
    install: {
      options: {
        targetDir: 'app/lib',
        layout: 'byComponent',
        install: true,
        verbose: false,
        cleanTargetDir: false,
        cleanBowerDir: false,
        bowerOptions: {}
      }
    }
  }
  });

  grunt.loadNpmTasks('grunt-bower-task');

  grunt.registerTask('default', ['bower']);

};
           

h:\work\project> grunt
           

配置好後來執行試一下,得到這個結果代表成功了。

Running "bower:install" (bower) task
>> Installed bower packages
>> Copied packages to h:\work\project\app\lib

Done, without errors.
           

Karma

有bower為我們安裝架構，接下來就是我們的主角karma，karma的安裝和配置很簡單。

先通過npm安裝它。

h:\work\project> npm install --save-dev karma
           

安裝完後，生成配置檔案karma.conf.js

h:\work\project> karma init
           

還是一路預設下去，在删除掉注釋後，得到這個檔案

// project>>karam.conf.js
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: ,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}
           

接下來我們要修改file數組，設定執行karma時監控的檔案。

現在先來看下目錄

我們要監控app下面所有的js，進行測試，是以檔案修改後如下

// project>>karma.conf.js
{
...
files: [
      "app/lib/jquery/dist/jquery.js",
      "app/lib/angular/angular.js",  //必要
      "app/lib/angular-resource/angular-resource.js",
      "app/lib/angular-mocks/angular-mocks.js",  //必要

      "app/js/**/*.js",
      "app/views/**/*.js",
      "app/components/**/*.js"
    ]
 ...
 }
           

配置的具體用法請參照Karma官網

到此，karma的配置全部完成。

開始測試

接下來我們要做的就是編寫測試，比如要測試如下代碼

// project>>app>>js>>app.js
angular.module('app', [])
    .controller('appCtr', ['$scope', function ($scope) {
        $scope.add = function (a, b) {
            return a + b;
        }
    }])
           

再編寫符合jasmine文法的相應代碼去測試

// project>>app>>js>>test>>app.test.js
describe('now will test app.js',function(){
    var scope;

    beforeEach(module('app'));
    beforeEach(inject(function($rootScope,$controller){
        scope = $rootScope.$new();
        $controller('appCtr',{$scope:scope});

    }))
    it('add 1+1 should get sum 2',function(){
        expect(scope.add(,)).toEqual();
    })
})
           

以上的為了測試appCtr裡的add方法，現在需要執行下面指令開開啟測試

由于我設定的是谷歌浏覽器，此時會打開浏覽器，看到karma的可視化測試界面，在指令行會獲得下面這個結果

:::WARN [watcher]: Pattern "h:/work/project/app/lib/jquery/
dist/jquery.js" does not match any file.
   :::WARN [watcher]: Pattern "h:/work/project/app/views/**/*.
js" does not match any file.
   :::WARN [watcher]: Pattern "h:/work/project/app/components/
**/*.js" does not match any file.
   :::WARN [karma]: No captured browser, open http://localhost
:/
   :::INFO [karma]: Karma v0 server started at http://lo
calhost:/
   :::INFO [launcher]: Starting browser Chrome
   :::INFO [Chrome  (Windows  )]: Connected on
 socket LQeKLh1yghfUG0K5AAAA with id 
Chrome  (Windows  ): Executed  of  SUCCESS ( secs /  sec
Chrome  (Windows  ): Executed  of  SUCCESS ( secs / 
 secs)
           

可以看到測試成功通過，在前面karma.conf.js我設定了autoWatch: true,此時就能展現karma的自動化測試了，現在随意的修改監控檔案裡面的js，karma會實時的傳回測試結果，至此，大功告成。這裡是相關代碼