Web前端自动化单元测试

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-adapter
        frameworks: ['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-preprocessor
        preprocessors: {},


        // 使用测试结果报告者
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['mocha','kjhtml'],


        // web server port
        port: 9876,


        // 启用或禁用输出报告或者日志中的颜色
        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,


        // 启用或禁用自动检测文件变化进行测试
        autoWatch: true,


        // 测试启动的浏览器
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],


        // 开启或禁用持续集成模式
        // 设置为true, Karma将打开浏览器，执行测试并最后退出
        singleRun: false,

        // 并发级别（启动的浏览器数）
        // how many browser should be started simultaneous
        concurrency: Infinity,

        // 依赖插件
        plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-mocha-reporter',
            'karma-jasmine-html-reporter'
        ],


    })
}

执行测试

1. 执行代码

karma start karma.conf.js