您须要掌握的前端测验“金字塔”

2017/11/24 · JavaScript
· 测试

原版的书文出处:
oschina   

图片 1

若是您正在测量试验前端应用程序,则应该明白前端测验金字塔。

在本文中,大家将看到前端测量试验金字塔是什么样,以及哪些利用它来成立周密的测验套件。

前面三个测量试验金字塔

后边一个测量试验金字塔是叁个前端测量试验套件应该如何构建的结构化表示。

美丽的测量检验套件由单元测量试验,一些快速照相测验和某些端到端(e2e)测验组成。
图片 2

这是测量检验金字塔的改正版本,特定于测量检验前端应用程序。

在那篇小说中,我们将见到种种测量试验项指标轨范。
为此,大家将为示范应用程序创设贰个测验套件。

应用

要详细摸底前端测验金字塔,大家来探问怎样测验叁个 Web 应用。

该行使是三个简易的 modal 应用。 点击壹个开关展开四个 modal ,点击 modal
上的 OK 按钮关闭 modal。

图片 3

大家将从基于组件的框架营造利用。
别担忧细节,大家会维持那几个(详细)的等第。

该行使由多个零部件组成 – 多个 Button 组件,三个 Modal 组件和三个 App
组件。

我们要写的率先个测量检验是单元测量检验。
在前端测量检验金字塔中,半数以上测量检验都以单元测量检验。

单元测量检验

单元测验测量检验的是代码库的单元。

它们平昔调用函数或单元,并保管重回正确的结果。

在大家的应用中,大家的组件是单元。所以大家将为 Button 和 Modal
编写单元测量试验。不供给为大家的施用组件编写测验,因为它未有另外逻辑。

单元测验会浅渲染组件,并预知当大家与它们互相时,它们的一坐一起是理之当然的。

浅渲染代表我们渲染组件一层深度。那样大家得以确认保障只测量试验组件,单元,并不是多少个级其余子组件。

在我们的测验中,大家将触及组件上的操作,并检查组件的展现是否与预期一致。

我们不用瞅着代码。但是我们的机件规格会如下所示:

  • 前端测量试验金字塔。当 displayModal 为 true 时,Modal 有类是活泼的
  • 当 displayModal 为 false 时,Modal 未有类是虎虎有生气的
  • 前端测量试验金字塔。当成功按键被点击时,Modal 调用 toggleModal
  • 前端测量试验金字塔。单击删除开关时,Modal 会调用 toggleModal
  • 当 button 被点击时,button 调用 toggleModal

大家的测验将浅渲染组件,然后检查各样规格的办事。

单元测量试验应该攻陷大家的测量检验套件的多边有以下多少个原因:

单元测量检验比一点也不慢

前端测量试验金字塔。几百个单元测量试验套件能在几秒钟内运营。

那使得单元测量检验对开垦很有用。
当重构代码时,我们得以变动代码,并在尚未中断组件的动静下运营单元测量检验来检查改造。
大家会在几秒钟之内知道我们是或不是破坏了代码,因为里面一个测量检验会失利。

单元测量试验是细颗粒的。

换句话说,他们是老大具体的。

如若贰个单元测量试验失利了,那么那么些测量检验会告诉大家它是如何以及为啥失利的。

单元测量试验能很好地检查大家的应用程序职业的底细。
它们是开荒时最佳的工具,特别是一旦你依据测验驱动的支出。

不过它们不恐怕测验一切。

为了有限支撑我们表现准确的样式,大家还索要选取快速照相测验。

快速照相测验

快速照相测验是测验你的渲染组件的图纸,并将其与组件的从前的图纸举行相比较。

用 JavaScript
编写快速照相测量检验的最棒形式是选择 Jest 。

Jest 不是拍照渲染组件的图片,而是渲染组件标识的快速照相。 这使得 Jest
快速照相测量试验比古板快速照相测量试验快得多。

要在 Jest 中注册快速照相测量检验,供给加上如下代码:

const renderedMarkup = renderToString(ModalComponent)
expect(renderedMarkup).toMatchSnapshot()

1
2
const renderedMarkup = renderToString(ModalComponent)
expect(renderedMarkup).toMatchSnapshot()

假使您注册一个快速照相,Jest 将顾及其余的漫天。
每便运维单元测量检验时,都会再一次生成三个快速照相,并将其与事先的快速照相举办相比。

要是代码退换,Jest 会抛出八个错误,并警告标志已经济体改成。
然后开采者能够手动物检疫查未有类被误删的动静。

在底下的测量试验中,有人从<footer>中除去了 modal-card-foot 类。

图片 4

快速照相测量检验是一种检查组件样式或标记的章程。

如果快速照相测验通过,大家清楚代码更动不会默转潜移组件的体现。

假设测验退步,那么大家精晓确实影响了组件的渲染,并得以手动物检疫查体制是不是正确。

各个组件至少应当一回快速照相测量试验。
二个独立的快速照相测验展现组件的情事,以检查它不易显示。

当今我们已经有了单元测量检验和快速照相测量检验,是时候看看端到端(e2e)测量试验。

端到端测验

端到端(e2e)测量试验是高层测量检验。

它们推行与咱们手动测量检验应用程序时一致的操作。

在大家的应用程序中,我们有贰个用户(操作)旅程。当用户点击开关时,方式将开垦,当她们点击形式中的开关时,形式将闭馆。

作者们可以编写贰个纵贯这一旅程的端到端测量检验。测量试验将开拓浏览器,导航到网页,并通过各样操作来保险应用程序符合规律运作。

那些测验将报告大家,我们的单元旦确地协同专门的工作。它使我们中度自信,该应用程序的关键功用是足以健康干活的。

对 JavaScript 应用程序来讲有三种方法能够编写端到端测验。像 test cafe
那样的主次会记录您在浏览器中实践操作并将其用作测验源回放。

还会有类似 nightwatch 的项目,可让你用 JavaScript
编写测量检验项目。作者会推荐使用类似 nightwatch
的库。拿起来平素用很轻松,该测量检验运维速度比记录的测量检验更加快。

也正是说,night1qtch
的测量检验依旧异常的快的。一套200个单元测验需求费用几分钟的光阴,一套200个端到端测量试验仅须求几分钟时间来运转。

端到端测验的另一个标题是为难调试。当测验退步时,很难搜索挫败的原因,因为测量检验涵盖了太多效果与利益。

结语

要管用地质衡量试基于前端组件的 Web
应用程序,你须求三种档案的次序的测量试验:单元测验,快速照相测量检验和 e2e 测量检验。

你应该对种种组件举行多个单元测验,对每一种组件实行三回或两遍快速照相测量试验,以及测量试验链接在一块儿的三个零部件的贰遍或两遍端到端测量检验。

一体化单元测量检验将涵盖超越半数测量检验,你将有部分快照测试和部分 e2e 测验。

假如您遵照前端测量试验金字塔,你就能够使用杀手级测量检验套件创制可保险的 Web
应用程序。

您可以在 GitHub 上看到应用程序的快速照相测量试验、单元测量试验和端到端测量检验的演示源码库。

1 赞 收藏
评论

图片 5

相关文章