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',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',() => { 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']
}
}
}]
}
},'karma-jasmine',"karma-webpack","karma-sourcemap-loader"
]
})
}
启动karma单元测试
karma start karma.conf.js
