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