angularjs unit test
使用技术:karma + jasmine
1.安装node npm
2.进入目录,npm init生成package.json
3.安装必要的包karma、karma-jasmine、karma-chrome-launcher、jasmine-core、angular、angular-mocks
使用命令:npm install -g 包名 --save-dev
权限不够的情况下加上权限:mac下 sudo npm install -g 包名 --save-dev
4.测试基础函数
1)在项目中创建js文件test.js、test2.js添加需要测试的函数
2)创建测试用例
在测试用例中分别写上测试方法,对在test、test2中的函数进行测试,测试函数返回值和预期结果是否一致。
3)使用karma init命令生成karma配置文件,过程中可采用回车加载默认配置,生成karma.conf.js文件、内容大概如下,其中files为需要加载的文件
// Karma configuration
// Generated on Thu Jan 09 2020 11:23:53 GMT+0800 (China Standard Time)
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', //1.4.7
'./node_modules/angular-mocks/angular-mocks.js', //1.4.7 '*.js',
],
// list of files / patterns to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors:https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters:https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port:9876,
// enable / disable colors in the output (reporters and logs)
colors:true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
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,
// Concurrency level
// how many browser should be started simultaneous
concurrency:Infinity
})
}
4)在配置文件修改自己需要的设置,主要修改基本路径(basepath)以及所需加载的文件(files)
5)开始测试
输入命令,karma start会自动开启谷歌浏览器
点击debug按钮并打开f12控制台会看到如下结果,代表测试成功。
修改测试用例中下列地方:
重新进行测试会看到如下结果:
结果表示:test1、test2函数均测试失败
test3函数测试成功
5、测试angular中的controller
新增一个js文件controller.js,写上一个简单的controller
新增一个js文件jasmineTestCtrl.js如下
将文件加入karma的配置当中,karma.conf.js > files
使用karma start进行测试,测试结果如下:
结果controller中的$scope.notes.length属性测试成功
$scope.name属性测试失败
6.测试项目中的controller,需要配置的东西比较多,暂时会发生一些错误信息,还需要进一步研究。
7.解决在6中碰到的问题
在karma.conf.js中配置依赖的provider
clientId这种可以使用下面的方式来配置:
配置完成后重新测试:结果如下图:
测试成功。