第29步:与OPA的集成测试

最新推荐文章于 2022-01-19 09:45:30 发布

真的是我太天真

最新推荐文章于 2022-01-19 09:45:30 发布

阅读量393

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/#/topic/9bf4dce43b7943d0909cd6c58a933589

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

说明

如果我们想测试应用程序的交互模式或更多视觉功能，我们也可以编写集成测试。

我们还没有考虑过测试我们与应用程序的交互，所以在这个步骤中，我们将检查当我们点击“Say Hello with dialog”按钮时对话框是否真的打开了。我们可以通过SAPUI5轻松地实现这一点，它是SAPUI5的一个特性，易于设置，基于JavaScript和QUnit。使用集成和单元测试，并在持续集成(CI)环境中一致地运行它们，我们可以确保不会意外地破坏应用程序或在现有代码中引入逻辑错误。

注意
在本教程中，我们测试一个简单实现的用例。如果您想了解更多关于QUnit测试的知识，请查看我们的测试教程，特别是步骤6:第一次OPA测试。

预览

在这里插入图片描述

您可以在演练-步骤29查看和下载所有文件。

在这里插入图片描述

此步骤的文件夹结构

我们在测试文件夹下面添加一个新的文件夹integration，在那里我们放置我们的新测试用例。帮助构建此类集成测试的页面对象被放置在我们现在创建的pages子文件夹中。

webapp/test/integration/NavigationJourney.js (New)

/*global QUnit, opaTest*/

sap.ui.define([
	"sap/ui/demo/walkthrough/localService/mockserver",
	"sap/ui/test/opaQunit",
	"./pages/App"
], function (mockserver) {
	"use strict";

	QUnit.module("Navigation");

	opaTest("Should open the Hello dialog", function (Given, When, Then) {
		// initialize the mock server
		mockserver.init();

		// Arrangements
		Given.iStartMyUIComponent({
			componentConfig: {
				name: "sap.ui.demo.walkthrough"
			}
		});

		//Actions
		When.onTheAppPage.iPressTheSayHelloWithDialogButton();

		// Assertions
		Then.onTheAppPage.iShouldSeeTheHelloDialog();

		// Cleanup
		Then.iTeardownMyApp();
	});
});

让我们先从journey开始。journey由一系列集成测试组成，这些测试属于相同的上下文，例如在应用程序中导航。与QUnit测试实现类似，OPA5使用QUnit，这就是为什么我们首先设置一个QUnit模块Navigation，它将显示在结果页面上。

opaTest函数是用OPA定义集成测试的主要方面。它的参数定义了一个测试名称和一个回调函数，使用下面的OPA5帮助对象执行这个回调函数，以编写读起来像用户案例的有意义的测试。

Given
在给定的对象上，我们可以调用像iStartMyUIComponent这样的安排函数来加载我们的应用组件以进行集成测试。
When
包含我们可以执行的自定义操作，以使应用程序处于可以测试预期行为的状态。
Then
包含检查应用程序中特定constellation的自定义断言，以及再次删除组件的teardown函数。

在我们的旅程中，我们创建了一个非常简单的测试来启动应用程序。在应用程序中，我们模拟点击一个按钮，并期待对话框随后被打开。最后，我们再次关闭了应用程序。

正如您所看到的，测试用例读起来像一个用户故事，我们实际上还不需要实现方法来理解测试用例的含义。这种方法被称为“行为驱动开发”或简称为BDD，在“敏捷软件开发”中很流行。

webapp/test/integration/pages/App.js (New)

sap.ui.define([
	"sap/ui/test/Opa5",
	"sap/ui/test/actions/Press"
], function (Opa5, Press) {
	"use strict";

	var sViewName = "sap.ui.demo.walkthrough.view.HelloPanel";

	Opa5.createPageObjects({
		onTheAppPage: {
			actions: {
				iPressTheSayHelloWithDialogButton: function () {
					return this.waitFor({
						id: "helloDialogButton",
						viewName: sViewName,
						actions: new Press(),
						errorMessage: "Did not find the 'Say Hello With Dialog' button on the HelloPanel view"
					});
				}
			},

			assertions: {
				iShouldSeeTheHelloDialog: function () {
					return this.waitFor({
						controlType: "sap.m.Dialog",
						success: function () {
							// we set the view busy, so we need to query the parent of the app
							Opa5.assert.ok(true, "The dialog is open");
						},
						errorMessage: "Did not find the dialog control"
					});
				}
			}
		}
	});
});

页面对象的实现保存了我们在journey中调用的helper函数。我们需要sap.ui.test名称空间中的OPA5，并使用助手函数createPageObjects定义一个页面对象。我们传入一个带有页面键onTheAppPage 的对象和两个部分:actions和assertions。

在页面对象的actions部分，我们定义了一个函数来单击“Hello”对话框按钮。这是在OPA5中用waitFor语句完成的，它基本上是一个循环，检查定义为参数的条件。如果条件满足，则执行success回调，如果测试因条件未满足而失败，errorMessage属性中的文本将显示在结果页上。

我们定义了一个waitFor语句来检查sap.m.Button类型的控件。只要在应用页面上找到一个按钮，就会执行成功处理程序，我们使用jQuery在找到的第一个按钮上触发一个tap事件。这将打开HelloDialog，类似于手动单击按钮。

在断言部分，我们定义了另一个waitFor语句，用于检查应用程序的DOM中是否存在sap.m.Dialog控件。当找到对话框时，测试成功，我们可以立即通过调用带有有意义消息的ok语句来确认。

webapp/test/integration/opaTests.qunit.html (New)

<!DOCTYPE html>
<html>
<head>
	<title>Integration tests for SAPUI5 Walkthrough</title>
	<meta charset="utf-8">

	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "../../"
		}'
		data-sap-ui-animation="false"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true">
	</script>

	<link rel="stylesheet" type="text/css" href="https://openui5.hana.ondemand.com/resources/sap/ui/thirdparty/qunit-2.css">

	<script src="https://openui5.hana.ondemand.com/resources/sap/ui/thirdparty/qunit-2.js"></script>
	<script src="https://openui5.hana.ondemand.com/resources/sap/ui/qunit/qunit-junit.js"></script>

	<script src="opaTests.qunit.js"></script>
</head>
<body>
	<div id="qunit"></div>
	<div id="qunit-fixture"></div>
</body>
</html>

这个文件包含应用程序所有的OPA测试套件。我们使用与应用程序相同的命名空间。

然后我们通过SAPUI5的script标签载基本的QUnit功能，这样我们就可以执行测试了。我们上面定义的NavigationJourney将通过一个名为opaTests.qunit.js的脚本加载:

webapp/test/integration/opaTests.qunit.js (New)

/* global QUnit */

QUnit.config.autostart = false;

sap.ui.getCore().attachInit(function () {
	"use strict";

	sap.ui.require([
		"sap/ui/demo/walkthrough/test/integration/NavigationJourney"
	], function () {
		QUnit.start();
	});
});

这个脚本加载NavigationJourney，并且其中的测试函数会立即执行。当您在服务器上调用项目的webapp/test/integration/opaTests.qunit.html页面时，您应该看到QUnit布局，并且立即执行一个测试“应该看到Hello对话框”。它会在页面的右侧加载app组件。在那里，你可以看到测试在应用程序上执行的操作，如果一切正常，按钮点击被触发，然后显示一个对话框，测试用例是绿色的。