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

idisfkj 发布于2019-05-29 17:06 / 1210人阅读

摘要：持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。我们无法保证之前的逻辑完全符合曾经的要求，这时候我们就需要编写测试代码对功能点进行测试。使用直接在命令行运行测试用例。是一个可以在命令行对页面进行测试的框架。

什么是CI

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

什么是headless Browser

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

什么是mocha

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

为什么要编写测试代码

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

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

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

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

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

好的现在我可以对这个方法进行测试了

增加一个用于测试index.html(为什么要新增一个html呢，因为有些js只能运行在浏览器中，如果你的代码完全可以使用node进行测试，就不需要使用无头浏览器直接使用node 测试就可以了)




    Mocha Test

编写 test.js

chai.expect是一个chai.js的断言方法，如果出现问题，则会抛出一个异常文档地址 http://www.chaijs.com/

describe 是mocha的测试取款，每一个it都会执行一个测试用例

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服务。

在浏览器运行会出现以下提示，表示测试通过

如果想要添加更多测试用例可以继续添加更多的测试代码。

接下来

很显然，我们在持续编写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-...

更多资源

https://docs.travis-ci.com/

http://www.chaijs.com/

https://mochajs.org/

https://github.com/shellscape...

云服务器 GPU云服务器对php代码进行编码单元测试-mocha-jasmine 对数据进行分析对邮箱空间进行清理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/8828.html

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

摘要：持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。我们无法保证之前的逻辑完全符合曾经的要求，这时候我们就需要编写测试代码对功能点进行测试。使用直接在命令行运行测试用例。是一个可以在命令行对页面进行测试的框架。什么是CI CI 提供的是持续集成服务（Continuous Integration，简称 CI）。持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结...

fizz 2019-08-22 18:49 评论0 收藏0
持续集成之测试篇

摘要：持续集成单元测试是开源的一个基于的测试执行过程管理工具。表示测试套件，是一序列相关程序的测试表示单元测试，也就是测试的最小单位。持续集成单元测试（unit） karma Karma 是Google开源的一个基于Node.js 的 JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到 CI （Continuous in...

GraphQuery 2019-08-23 18:13 评论0 收藏0
代码测试：项目稳健的有力保证

摘要：懒惰，是促使人类科技发展的重要因素。就笔者了解，目前前端领域比较流行的单元测试框架有等等。。什么你想打开控制台粘帖代码执行为了拯救你于无尽的加班测试中，是时候推荐你接入使用了。懒惰，是促使人类科技发展的重要因素。我们告别刀耕火种的时代，正是因为人们不断地通过发明工具和优化精简手动的流程来实现效率的提升，让人们能专注于自己专业的领域，其他的事情交给机械去处理。而同样在前端的领域，我们也...

ASCH 2019-08-26 11:35 评论0 收藏0
代码测试：项目稳健的有力保证

摘要：懒惰，是促使人类科技发展的重要因素。就笔者了解，目前前端领域比较流行的单元测试框架有等等。。什么你想打开控制台粘帖代码执行为了拯救你于无尽的加班测试中，是时候推荐你接入使用了。懒惰，是促使人类科技发展的重要因素。我们告别刀耕火种的时代，正是因为人们不断地通过发明工具和优化精简手动的流程来实现效率的提升，让人们能专注于自己专业的领域，其他的事情交给机械去处理。而同样在前端的领域，我们也...

anquan 2019-05-29 17:04 评论0 收藏0