angular测试

npm install angular-mocks  --save-dev#安装node-sass需要淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install node-sass resolve-url-loader sass-loader --save-devnpm install jasmine-core jasmine karma karma-jasmine -gnpm install karma-chrome-launcher --save-devjasmine-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