浅谈下关于前端的持续集成

Author Avatar
Crown 11月 29, 2017
  • 在其它设备中阅读本文章

概念

Continuous integration (持续集成, 简称 CI) : 开发代码频繁地合并进主干, 始终保持可发布状态的这个过程.
优点:

  • 快速发现错误
  • 防止分支大幅偏离主干
  • 让产品可以快速迭代,同时还能保持高质量

流程

  1. 本地开发(developing)
  2. 静态代码检查(linting)
  3. 单元测试(testing)
  4. 合并进入主干(merging)
  5. 自动构建(building)
  6. 自动发布(publishing)

静态代码检查

好处:

  • 发现语法错误
  • 发现风格错误
  • 自动纠正错误

工具推荐:

  • ES5/ES6: 使用 ESLint即可
  • TypeScript: 使用TSLint

测试

为什么要写测试?

测试是提高代码质量、降低错误的最好方法之一, 而且对于长期维护的项目, 测试可以减少投入时间, 减轻维护难度.

以测试为导向的开发模式

  • TDD:测试驱动的开发 (Test-Driven Development), 基于开发者角度,重点测试函数的输入输出
  • BDD:行为驱动的开发 (Behavior-Driven Development), 基于使用者角度,重点测试对用户行为的反应

它们都要求先写测试,再写代码。

测试的类型

  • 单元测试(unit testing)
  • 功能测试(feature testing)
  • 集成测试(integration testing)
  • 端对端测试 (End-to-End testing)

单元测试

  • Jest
  • Karma + Mocha

前端的功能测试

功能测试必须在真正浏览器做,现在有四种方法。

  • 使用本机安装的浏览器
  • 使用 Selenium Driver
  • 使用 Headless Chrome
  • 使用 Electron

其中比较好用的推荐nightmarejs.org: 使用 Electron 模拟真实浏览器环境, 而且它提供大量人性化、易用的 API.

移动平台的自动化测试: Appium

  • 基于 WebDriver
  • 采用 客户端/服务器架构
  • 可以在模拟器运行,也可以在真机运行

其中Appium测试流程

  1. WebDriver 客户端发出测试请求和测试内容
  2. Appium 服务器转发到相应的测试运行器(Driver)
  3. iOS 设备是 UIAutomation,安卓设备是 UiAutomator
  4. 测试运行器将运行结果,返回给 Appium

持续集成平台

持续集成服务平台, 其中最出名的就是Travis CI(可以免费使用一个月), 还有一个可以自己搭建在本地的持续集成平台Jenkins

端对端测试

  • Nightwatch

Benchmark(基准分析)

关于这个概念的具体解释大家看这个就行了 — 你不懂JS: 异步与性能

性能对比测试框架选择

  • benchmark.js: 很多人的选择, 到目前为止的维护情况,以及权威度都很好, 但是我觉得从编写测试用例的语法和显示的样式直观度上来说, 不如Matcha,所以这里我选择的Matcha
  • Matcha: 最近的一次更新都是两年前了, 到时我看node.jsalsotang写的这个项目fast-js, 用的是这个测试框架, 所以这两个的选择大家就仁者见仁, 智者见智了, 其他更多相似的也行

线上测试


参考教程:


随着我自己个人的技术水平的提高,我也会尽最大力量去原创一些有价值有内容的文章出来。在此期间我的文章会同步更新在以下地方,欢迎大家在自己长逛的网站中关注或者star我的Github来了解我的最新消息!!!推荐大家收藏关注我的博客网站crowncj.com,因为我的最新更改与文章只会在这里更新,其他地方的文章可能会存在更新不及时或者忘记更新等问题。

未经允许,不准转载