angular测试

npm install angular-mocks  --save-dev
#安装node-sass需要淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass resolve-url-loader sass-loader --save-dev
npm install jasmine-core jasmine karma karma-jasmine -g
npm install karma-chrome-launcher --save-dev
jasmine-core: javascript单元测试框架；
karma: 模拟javascript脚本在各种浏览器执行的工具；
karma-chrome-launcher: 在chrome浏览器执行的工具；
karma-jasmine: jasmine-core在karma中的适配器；
karma-junit-reporter: 生成junit报告；
protractor: E2E测试框架

编辑package.json

"scripts": {
  "test": "karma start karma.conf.js"
}

生成karma.conf.js文件

karma init

// Karma configuration
// Generated on Thu May 18 2017 01:24:08 GMT+0800 (CST)

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: [
      "node_modules/angular/angular.js",
      "node_modules/angular-mocks/angular-mocks.js",
      "app/index.js",
      "app/index_test.js"
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    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,
    plugins: [
        'karma-chrome-launcher',
        'karma-jasmine'
    ],
  })
}

app/index.js

var simpleModule = angular.module('simpleModule',[]);//定义一个angular模块
simpleModule.controller("simpleController", function($scope){
  $scope.sumData = function(str1, str2){
    return str1 + str2;
  }
});

app/index_test.js

describe('simpleModule', () => {
  describe('simpleController', () => {
    beforeEach(module('simpleModule'));

    it("sumData 测试", inject(function($controller){
      var $scope = {};
      var indexController = $controller("simpleController", {$scope: $scope});
      expect($scope.sumData(2, 3)).toBe(5);
    }))
  });
});

启动karma单元测试

karma start karma.conf.js

karma + webpack

如果用到了ES6所以在测试前需要把代码编译

npm install webpack karma-webpack karma-sourcemap-loader -g

app/index.js

var simpleModule = angular.module('simpleModule',[]);//定义一个angular模块
simpleModule.controller("simpleController", function($scope){
  $scope.sumData = function(str1, str2){
    return str1 + str2;
  }
});
export default simpleModule;

app/index_test.js

import angular from 'angular';
import mocks from 'angular-mocks';
import simpleModule from './index.js';
describe('simpleModule', () => {
  describe('simpleController', () => {

    let $scope = {};
    beforeEach(angular.mock.module('simpleModule'));
    beforeEach(angular.mock.inject(function($rootScope, $controller){
      $scope = $rootScope.$new();
      $controller("simpleController", {$scope: $scope});
    }));
    it("sumData 测试", function(){
      expect($scope.sumData(2, 3)).toBe(5)
    })
  });
});

编辑karma.conf.js

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

    // list of files / patterns to load in the browser
    files: [
      'app/*_test.js'
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'app/*_test.js': ['webpack', 'sourcemap']
    },

    webpack: {
      devtool: 'inline-source-map',
      module: {
        rules: [{
              test: /\.js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['env']
                }
              }
            }]
            }
    },
    plugins: [
        'karma-chrome-launcher',
        'karma-jasmine',
        "karma-webpack",
        "karma-sourcemap-loader"
    ]
  })
}

启动karma单元测试

karma start karma.conf.js

参考

• webpack+angular的项目SEED(下)
• karma与webpack结合
• karma-webpack