QUnit – 快速指南
QUnit – 快速指南
QUnit – 概述
测试是检查应用程序的功能是否符合要求并确保在开发人员级别进行单元测试的过程。单元测试是对单个实体（类或方法）的测试。单元测试对于每个软件组织向其客户提供优质产品都非常重要。
单元测试可以通过下表中提到的两种方式完成。
| Manual testing | 自动化测试 |
|---|---|
| Executing the test cases manually without any tool support is known as manual testing. | 使用自动化工具获取工具支持并执行测试用例称为自动化测试。 |
| Time consuming and tedious. Since the test cases are executed by human resources, it is very slow and tedious. | 快速自动化。运行测试用例的速度明显快于人力资源。 |
| Huge investment in human resources. As test cases need to be executed manually, more number of testers are required. | 人力资源投资少。测试用例使用自动化工具执行，因此需要的测试人员数量较少。 |
| Less reliable, as tests may not be performed with precision each time due to human errors. | 更可靠。自动化测试在每次运行时都执行完全相同的操作。 |
| Non-programmable. No programming can be done to write sophisticated tests, which fetch hidden information. | 可编程的。测试人员可以编写复杂的测试程序以找出隐藏的信息。 |
QUnit是什么？
QUnit 是 JavaScript 编程语言的单元测试框架。它在测试驱动开发中很重要，被 jQuery、jQuery UI 和 jQuery Mobile 项目使用。QUnit 能够测试任何通用的 JavaScript 代码库。
QUnit提倡“先测试后编码”的思想，强调为一段代码设置测试数据，可以先测试后实现。这种方法就像“测试一点，编码一点，测试一点，编码一点……”，提高了程序员的生产力和程序代码的稳定性，减少了程序员的压力和调试时间。
QUnit的特点
QUnit 是一个开源框架，用于编写和运行测试。以下是其最突出的特点 –
-
QUnit 提供用于测试预期结果的断言。
-
QUnit 提供用于运行测试的测试装置。
-
QUnit 测试允许更快地编写代码，从而提高质量。
-
QUnit 优雅简单。它不那么复杂，花费的时间也更少。
-
QUnit 测试可以自动运行，它们会检查自己的结果并提供即时反馈。无需手动梳理测试结果报告。
-
QUnit 测试可以组织成包含测试用例甚至其他测试套件的测试套件。
-
QUnit 在一个栏中显示测试进度，如果测试正常，则显示为绿色，如果测试失败，则显示为红色。
什么是单元测试用例？
单元测试用例是代码的一部分，它确保代码的另一部分（方法）按预期工作。为了快速达到预期的结果，需要测试框架。QUnit 是一个完美的 JavaScript 编程语言单元测试框架。
正式的书面单元测试用例的特点是已知输入和预期输出，这是在执行测试之前制定的。已知输入应测试前置条件，预期输出应测试后置条件。
每个需求必须至少有两个单元测试用例：一个正面测试和一个负面测试。如果一个需求有子需求，每个子需求必须至少有两个测试用例作为正面和负面。
QUnit – 环境设置
有两种使用 QUnit 的方法。
-
本地安装– 您可以在本地机器上下载 QUnit 库并将其包含在您的 HTML 代码中。
-
基于 CDN 的版本– 您可以直接从内容交付网络 (CDN) 将 QUnit 库包含到您的 HTML 代码中。
本地安装
-
转到https://code.jquery.com/qunit/下载可用的最新版本。
-
将下载的qunit-git.js和qunit-git.css文件放在您网站的目录中，例如 /jquery。
例子
您可以在 HTML 文件中包含qunit-git.js和qunit-git.css文件，如下所示 –
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "/jquery/qunit-git.css">
<script src = "/jquery/qunit-git.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.test( "My First Test", function( assert ) {
var value = "1";
assert.equal( value, "1", "Value should be 1" );
});
</script>
</body>
</html>
这将产生以下结果 –
基于 CDN 的版本
您可以直接从内容交付网络 (CDN) 将 QUnit 库包含到您的 HTML 代码中。
我们在本教程中使用该库的 jQuery CDN 版本。
例子
让我们使用 jQuery CDN 中的 QUnit 库重写上面的示例。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.test( "My First Test", function( assert ) {
var value = "1";
assert.equal( value, "1", "Value should be 1" );
});
</script>
</body>
</html>
这将产生以下结果 –
QUnit – 基本用法
现在，我们将使用一个基本示例向您展示在 QUnit 中快速启动的分步过程。
导入 qunit.js
Qunit 库的 qunit.js 代表测试运行器和测试框架。
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
导入 qunit.css
Qunit 库的 qunit.css 为测试套件页面设置样式以显示测试结果。
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
添加夹具
添加两个id = “qunit”和“qunit-fixture” 的div 元素。这些 div 元素是必需的，并为测试提供夹具。
<div id = "qunit"></div> <div id = "qunit-fixture"></div>
创建要测试的函数
function square(x) {
return x * x;
}
创建测试用例
使用两个参数调用 QUnit.test 函数。
-
Name – 显示测试结果的测试名称。
-
功能– 功能测试代码，具有一个或多个断言。
QUnit.test( "TestSquare", function( assert ) {
var result = square(2);
assert.equal( result, "4", "square(2) should be 4." );
});
运行测试
现在让我们看看完整的代码。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
function square(x) {
return x * x;
}
QUnit.test( "TestSquare", function( assert ) {
var result = square(2);
assert.equal( result, "4", "square(2) should be 4." );
});
</script>
</body>
</html>
在浏览器中加载页面。测试运行器在页面加载时调用QUnit.test()并将测试添加到队列中。测试用例的执行由测试运行器延迟和控制。
验证输出
您应该会看到以下结果 –
-
Header – 测试套件标题显示页面标题，当所有测试通过时，会显示一个绿色条。否则，至少有一个测试失败时会出现一个红色条，一个带有三个复选框来过滤测试结果的条，以及一个带有 navigator.userAgent 文本的蓝色条，用于显示浏览器详细信息。
-
隐藏通过的测试复选框– 隐藏通过的测试用例并仅显示失败的测试用例。
-
检查全局复选框– 在每次测试之前和之后显示窗口对象上所有属性的列表，然后检查差异。对属性的修改将使测试失败。
-
No try-catch checkbox – 在 try-catch 块之外运行测试用例，以便在测试抛出异常的情况下，testrunner 将死亡并显示本机异常。
-
摘要– 显示运行测试用例所需的总时间。总测试用例运行和失败的断言。
-
内容– 显示测试结果。每个测试结果都有测试名称，后跟失败、通过和总断言。可以单击每个条目以获取更多详细信息。
QUnit – API
QUnit 的重要 API
QUnit 的一些重要类别是 –
| Sr.No. | 类别 | 功能 |
|---|---|---|
| 1 | 断言 | 一组断言方法。 |
| 2 | 异步控制 | 用于异步操作。 |
| 3 | 回调 | 当将 QUnit 集成到 CI 服务器等其他工具中时，这些回调可以用作 API 来读取测试结果。 |
| 4 | 配置和实用程序 | 这些方法和属性用作实用程序助手和配置 QUnit。例如，要直接调整运行时行为，通过自定义断言等扩展 QUnit API。 |
| 5 | 测试 | 用于测试操作。 |
类别：断言
它提供了一组断言方法。
| Sr.No. | 方法和说明 |
|---|---|
| 1 |
async() 指示 QUnit 等待异步操作。 |
| 2 |
deepEqual() 深度递归比较，处理原始类型、数组、对象、正则表达式、日期和函数。 |
| 3 |
equal() 一个非严格的比较，大致相当于 JUnit 的 assertEquals。 |
| 4 |
expect() 指定预期在测试中运行的断言数量。 |
| 5 |
notDeepEqual() 反向深度递归比较，处理原始类型、数组、对象、正则表达式、日期和函数。 |
| 6 |
notEqual() 非严格比较，检查不等式。 |
| 7 |
notOk() 布尔检查，与 ok() 和 CommonJS 的 assert.ok() 相反，等效于 JUnit 的 assertFalse()。如果第一个参数为假，则通过。 |
| 8 |
notPropEqual() 对象自身属性的严格比较，检查不等式。 |
| 9 |
notStrictEqual() 严格比较，检查不平等。 |
| 10 |
ok() 一个布尔检查，相当于 CommonJS 的 assert.ok() 和 JUnit 的 assertTrue()。如果第一个参数为真，则通过。 |
| 11 |
propEqual() 对象自身属性的严格类型和值比较。 |
| 12 |
push() 报告自定义断言的结果。 |
| 13 |
strictEqual() 严格的类型和值比较。 |
| 14 |
throws() 测试回调是否抛出异常，并可选择比较抛出的错误。 |
类别：异步控制
它提供了一组异步操作。
| Sr.No. | 方法和说明 |
|---|---|
| 1 |
async() 指示 QUnit 等待异步操作。 |
| 2 |
QUnit.asyncTest() 已弃用：添加要运行的异步测试。测试必须包括对 QUnit.start() 的调用。 |
| 3 |
QUnit.start() 部分弃用：在测试运行器停止后再次开始运行测试。请参阅 QUnit.stop() 和 QUnit.config.autostart。 |
| 4 |
QUnit.stop() 已弃用：增加测试运行程序在继续之前应等待的 QUnit.start() 调用次数。 |
| 5 |
QUnit.test() 添加要运行的测试。 |
类别：回调
当将 QUnit 集成到 CI 服务器等其他工具时，这些回调可以用作 API 来读取测试结果。
| Sr.No. | 方法和说明 |
|---|---|
| 1 |
QUnit.begin() 注册一个回调以在测试套件开始时触发。 |
| 2 |
QUnit.done() 注册一个回调以在测试套件结束时触发。 |
| 3 |
QUnit.log() 注册一个回调以在断言完成时触发。 |
| 4 |
QUnit.moduleDone() 注册一个回调以在模块结束时触发。 |
| 5 |
QUnit.moduleStart() 注册一个回调以在模块开始时触发。 |
| 6 |
QUnit.testDone() 注册一个回调以在测试结束时触发。 |
| 7 |
QUnit.testStart() 注册一个回调以在测试开始时触发。 |
类别：配置和实用程序
这些方法和属性用作实用程序助手和配置 QUnit。例如，要直接调整运行时行为，通过自定义断言等扩展 QUnit API。
| Sr.No. | 方法和说明 |
|---|---|
| 1 |
QUnit.assert QUnit 断言的命名空间。 |
| 2 |
QUnit.config QUnit 的配置。 |
| 3 |
QUnit.dump.parse() 用于 JavaScript 的高级和可扩展数据转储。 |
| 4 |
QUnit.extend() 将 mixin 对象定义的属性复制到目标对象中。 |
| 5 |
QUnit.init() 已弃用：重新初始化测试运行器。 |
| 6 |
QUnit.push() 已弃用：报告自定义断言的结果。 |
| 7 |
QUnit.reset() 已弃用：重置 DOM 中的测试装置。 |
| 8 |
QUnit.stack() 返回表示堆栈跟踪（调用堆栈）的单行字符串。 |
类别：测试
它提供了一组测试操作。
| Sr.No. | 方法和说明 |
|---|---|
| 1 |
QUnit.assert QUnit 断言的命名空间。 |
| 2 |
QUnit.asyncTest() 已弃用：添加要运行的异步测试。测试必须包括对 QUnit.start() 的调用。 |
| 3 |
QUnit.module() 将相关测试分组在一个标签下。 |
| 4 |
QUnit.only() 添加一个测试以独占运行，阻止所有其他测试运行。 |
| 5 |
QUnit.skip() 添加要跳过的类似对象的测试。 |
| 6 |
QUnit.test() 添加要运行的测试。 |
QUnit – 使用断言
所有断言都在断言类别中。
该类别提供了一组对编写测试有用的断言方法。只记录失败的断言。
| Sr.No. | 方法和说明 |
|---|---|
| 1 |
async() 指示 QUnit 等待异步操作。 |
| 2 |
deepEqual() 深度递归比较，处理原始类型、数组、对象、正则表达式、日期和函数。 |
| 3 |
equal() 一个非严格的比较，大致相当于 JUnit 的 assertEquals。 |
| 4 |
expect() 指定预期在测试中运行的断言数量。 |
| 5 |
notDeepEqual() 反向深度递归比较，处理原始类型、数组、对象、正则表达式、日期和函数。 |
| 6 |
notEqual() 非严格比较，检查不等式。 |
| 7 |
notOk() 布尔检查，与 ok() 和 CommonJS 的 assert.ok() 相反，等效于 JUnit 的 assertFalse()。如果第一个参数为假，则通过。 |
| 8 |
notPropEqual() 对象自身属性的严格比较，检查不等式。 |
| 9 |
notStrictEqual() 严格比较，检查不平等。 |
| 10 |
ok() 一个布尔检查，相当于 CommonJS 的 assert.ok() 和 JUnit 的 assertTrue()。如果第一个参数为真，则通过。 |
| 11 |
propEqual() 对象自身属性的严格类型和值比较。 |
| 12 |
push() 报告自定义断言的结果。 |
| 13 |
strictEqual() 严格的类型和值比较。 |
| 14 |
throws() 测试回调是否抛出异常，并可选择比较抛出的错误。 |
让我们尝试在一个示例中涵盖大部分上述方法。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.test( "TestSuite", function( assert ) {
//test data
var str1 = "abc";
var str2 = "abc";
var str3 = null;
var val1 = 5;
var val2 = 6;
var expectedArray = ["one", "two", "three"];
var resultArray = ["one", "two", "three"];
//Check that two objects are equal
assert.equal(str1, str2, "Strings passed are equal.");
//Check that two objects are not equal
assert.notEqual(str1,str3, "Strings passed are not equal.");
//Check that a condition is true
assert.ok(val1 < val2, val1 + " is less than " + val2);
//Check that a condition is false
assert.notOk(val1 > val2, val2 + " is not less than " + val1);
//Check whether two arrays are equal to each other.
assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
//Check whether two arrays are equal to each other.
assert.notDeepEqual(expectedArray, ["one", "two"],
"Arrays passed are not equal.");
});
</script>
</body>
</html>
验证输出
您应该会看到以下结果 –
QUnit – 执行程序
本章解释了 QUnit 中方法的执行过程，说明首先调用哪个方法，然后调用哪个方法。下面举例说明QUnit测试API方法的执行过程。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.module( "Module A", {
beforeEach: function( assert ) {
assert.ok( true, "before test case" );
}, afterEach: function( assert ) {
assert.ok( true, "after test case" );
}
});
QUnit.test( "test case 1", function( assert ) {
assert.ok( true, "Module A: in test case 1" );
});
QUnit.test( "test case 2", function( assert ) {
assert.ok( true, "Module A: in test case 2" );
});
QUnit.module( "Module B" );
QUnit.test( "test case 1", function( assert ) {
assert.ok( true, "Module B: in test case 1" );
});
QUnit.test( "test case 2", function( assert ) {
assert.ok( true, "Module B: in test case 2" );
});
</script>
</body>
</html>
验证输出
您应该会看到以下结果 –
这就是 QUnit 的执行过程。
-
该模块用于对测试用例进行分组。
-
beforeEach()方法为每个测试用例执行，但是在执行测试用例之前。
-
afterEach()方法为每个测试用例执行，但是在测试用例执行之后。
-
在beforeEach()和afterEach() 之间，每个测试用例都会执行。
-
再次调用QUnit.module()，只需重置之前由另一个模块定义的任何 beforeEach/afterEach 函数。
QUnit – 跳过测试
有时，我们的代码还没有准备好，如果运行，用于测试该方法/代码的测试用例会失败。QUnit.skip在这方面有所帮助。不会执行使用 Skip 方法编写的测试方法。让我们看看实际的 Skip 方法。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.module( "Module A", {
beforeEach: function( assert ) {
assert.ok( true, "before test case" );
}, afterEach: function( assert ) {
assert.ok( true, "after test case" );
}
});
QUnit.test( "test case 1", function( assert ) {
assert.ok( true, "Module A: in test case 1" );
});
QUnit.skip( "test case 2", function( assert ) {
assert.ok( true, "Module A: in test case 2" );
});
QUnit.module( "Module B" );
QUnit.test( "test case 1", function( assert ) {
assert.ok( true, "Module B: in test case 1" );
});
QUnit.skip( "test case 2", function( assert ) {
assert.ok( true, "Module B: in test case 2" );
});
</script>
</body>
</html>
验证输出
您应该会看到以下结果 –
QUnit – 仅测试
有时会发生我们的代码未准备好并且编写用于测试该方法/代码的测试用例失败（如果运行）。QUnit.only在这方面有帮助。将执行仅使用方法编写的测试方法，而不会运行其他测试。如果指定了多个 only 方法，则只会执行第一个方法。让我们看看唯一的方法。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.module( "Module A", {
beforeEach: function( assert ) {
assert.ok( true, "before test case" );
}, afterEach: function( assert ) {
assert.ok( true, "after test case" );
}
});
QUnit.test( "test case 1", function( assert ) {
assert.ok( true, "Module A: in test case 1" );
});
QUnit.only( "test case 2", function( assert ) {
assert.ok( true, "Module A: in test case 2" );
});
QUnit.test( "test case 3", function( assert ) {
assert.ok( true, "Module A: in test case 3" );
});
QUnit.test( "test case 4", function( assert ) {
assert.ok( true, "Module A: in test case 4" );
});
</script>
</body>
</html>
验证输出
您应该会看到以下结果 –
QUnit – 异步调用
对于QUnit.test()回调中的每个异步操作，请使用assert.async()，它返回一个“完成”函数，应在操作完成时调用该函数。assert.async() 接受调用次数作为参数。从 assert.async() 返回的回调将抛出一个错误，如果它被调用超过接受的调用计数（如果提供）。每个done()调用加起来就是调用计数。每次调用完成后，测试就完成了。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.test( "multiple call test()", function( assert ) {
var done = assert.async( 3 );
setTimeout(function() {
assert.ok( true, "first callback." );
done();
}, 500 );
setTimeout(function() {
assert.ok( true, "second callback." );
done();
}, 500 );
setTimeout(function() {
assert.ok( true, "third callback." );
done();
}, 500 );
});
</script>
</body>
</html>
验证输出
您应该会看到以下结果 –
QUnit – 期望断言
我们可以使用assert.expect()函数来检查测试中所做断言的数量。在以下示例中，我们期望在测试中进行三个断言。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.test( "multiple call test()", function( assert ) {
assert.expect( 3 );
var done = assert.async( 3 );
setTimeout(function() {
assert.ok( true, "first callback." );
done();
}, 500 );
setTimeout(function() {
assert.ok( true, "second callback." );
done();
}, 500 );
setTimeout(function() {
assert.ok( true, "third callback." );
done();
}, 500 );
});
</script>
</body>
</html>
验证输出
您应该会看到以下结果 –
QUnit – 回调
当将 QUnit 集成到 CI 服务器等其他工具中时，这些回调可以用作 API 来读取测试结果。下面举例说明QUnit回调API方法的执行过程。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
//Register a callback to fire whenever a testsuite starts.
QUnit.begin(function( details ) {
var data = document.getElementById("console").innerHTML;
document.getElementById("console").innerHTML = "<br/>" +
"QUnit.begin- Test Suite Begins " + "<br/>" +
"Total Test: " + details.totalTests;
});
//Register a callback to fire whenever a test suite ends.
QUnit.done(function( details ) {
var data = document.getElementById("console").innerHTML;
document.getElementById("console").innerHTML = data + "<br/><br/>" +
"QUnit.done - Test Suite Finised" + "<br/>" + "Total: " +
details.total + " Failed: " + details.failed + " Passed:
" + details.passed;
});
//Register a callback to fire whenever a module starts.
QUnit.moduleStart(function( details ) {
var data = document.getElementById("console").innerHTML;
document.getElementById("console").innerHTML = data + "<br/><br/>" +
"QUnit.moduleStart - Module Begins " + "<br/>" + details.name;
});
//Register a callback to fire whenever a module ends.
QUnit.moduleDone(function( details ) {
var data = document.getElementById("console").innerHTML;
document.getElementById("console").innerHTML = data + "<br/><br/>" +
"QUnit.moduleDone - Module Finished " + "<br/>" + details.name +
" Failed/total: " + details.failed +"/" + details.total ;
});
//Register a callback to fire whenever a test starts.
QUnit.testStart(function( details ) {
var data = document.getElementById("console").innerHTML;
document.getElementById("console").innerHTML = data + "<br/><br/>" +
"QUnit.testStart - Test Begins " + "<br/>" + details.module +"
" + details.name;
});
//Register a callback to fire whenever a test ends.
QUnit.testDone(function( details ) {
var data = document.getElementById("console").innerHTML;
document.getElementById("console").innerHTML = data + "<br/><br/>" +
"QUnit.testDone - Test Finished " + "<br/>" + details.module +" "
+ details.name + "Failed/total: " + details.failed +" " + details.total+
" "+ details.duration;
});
QUnit.module( "Module A", {
beforeEach: function( assert ) {
assert.ok( true, "before test case" );
}, afterEach: function( assert ) {
assert.ok( true, "after test case" );
}
});
QUnit.test( "test case 1", function( assert ) {
assert.ok( true, "Module A: in test case 1" );
});
QUnit.test( "test case 2", function( assert ) {
assert.ok( true, "Module A: in test case 2" );
});
QUnit.module( "Module B" );
QUnit.test( "test case 1", function( assert ) {
assert.ok( true, "Module B: in test case 1" );
});
QUnit.test( "test case 2", function( assert ) {
assert.ok( true, "Module B: in test case 2" );
});
</script>
<div id = "console" ></div>
</body>
</html>
验证输出
您应该会看到以下结果 –
QUnit – 嵌套模块
具有分组测试功能的模块用于定义嵌套模块。QUnit 在深入研究嵌套模块之前在父模块上运行测试，即使它们是首先声明的。嵌套模块调用上的beforeEach和afterEach回调将以 LIFO（后进先出）模式堆叠到父挂钩。您可以使用参数和钩子指定在每次测试之前和之后运行的代码。
钩子还可以用于创建将在每个测试的上下文中共享的属性。hooks 对象上的任何其他属性都将添加到该上下文中。如果您使用回调参数调用 QUnit.module，则 hooks 参数是可选的。
模块的回调以上下文作为测试环境被调用，环境的属性被复制到模块的测试、钩子和嵌套模块。
<html>
<head>
<meta charset = "utf-8">
<title>QUnit basic example</title>
<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
</head>
<body>
<div id = "qunit"></div>
<div id = "qunit-fixture"></div>
<script>
QUnit.module( "parent module", function( hooks ) {
hooks.beforeEach( function( assert ) {
assert.ok( true, "beforeEach called" );
});
hooks.afterEach( function( assert ) {
assert.ok( true, "afterEach called" );
});
QUnit.test( "hook test 1", function( assert ) {
assert.expect( 2 );
});
QUnit.module( "nested hook module", function( hooks ) {
// This will run after the parent module's beforeEach hook
hooks.beforeEach( function( assert ) {
assert.ok( true, "nested beforeEach called" );
});
// This will run before the parent module's afterEach
hooks.afterEach( function( assert ) {
assert.ok( true, "nested afterEach called" );
});
QUnit.test( "hook test 2", function( assert ) {
assert.expect( 4 );
});
});
});
</script>
<div id = "console" ></div>
</body>
</html>
验证输出
您应该会看到以下结果 –
