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