《JavaScript忍者秘籍》——2.2 测试用例生成

简介: 解构型测试用例(deconstructive test cases)——解构型测试用例,在消弱代码隔离问题时进行创建,以消除任何不恰当的问题。这有助于我们实现之前列出的三个特征。我们可能从一个完整的网站开始练习,但在消除额外的HTML标记、CSS和JavaScript之后,我们将看到一个能重现该问题的小用例场景。

本节书摘来自异步社区《JavaScript忍者秘籍》一书中的第2章,第2.2节,作者:【美】John Resig(莱西格) , Bear Bibeault(贝比奥特)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.2 测试用例生成

Robert Frost曾写道:篱笆筑得牢,邻居处得好,Web应用程序也是如此,不管是何种编程准则,好的测试铸就好的代码。注意对这个“好”字的强调。如果测试用例的构建很差,它很有可能只是大量的测试套件,不会真正帮助我们提高代码质量。

优秀的测试用例具有三个重要特征。

  • 可重用性(repeatability)——测试结果应该是高度可再生的。多次运行测试应该产生相同的结果。如果测试结果是不确定的,那我们又如何知道哪些结果是有效的,哪些又是无效的呢?此外,可重现性可以确保我们的测试不依赖于外部因素(诸如网络或CPU负载)。
  • 简单性(simplicity)——测试应该只专注于测试一件事。在不影响测试用例目的情况下,我们应该尽可能消除过多的HTML标记、CSS或JavaScript。我们删除得越多,测试用例只受特定代码影响的可能性就越大。
  • 独立性(independence)——测试用例应该独立执行。我们必须避免一个测试结果依赖于另外一个测试结果。把测试分解成尽可能小的单元,这将帮助我们确定在错误发生时的确切代码位置。

有很多方法可以用于构建测试,有两种主要的方法分别是解构型测试和构建型测试:

  • 解构型测试用例(deconstructive test cases)——解构型测试用例,在消弱代码隔离问题时进行创建,以消除任何不恰当的问题。这有助于我们实现之前列出的三个特征。我们可能从一个完整的网站开始练习,但在消除额外的HTML标记、CSS和JavaScript之后,我们将看到一个能重现该问题的小用例场景。
  • 构建型测试用例(constructive test cases)——构建型测试用例,我们从一个大家熟知的良好精简场景开始,构建用例,直到我们能够重现bug为止。为了使用这种风格的测试,我们需要几个用于构建测试的简单测试文件,以及用于生成这些新测试的干净代码副本。

让我们来看一个构建型测试的例子。

创建一个精简的测试用例时,我们可以从几个已经包含最小功能的HTML文件开始。甚至不同的起始文件可以包含不同的功能,例如,一个文件用于DOM操作,一个文件用于Ajax测试,另外一个则用于动画,等等。

举个例子,如下代码清单展示了一个简单的用于测试jQuery的DOM测试用例。

代码清单2.3 一个精简的用于jQuery的DOM测试用例
screenshot
要使用干净的代码副本生成一个测试用例,我们可以使用shell脚本签出jQuery库,复制测试用例,并构建测试套件,如下所示:
screenshot
将上述脚本保存为一个gen.sh的文件,并使用如下命令行执行:
screenshot
该命令将可以让我们从Git库的dom.html文件中获取DOM测试用例。

另外一种方式是使用一个预先构建的用于创建测试用例的服务。其中一个叫JS Bin,它是一个用于构建测试的简单工具,可以生成一个唯一的url地址——甚至可以引用一些最受欢迎的JavaScript库的副本。JS Bin的示例如图2.4所示。
screenshot
一旦具备了创建测试用例所需的工具和知识以后,我们就可以为这些测试创建一些测试套件,从而使得反复运行这些测试变得更加容易。让我们来研究一下。

相关文章
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
4282 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
2158 1
|
人工智能 监控 JavaScript
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
247 1
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
130 1
|
Web App开发 应用服务中间件 定位技术
three.js:三维模型加载量测试
three.js:三维模型加载量测试
965 4
|
JavaScript 前端开发
JavaScript - 测试 Prototype
JavaScript - 测试 Prototype
143 0
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高中信息技术课程在线测试系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的高中信息技术课程在线测试系统附带文章和源代码部署视频讲解等
234 6
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
394 0
|
JavaScript 前端开发 应用服务中间件
【qkl】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
【区块链】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
1156 0