Webpack单元测试,e2e测试

发表于:2018-8-28 15:01

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:小龙女先生    来源:博客园

分享:
  一、单元测试
  实现单元测试框架的搭建、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

   上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
100家互联网大公司java笔试题汇总,填问卷领取~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号