此篇文章是续 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

Webpack单元测试,e2e测试的更多相关文章

  1. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  2. e2e 测试 出现的错误

    每次开始学习vue的新知识时,总在环境这一块出现很多坑.这次我来记录一下,我在搭建vue e2e测试框架是踏过的坑吧. 我们都只知道,使用vue init webpack 项目名字<项目名字不能 ...

  3. e2e测试框架之Cypress

    谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...

  4. e2e 测试(1)

    距离上一随笔,已经有一个月没有没写.到今天,刚刚好好,是学习e2e测试的一个月.今天有点时间可以总结一下这个月来的收获. 1.搭建e2e的测试环境 我是使用 Vue 构建项目,所以我也是通过Vue-c ...

  5. Node.js躬行记(11)——E2E测试

    Cypress是为现代网络构建的前端测试工具,解决了开发人员和 QA 工程师在测试应用程序时面临的关键痛点. 在这个测试框架中包含了E2E测试.集成测试和单元测试(内嵌了Mocha),我们需要的是它的 ...

  6. 如何在单元测试中测试异步函数,block回调这种

    大概有四种方法: runloop 阻塞主进程等待结果 semphaore 阻塞主进程等待结果 使用XCTestExpectation 阻塞主线程等待(我用这个,xcode自带的,为啥不用) 使用第三方 ...

  7. E2E测试框架

    1. 目前E2E测试工具有哪些? 项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 41427 nightma ...

  8. UT, FT ,E2E 测试的意思

    前端实现自动化就要借助到unit和e2e端到端测试了 一.unit测试(FT 就是Fucntion Test 功能测试,  注意不是: funciton函数 ...fucntion功能   不一样哦  ...

  9. VS2015+NUnit+OpenCover 完成单元测试代码覆盖率测试

    1.VS2015+NUnit+OpenCover 完成单元测试代码覆盖率测试 https://download.csdn.net/download/qq_39441918/10522539 2.*注意 ...

随机推荐

  1. 基于Ubuntu 14.04构建mysql5.6 Docker镜像

    我们的目的是创建一个基于Ubuntu 14.04 的MySQL的 Docker Image,并且在新创建出来的容器里自动启动MySQL服务接受外部连接 步骤: 1. 首先创建一个目录并在目录下创建一个 ...

  2. Codeforces Round #257 (Div. 1)A~C(DIV.2-C~E)题解

    今天老师(orz sansirowaltz)让我们做了很久之前的一场Codeforces Round #257 (Div. 1),这里给出A~C的题解,对应DIV2的C~E. A.Jzzhu and ...

  3. POI-处理大Excel文件(xls)

    最近需要处理一个比较大的excel文件,但是poi在处理文件时会抛出OOM导致程序崩溃,查看官方文档看到可以以流式的方式读取excel避免读取大文件时的OOM.本文主要记述xls的处理. 环境模拟 先 ...

  4. [html5] 学习笔记- 编辑API之Range对象(二)

    本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...

  5. 一个基于node 的小demo

    首先我们新建一个文件夹  demo-test-node-1 目录目录如下 -- blog_recents.js --template.html --titles.jspn 首先我们新建一个 templ ...

  6. Javascript前端面试题

    在网上看到了一些Javascript的面试题就整理了下来,后续看到再继续补充. 面试题按类型来分,主要涉及到"技术"与"非技术"两大类,技术类别下涉及到的子类别 ...

  7. Spark RDD编程核心

    一句话说,在Spark中对数据的操作其实就是对RDD的操作,而对RDD的操作不外乎创建.转换.调用求值. 什么是RDD RDD(Resilient Distributed Dataset),弹性分布式 ...

  8. gulp+browser-sync使用方法

    gulp简介 gulp是基于流的自动化构建工具,也就是说gulp是通过操作流实现自动编译,压缩文件等操作的.这得益于node.js对流的支持,当然gulp.js和构建的任务文件都是JavaScript ...

  9. 远程线程注入方法CreateRemoteThread

    最近在整理学习Windows注入方面的知识,这个远程注入前面早写过,现在看看人家博客的理解整理,整理, 需要源码的可以到我的github上下载. 链接是  https://github.com/Ars ...

  10. 了解 : angular translate 和 google translate 和 微软 translate

    https://cloud.google.com/translate/v2/pricing google translate 一百万个字是$20,如果少过就得付$10,完全没有免费哦- 每天limit ...