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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏性能与架构

Redis 主从复制原理

Redis的复制功能分为同步(sync)和命令传播(commandpropagate)两个操作 同步 从服务器对主服务器的同步操作需要通过向主服务器发送SYNC...

3537
来自专栏酷玩时刻

Android依赖管理与私服搭建

*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 *本篇文章视频 慕课网之Android依赖管理与私服搭建

1625
来自专栏owent

LLVM + Clang + Libcxx + Libcxxabi 工具链编译

LLVM和Clang工具链的生成配置文件写得比较搓,所以略微麻烦,另外这个脚本没有经过多环境测试,不保证在其他Linux发行版里正常使用。

831
来自专栏耕耘实录

Linux(RHEL7及CentOS7)下DNS服务器的搭建与配置

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢。

3924
来自专栏肖洒的博客

GitHub Pages自定义域名

最早用GitHub Pages做个人博客,初始的二级域名就是https://x-nicolo.github.io/,之后用了一个免费顶级域名,在Freenom ...

3465
来自专栏后端云

cyborg agent

Cyborg的需要一下功能:包括在计算机节点上管理代理,定位加速器,监控加速器状态和协调加速器驱动程序。

1475
来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

35213
来自专栏Hadoop实操

由MasterProcWals状态日志过多导致的HBase Master重启失败问题

本文主要讲述如何解决由MasterProcWals状态日志过多导致的HBase Master重启失败问题。

1.2K5
来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

3836
来自专栏JetpropelledSnake

SNMP学习笔记之Linux下安装和配置SNMP

  选择一个SNMP版本,比如5.7.1,下载地址如下:http://sourceforge.net/projects/net-snmp/files/net-s...

2403

扫码关注云+社区

领取腾讯云代金券