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这种可以使用下面的方式来配置:
????配置完成后重新测试:结果如下图:
测试成功。