VUE+jtest的组件单元测试

会议讨论结构

• 代码测试用于基础组件库，类似于element
• 业务层的测试可以对部分需要长期维护的代码进行测试

VUE的脚手架本身自带单元测试功能，可以选择karma和jtest两种，本文主要是测试了两种方式的不同。在讲到前端测试的时候我们需要区分以下两种测试概念：

• e2e测试：测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。这种测试依赖于我们可以通过代理或者直接控制浏览器本身，来发起用户操作，来检验当前页面的链接，某个元素是否可用。 这个我选择了phantomJS和nightwatchJS来介绍，phantomJS本身是exe文件，不过通过nodejs包装提供了npm包，有npm插件，nightwatchJS是一个通过nodejs链接Selenium和chromedriver
• unit测试：单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。

接下来通过几个demo看看具体的实现是怎么样子的。

phantomJS

这个是提供了针对各个浏览器的API

下载软件，安装环境变量

• 截屏 获取dom元素 检测dom元素的属性
• github.com/ariya/phant…
• phantomjs rasterize.js https://www.xinhehui.com "a.png
• 网络测速,网络访问,注入JS运行
• phantomjs loadspeed.js https://www.xinhehui.com

var page = require('webpage').create();
page.open('http://example.com', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('example.png');
  }
  phantom.exit();
});
复制代码

Nightwatch

Nightwatch是nodejs驱动的e2e测试框架，自带断言库，可以编写测试脚本

Node.js powered End-to-End testing framework

e2e测试框架，based on Node.js,Web应用E2E（End To End）测试是模拟用户进行页面操作，通过来判断页面状态的变化，从而检查功能是否运行正常的测试方法

• 并行处理
• 使用W3C WebDriver API ，之前基于Selenium API
• 基于Chai断言库
• 部署有点繁琐，需要下载selenium-server-standalone-3.8.1.jar，因为它基于selenium的，chromedriver.exe，这个是根据自己需要测试用的浏览器来选择，然后下载对应的浏览器模块
• 弄好了之后，就是挨个启动，弄个配置

require('babel-register')
var config = require('../../config')

// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
  src_folders: ['test/e2e/specs'],
  output_folder: 'test/e2e/reports',
  custom_assertions_path: ['test/e2e/custom-assertions'],

  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1