使用 Qunit 执行单元测试

学习目标

• 使用 Qunit 运行单元测试。

使用 QUnit 进行单元测试

观看这段短视频，了解单元测试。

视频：本节含 SAP 官方视频（视频 ID 1_58n3rgtr），需在 learning.sap.com 在线观看。

下图概述了 QUnit。

QUnit 是一个 JavaScript 单元测试和集成测试框架。它能够测试任何通用的 JavaScript 代码，该框架开箱即用地支持异步测试。可在以下地址找到它：http://api.qunitjs.com/

QUnit 测试示例

QUnit 使用一组顶层函数，在单元测试中提供语义含义。

与大多数单元测试框架一样，它遵循 arrange-act-assert（准备-执行-断言）模式，这是单元测试中常用的一种测试模式。其目的是清晰区分测试的准备、待测试的操作以及结果的评估。

让我们来看一下重要的构造。

重要构造汇总

构造	用途
module	module(string) - 定义一个模块。
test	test(string, function) - 定义一个测试。
ok	ok(boolean, string) - 校验为 true 或 false。
equal	equal(value1, value2, message) - 使用双等号比较器比较两个值。
deepEqual	deepEqual(value1, value2, message) - 基于内容而不仅仅是标识来比较两个值。
strictEqual	strictEqual(value1, value2, message) - 使用三等号比较器严格比较两个值。

测试页面

下图显示了即将被测试的应用的代码。

观看以下视频，了解由 SAP Business Application Studio 生成的 SAPUI5 项目的 test 文件夹、与之相关的设置细节以及一些示例。

视频：本节含 SAP 官方视频（视频 ID 1_drh1uvur），需在 learning.sap.com 在线观看。

单元测试运行的配置

当您使用由 SAP Business Application Studio 提供的 SAPUI5 项目模板时，所有相关方面都已生成，可使用位于 unit 子文件夹中的 unitTests.qunit.html 文件以测试模式启动应用。要从 SAP Business Application Studio 项目资源管理器的菜单中以测试启动方式启动应用（Preview Application），或打开项目中的 *package.json* 文件，请将鼠标悬停在 unit-tests-script 上并选择 start script。

单元测试运行的结果

当单元测试完全结束后，会显示结果屏幕。下图显示了单元测试运行的结果。

编写单元测试

业务示例

在本练习中，您将为一个格式化程序编写单元测试。

注意

SAP Business Technology Platform 及其工具是云服务。由于云软件的特性，步骤流程以及字段和按钮的命名可能与练习解决方案不同。

任务 1：创建 SAP Fiori Freestyle 项目

步骤

1. 打开您的 SAP Business Application Studio。

2. 使用以下信息创建新的 SAP Fiori Freestyle 项目：

SAP Fiori Freestyle 项目信息

字段	值
模板类型	SAP Fiori Generator
模板	Basic
数据源	None
视图名称	Main
模块名称	qunit
应用标题	Unit Tests
应用命名空间	student.com.sap.training.advancedsapui5
描述	A Unit-test Application.
项目文件夹路径	/home/user/projects
将其他字段和单选按钮保留为默认值。

1. 按前面练习中所示执行此步骤。

任务 2：创建要测试的函数

您要创建一个以友好格式显示日期的函数。

步骤

1. 将名为 *Formatter.js* 的文件添加到 webapp/model 文件夹，并按下图所示实现 *Formatter.js* 文件。然后保存您的工作。

注意

如果您愿意，也可以上传 Formatter.js 文件，该文件位于您从 Github 获取的文件中的 Templates 文件夹下。

1. 按前面练习中所示创建或上传 *Formatter.js* 文件。

2. 编写或浏览代码。您可以使用以下内容：

sap.ui.define([], function() {
"use strict";
return {
prettyDate : function (now, time) {
var date = new Date(time || ""),
diff = (((new Date(now)).getTime() - date.getTime()) / 1000),
dayDiff = Math.floor(diff / 86400);
if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 3) {
return;
}
var oResult = dayDiff === 0 && (
diff < 60 && "just now" ||
diff < 120 && "1 minute ago" ||
diff < 3600 && Math.floor(diff / 600) + " minutes ago" ||
diff < 7200 && "1 hour ago" ||
diff < 86400 && Math.floor(diff / 3600) + "hours ago") ||
dayDiff === 1 && "Yesterday" ||
dayDiff < 7 && dayDiff + " days ago" ||
dayDiff < 31 && Math.ceil(dayDiff / 7) + "weeks ago";
return oResult;
}
}
});

任务 3：创建单元测试

步骤

