使用CI、headless Browser、mocha对前端代码进行测试

时间 2019-11-09

标签使用 headless browser mocha 前端代码进行测试繁體版

原文原文链接

什么是CI

CI 提供的是持续集成服务（Continuous Integration，简称 CI）。持续集成指的是只要代码有变动，就自动运行构建和测试，反馈运行结果。

什么是headless Browser

headless Browser 中文翻译，无头浏览器。是一种没有界面的浏览器，能够在命令窗口中被运行。

什么是mocha

☕️ Simple, flexible, fun JavaScript test framework for Node.js & The Browser ☕️
是一种能够运行在浏览器以及nodejs 环境的前端测试框架

为何要编写测试代码

对于迭代需求，咱们人类编写的代码，只能保证在当前事件节点的正确性，随着事件的推移，代码的变更，以及人为关系。咱们没法保证以前的逻辑彻底符合曾经的要求，这时候咱们就须要编写测试代码对功能点进行测试。
测试不是一次性的，而是持续的，永久的。javascript

对于开源框架而言，测试的覆盖面积更表明了框架的可靠性；也能使用自动化测试更好的约束贡献者提交的PRcss

开始使用mocha 对代码进行测试

首先呢，我要开始编写一个add.js含有一个方法add，这个方法我但愿获取 a+b 的值是一个Numberhtml

function return(a,b){
    reutnr a+b
}

好的如今我能够对这个方法进行测试了前端

增长一个用于测试index.html(为何要新增一个html呢，由于有些js只能运行在浏览器中，若是你的代码彻底可使用node进行测试，就不须要使用无头浏览器直接使用node 测试就能够了)java

<!DOCTYPE html>
<html>
<head>
    <title>Mocha Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引用mocha css -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/mocha/5.2.0/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<!-- 引用chai.js chai.js是一个断言工具库 -->
<script src="http://www.chaijs.com/chai.js"></script>
<!-- 引用mocha.js -->
<script src="https://cdn.bootcss.com/mocha/5.2.0/mocha.js"></script>
<!-- 引用咱们的功能代码add.js -->
<script src="../add.js"></script>
<!-- 开启bdd  这段代码能够看这里 https://github.com/mochajs/mocha/issues/2719 -->
<script>mocha.setup('bdd');</script>
<!-- 引用咱们的测试代码test.js -->
<script src="test.js"></script>
<script>
  mocha.run();
</script>
</body>
</html>

编写 test.jsnode

chai.expect是一个chai.js的断言方法，若是出现问题，则会抛出一个异常文档地址 http://www.chaijs.com/
describe 是mocha的测试取款，每个it都会执行一个测试用例git

var expect = chai.expect;

describe('ADD.JS TEST', function() {
  it('add(1,1)', function() {
    expect(add(1,1)).to.equal(2)
  });
})

如今咱们就能够直接运行index.html查看效果了，固然能够开启一个http服务器查看，可使用http-server快速开启一个http服务。github

在浏览器运行会出现如下提示，表示测试经过chrome

若是想要添加更多测试用例能够继续添加更多的测试代码。shell

接下来

很显然，咱们在持续编写add.js的时候，并不肯意每次都打开网页去运行并查看代码测试状况。

这时候，headless要开始大展拳脚了。

使用mocha-chrome 直接在命令行运行mocha测试用例。mocha-chrome是一个能够在命令行对mocha页面进行测试的框架。它能够将测试结果展示在控制台。

npm init 
...
npm i mocha-chrome --save-dev

修改package.json增长

"scripts":{
    "test": "mocha-chrome ./test-some/index.html"
  }

调用命令

npm test

这时候，正确的提示会出如今控制台中

项目地址https://github.com/channg/ci-...

这时候，当咱们测试项目的时候就没必要须打开浏览器去检查代码是否经过验证了，只要输入npm test就能够在控制台看到效果，是否是变得很轻松了呢。

继续

当咱们测试用例过长，占用时间过多，或者须要其余前置操做，或者须要测试多个版本，多个系统的兼容性。咱们应该如何作呢。很明显，要使用CI。

因此，咱们并不想每次在本地进行测试，这里咱们将要使用travis ci。

关于travos ci咱们能够阅读阮一峰的博文

在项目根目录建立.travis.yml
内容以下。

sudo: required
language: node_js
node_js:
  - "8"
  - "9"

当你在travos ci开启了repository you want to build按钮的时候。每次项目的提交就会触发ci的构建。

并且你能够生成github小图标放在项目的readme中，好比说这个是否是很酷。

点击这个小徽章，你就能够查看个人项目在ci构建的过程。

查看travis ci 的文档，去获取更多的资料 https://docs.travis-ci.com/

结束

基本的测试方法你已经掌握了，如今能够去了解更多了，若是有问题，能够查看个人项目进行对比
https://github.com/channg/ci-...

更多资源