Webpack单元测试，e2e测试

此篇文章是续 webpack多入口文件、热更新等体验，主要说明单元测试与e2e测试的基本配置以及相关应用。

一、单元测试

实现单元测试框架的搭建、es6语法的应用、以及测试覆盖率的引入。

1. 需要安装的项目：

• jasmine：单元测试库
• karma：测试框架，配置选择phantomjs浏览器
• karma-jasmine：操作jasmine的插件
• karma-webpack：webpack与karma的连接
• mock：用于数据模拟，用'npm install --save-dev mockjs'安装
• karma-coverage：测试覆盖率报表
• karma-spec-reporter：命令行输出测试用户的运行结果
• babel-plugin-istanbul: 测试覆盖率显示未通过webpack打包的源码

       由于babel-plugin-istanbul是bable的一个插件，所以需要修改.babelrc文件，代码如下:

{
    "presets":["es2015","stage-2"],
    "plugins": ["istanbul"] //这句话是重点
}

2. 配置参数及运行命令：

• 运行命令 .\node_modules\.bin\karma start .\test\karma.conf.js

karma命令为私有安装，karma配置文件指定在test文件夹下。

• 配置文件如下：

module.exports = function(config) {
  config.set({

    // 基路径：表示karma从那个位置开始找文件
    basePath: '',


    // 框架
    frameworks: ['jasmine'],


    // 测试的入口文件
    files: ['../test/unit/index.js'],


    // 排除的文件，可以是正则
    exclude: [
    ],


    // 对指定文件的preprocess(预处理)
    preprocessors: {
      '../test/unit/index.js': ['webpack', 'sourcemap'],
      '../src/**/*.js': ['webpack','sourcemap', 'coverage', 'coverage'] //表示那些代码需要生成测试覆盖率报表
    },


    // 结果报表
    reporters: ['progress'],


    // 服务器端口
    port: 9876,


    // 报表中是否有颜色区分
    colors: true,


    // 输出的日志级别
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // 文件变化是否自动刷新
    autoWatch: true,


    // 测试的测试器环境
    browsers: ['PhantomJS'],


    // 是否依附浏览器运行
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // 并发个数，同时支持在多少个浏览器运行
    // how many browser should be started simultaneous
    concurrency: Infinity,

    //webpack配置
    webpack: webpackConfig,
    
    //代码覆盖率配置节点
    coverageReporter:{
      dir: './converage',
      reporters:[
        { type: 'lcov', subdir: '.' },
        {type: 'text-summary'}
      ],

    }
  })
}

• *.spec.js(测试代码)如下：

import {init} from '../../src/ma'
import data from '../mocks/demo'

describe('demo_spec', function(){
    it('body',() => {
        init();
        let button = document.querySelector('.btn');
        button.textContent = data.btnName;
        expect(button.textContent).toEqual(data.btnName);
    })
});

src/ma:会向dom插件一个button标签

• mocks/demo.js的代码：

import Mock from 'mockjs';
var template = {
    'title': 'Demo01',
    'btnName|1-3': '*'
} 
export default Mock.mock(template);

mocks/demo：用mockjs模拟的一些数据

3. 运行结果

二、e2e(模拟用户行为的测试)

1. 需要安装的npm包

• selenium-server：webdriver测试服务器的nodejs搭建
• nightwatch：对selenium-server的包装，简化其配置
• chromedriver：selenium的chrome测试环境插件，如果是firefox、ie等都需要重新下测试环境插件。

2. 原理简要说明

     selenium-server由于浏览器同源策略(域名、协议、端口相同才是同源，如不明白可以baidu)的限制，selenimue就以代理的方式进行目标站点的测试(也就是测试环境跑的浏览器连接是selenium-server产生的代理服务器)，selenium-server代理服务器=selenium核心Js + 测试目标站点(proxy)。

3. 相关代码展示

• nightwatch配置参数：

module.exports = {
    "src_folders": ["test/e2e/specs"],
    "selenium":{
        "start_process":true,
        "server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-3.3.1.jar",
        "host": "127.0.0.1",
        "port": 9538,
        "cli_args":{
            "webdriver.chrome.driver": require('chromedriver').path
        }
    },
    "test_settings":{
        "default": {
            "selenium_port": 9538,
            "selenium-host": "127.0.0.1",
            "silent": true,
            "globals":{
                "devServerURL": "http://localhost:8080"
            }
        },
        "chrome":{
            "desiredCapabilities": {
                "browserName": "chrome",
                "javascriptEnabled": true,
                "acceptSslCerts": true
            }            
        }
    }
}

• selenium.server_path指向为selenium的jar包
• selenium.cli_args：配置运行时的必要参数，webdriver.chrome.driver指定适合selenium的chrome安装位置
• test.default.globals.devServerURL：需要测试的目标站点，此站点必须处于活动状态。
• 测试用例代码：

module.exports = {
    "default e2e": function(browser){
        var devServer = browser.globals.devServerURL;
        var driver = browser.url(devServer)
        .waitForElementVisible(".btn", 5000)
        .setValue('.btn', 'e2e产生的内容');
        browser.getText('.btn', function(result){ 
            console.log(result.value);
        });
        browser.end();
    }
}

nightwatch相关api可以参考此链接

• 运行e2e的命令 .\node_modules\.bin\nightwatch --config ".\test\e2e\runner.js" --env chrome