Web前端自动化单元测试

单元测试的很多，比如辅助开发，预测开发，提高模块可靠性等。

还可以提高项目开发思路。

前提需求

本文基于nodejs环境，使用jasmine参数框架和 Karma机器人。

nodejs:不多说，很突出。

https://nodejs.org

jasmine:老牌js测试框架，负责单元测试，测试脚本都是根据它的规范进行编写。

https://github.com/jasmine/jasmine.github.io

Karma:负责自动化执行测试脚本，批量处理脚本。

http://karma-runner.github.io

安装环境

1. 初始化npm

npm init

2. 安装Karma

npm install karma --save-dev

3. 全局安装karma-cli，方便调用karma

npm install karma-cli -g

4. 安装jasmine框架支持

npm install karma-jasmine --save-dev

5. 安装jasmine-core框架核心

npm install jasmine-core --save-dev

6. 安装chrome浏览器控制器

npm install karma-chrome-launcher --save-dev

7. 安装执行结果插件karma-jasmine-html-reporter，插件有很多，不一定安装该插件

npm install karma-mocha-reporter --save-dev
npm install karma-jasmine-html-reporter --save-dev

karma 参数配置

1. 初始化karma，生成karma.conf.js文件，该文件是karma配置文件

karma init

2. 执行后，终端会提示一些信息，一路回车确认即可。

3. 配置karma参数，修改karma.conf.js文件

// Karma configuration
// Generated on Fri Mar 22 2019 10:58:15 GMT+0800 (China Standard Time)module.exports = function (config) {config.set({// karma 传参数client: {// jasmine 框架参数jasmine: {// 随机测试关闭,改为顺序模式random: false,},// 不清除结果,直接在浏览器中显示结果// karma-jasmine-html-reporter 插件参数clearContext: false},// 基础路径，用在files，exclude属性上basePath: './VC',// 测试框架// available frameworks: https://npmjs.org/browse/keyword/karma-adapterframeworks: ['jasmine'],// 需要加载到浏览器的文件列表// 比如框架文件,依赖文件,插件// 被测试的脚本文件 和 对应的测试规范脚本文件files: [//包含文件的详细模式。类似地，可以使用其他选项// 框架文件,依赖文件,插件 停止监控{pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/angular.min.js', watched: false },{pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/*.min.js', watched: false },// 此文件将根据磁盘的要求提供，观察者将忽略该文件{pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/*.map', included: false, served: true, watched: false, nocache: true },{pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/angular-mocks.js', watched: false },{pattern: 'PC/Public/Common/JS/ocLazyLoad/1.1.0/ocLazyLoad.min.js', watched: false },{pattern: 'PC/Public/Common/JS/layui/2.4.5/layui.js', watched: false },{pattern: 'PC/Public/Common/JS/layui/2.4.5/lay/modules/*.js', watched: false },{pattern: 'PC/Public/Common/JS/layui/2.4.5/css/**/*.css', watched: false },// 自定义类包文件,服务文件,'PC/Public/Common/JS/CommonJS.js','PC/Public/Common/JS/CommonJS.spec.js','PC/Public/Common/JS/Service/*.js','PC/Public/Common/JS/Service/*/*.js',// 加载所有脚本文件'PC/Public/Template/**/*.js',// 加载所有 *.spec.js 结尾对测试规范文件'PC/Public/Template/**/*.spec.js'],// 排除的文件列表exclude: [],// 在浏览器使用之前处理匹配的文件// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessorpreprocessors: {},// 使用测试结果报告者// possible values: 'dots', 'progress'// available reporters: https://npmjs.org/browse/keyword/karma-reporterreporters: ['mocha','kjhtml'],// web server portport: 9876,// 启用或禁用输出报告或者日志中的颜色colors: true,// level of logging// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUGlogLevel: config.LOG_INFO,// 启用或禁用自动检测文件变化进行测试autoWatch: true,// 测试启动的浏览器// available browser launchers: https://npmjs.org/browse/keyword/karma-launcherbrowsers: ['Chrome'],// 开启或禁用持续集成模式// 设置为true, Karma将打开浏览器，执行测试并最后退出singleRun: false,// 并发级别（启动的浏览器数）// how many browser should be started simultaneousconcurrency: Infinity,// 依赖插件plugins: ['karma-chrome-launcher','karma-jasmine','karma-mocha-reporter','karma-jasmine-html-reporter'],})
}

执行测试

1. 执行代码

karma start karma.conf.js