1. 在 webapp/test/unit 文件夹中添加名为 model 的文件夹。

2. 按前面练习中所示执行此步骤。

3. 在 webapp/test/unit/model 文件夹中添加名为 Formatter.js 的文件。

4. 按前面练习中所示执行此步骤。

5. 定义一个 SAPUI5 模块，并添加对您在步骤 6 中创建的 Formatter 的依赖。

6. 添加以下代码行：

sap.ui.define([
"student/com/sap/training/advancedsapui5/qunit/model/Formatter"
], function(Formatter) {
"use strict";
});

4. 向新创建的 SAPUI5 模块添加一个 QUnit 模块。使用 QUnit.module 函数。将模块描述设为 Formatter，并使用 beforeEach 钩子创建一个引用 Formatter 的 _formatter 成员变量。

5. 在 "use strict"; 语句之后添加以下代码行：

QUnit.module("Formatter", {
beforeEach: function () {
this._formatter = Formatter;
}
});

5. 在位于 webapp/test/unit/model 文件夹的 *Formatter.js* 文件中，使用 QUnit.test 函数定义一个测试用例。将测试用例描述设为 Test the pretty date implementation。在指定的函数中，创建名为 now 的变量。将值 2008/01/28 22:25:00 赋给 now 变量。使用断言对象的 equal 函数检查 now 变量中的日期是否等于下表中的期望值。打印出所提到的断言消息。

提示

您将使用 prettyDate 函数（它属于 Formatter），将其作为 equal 函数的第一个参数，并将列出的断言消息作为 equal 函数的第二个参数。

期望值与对应的断言消息

期望值	断言消息
2008/01/28 22:25:00	just now
2008/01/28 22:24:00	1 minute ago
2008/01/28 22:22:00	3 minute ago
2008/01/28 21:25:00	1 hour ago
2008/01/27 22:25:00	Yesterday
2008/01/26 22:25:00	2 days ago
2007/01/26 22:25:00	undefined

1. 在 QUnit.module 函数调用之后添加以下代码行：

QUnit.test("Test the pretty date implementation", function(assert) {
var now= "2008/01/28 22:25:00";
assert.equal(this._formatter.prettyDate(now,"2008/01/28 22:25:00" ), "just now");
assert.equal(this._formatter.prettyDate(now,"2008/01/28 22:24:00" ), "1 minute ago");
assert.equal(this._formatter.prettyDate(now,"2008/01/28 22:22:00" ), "3 minutes ago");
assert.equal(this._formatter.prettyDate(now,"2008/01/28 21:25:00" ), "1 hour ago");
assert.equal(this._formatter.prettyDate(now,"2008/01/27 22:25:00" ), "Yesterday");
assert.equal(this._formatter.prettyDate(now,"2008/01/26 22:25:00" ), "2 days ago");
assert.equal(this._formatter.prettyDate(now,"2007/01/26 22:25:00" ), undefined);
});

2. 保存您的工作。您的 *Formatter.js* 文件现在应如下所示：

任务 4：调整命名空间

步骤

1. 打开 *AllTests.js* 文件，将给定的命名空间替换为 student/com/sap/training/advancedsapui5/qunit/test/unit/controller/Main.controller 和 student/com/sap/training/advancedsapui5/qunit/test/unit/model/Formatter。

2. 打开位于项目 unit 文件夹中的 *AllTests.js* 文件。

3. 将给定代码替换为以下代码行：

sap.ui.define([
"student/com/sap/training/advancedsapui5/qunit/test/unit/controller/Main.controller",
"student/com/sap/training/advancedsapui5/qunit/test/unit/model/Formatter"
], function () {
"use strict";
});

2. 打开 *webapp/test/unit/controller/Main.controller.js* 文件并调整命名空间。将给定的命名空间替换为 student/com/sap/training/advancedsapui5/qunit/controller/Main.controller。

3. 打开 *webapp/test/unit/unitTests.qunit.js* 文件并调整实际的命名空间。将给定的命名空间替换为 student/com/sap/training/advancedsapui5/qunit/test/unit/AllTests。

4. 打开 *webapp/test/unit/unitTests.qunit.html* 文件并调整资源根（resource roots）配置。

5. 找到 data-sap-ui-resourceroots 值分配（大约在第 9 – 15 行）。将值分配替换为以下内容："student.com.sap.training.advancedsapui5/qunit": "../../"

任务 5：运行测试

步骤

1. 运行您的单元测试并检查结果。

2. 在您的项目文件夹 qunit 上打开上下文菜单。

3. 选择 Preview Application。

4. 选择选项 unit-tests fiori run –open text/unit/unitTests.qunit.html。