前端测试入门

前端实现自动化就要借助到unit和e2e测试了

（作者：我不叫奇奇 链接：https://www.jianshu.com/p/ffd6d319f05b）

• unit测试：站在程序员的角度测试 

unit测试是把代码看成是一个个的组件。从而实现每一个组件的单独测试，测试内容主要是组件内每一个函数的返回结果是不是和期望值一样。 
例如：

const compare = (a,b) => a>b?a:b 
    对compare 这个函数进行测试：
    expect(compare(1,2)).to.equal(2) //ok 
    expect(compare(2,1)).to.equal(1) //ok 

而代码覆盖率是指代码中每一个函数的每一中情况的测试情况，上述测试的代码覆盖率是100%

const compare = (a,b) => a>b?a:b 
对compare 这个函数进行测试 
expect(compare(2,1)).to.equal(1) //ok 
这样代码覆盖率是50%，因为else情况没有测试到

• e2e测试：站在用户角度的测试 
  e2e测试是把我们的程序堪称是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

两者的存在都是很有意义的。 
unit测试是程序员写好自己的逻辑后可以很容易的测试自己的逻辑返回的是不是都正确。 
e2e代码是测试所有的需求是不是都可以正确的完成，而且最终要的是在代码重构，js改动很多之后，需要对需求进行测试的时候测试代码是不需要改变的，你也不用担心在重构后不能达到客户的需求。

Unit测试：

1.Mocha

Mocha是一个能够运行在Node和浏览器中的多功能的JavaScript测试框架，它让异步测试简单且有趣。Mocha连续地运行测试，并给出灵活而精确的报告，同时能够将错误精确地映射到测试用例上。

特性：支持浏览器；支持简单异步，包括promise；测试覆盖率报告；支持字符串比较；提供JavaScript API来运行测试；为持续集成等需求提供适当的退出状态；non-ttys 自动检测和禁用颜色；异步测试超时等

部署vue环境：

1. 安装vue-cli脚手架: npm install -g vue-cli
2. 新建一个vue项目，vue init webpack projectName(文件名不能有大写字母，否则会报错)；默认确认下载unit（默认配置是mocha）和e2etest（默认配置是nightWatch）,配置完成后编写一个小demo；
3. 编写测试用例

下面是测试用例的例子：

  测试完成，成功

e2e测试：

1.  先检查是否安装了jdk
2.  检查是否按照了selenium 和chromedrive，其中chromedrive要安装和谷歌浏览器对应版本的chromedrive，可参考链接：https://www.jianshu.com/p/4d60032c5b08;

或者：npm install selenium             npm install chromedrive

1.  nightwatch的使用 nightwatch.config.js配置文件，runner.js会自动找同级这个配置文件来获取配置信息。也可以手动使用–config来制定配置文件的相对路径。

配置文件分为基本配置、selenium配置和测试配置三个部分。基本配置依次为测试用例源文件路径、输出路径、基础指令路径、全局配置路径等。selenium配置包括是否开启、路径、端口等，cli_args指定将要运行的webdriver。测试配置制定测试时各个环境的设置，默认是default，通过–env加环境名可以指定配置的任意环境。

只要把测试用例放在对应的文件夹使用module.exports暴露一个对象，其中key是测试名，value是一个接受browser实例的函数，在函数中进行断言，nightwatch就会自动依次调用文件夹中的测试用例。

至此，测试用例编写完成，结果如下（两个测试用例）。