Step 29: Integration Test with OPA

opensapkr·2019년 7월 5일

ui5-Walkthrough

목록 보기

30/39

App과의 상호 작용을 테스트를 위해 Dialog기능이 들어가 있는 Say Hello 버튼을 클릭하면 열리는 지 확인한다.
JavaScript 및 QUnit을 기반으로 쉽게 설정되어있는 OPA5를 사용하면 이 작업을 쉽게 수행 할 수 있다.
통합 및 unit test를 사용하면 CI (Continuous Integration) 환경에서 일관성(consistently)을 유지할 수 있다.

note: 이 튜토리얼에서는 테스트 구현을 가단하게만 살펴본다. OPA 테스트에 대해 더 알고 싶다면 여기를 클릭 해라

Preview

Coding

Walkthrough - Step 29.

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는 App navigationPages/Panel과 같이 통합 테스트로 구성된다.
OPA5는 QUnit을 사용하므로 결과 페이지에 QUnit 모듈의 Navigation을 설정한다.
opaTest 함수는 OPA와의 통합 테스트를 정의한다.
이 함수의 매개 변수는 테스트 이름과 callback함수이다.

Given : 주어진 객체에서 iStartMyAppInAFrame을 호출하여 통합 테스트를 위해 별도의 iFrame에 App을 로드 한다.
When : 예상되는 동작을 테스트 할 수 있는 상태에서 응용 프로그램을 가져올 수 있는 custom action을 수행한다.
Then : 응용 프로그램의 특정 위치를 확인하고 iFrame을 제거하는 custom assertion이 있다.

이 방법은 Behavior Driven Development(BDD)라고하며 Agile Software Development에서 널리 사용된다.

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"
					});
				}
			}
		}
	});
});

page object의 구현부문에 journey에서 호출 한 helper function이 있다.
sap.ui.test namespace에서 OPA5 필요하고 helper 함수 createPageObjects를 사용하여 페이지 객체를 정의 한다.
Page onTheAppPage의 Key와 action과 assertion 두 섹션으로 객체를 전달 한다.

1) action

page 객체의 action 섹션에서 Hello Dialog button을 클릭하는 함수를 정의한다.
OPA5에서 waitFor 문을 사용하여 수한다.
조건이 충족되면 성공 callback이 실행되고 아니면 errorMessage가 표시된다.
sap.m.Button 유형의 컨트롤을 검사하는 waitFor 문을 정의한다.
App 페이지에서 Button을 찾으는 것을 성공하면 handler가 실행되고 jQuery를 사용하여 첫 번째 버튼에서 tap 이벤트를 트리거 한다.
이렇게하면 HelloDialog가 열린다.

2) assertions

Assertion 섹션에서 sap.m.Dialog 컨트롤이 App의 DOM에 존재하는지 확인하는 waitFor를 정의한다.
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>

opaTests.qunit.html은 앱의 모든 OPA 테스트를 위한 스크립트가 포함되어 있다.
응용 프로그램과 동일한 네임 스페이스를 사용한다.
opaTests.qunit.js라는 스크립트를 로드 하여 NavigationJourney를 로드한다.

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 레이아웃이 표시되고 "Should open the Hello dialog” 테스트가 실행된다.

페이지의 왼쪽에 app 구성 요소를 로드한다. 테스트 앱에서 수행중인 작업을 볼 수 있다.
제대로 작동하면 버튼 클릭이 트리거 된 후 대화 상자가 표시되고 테스트 사례는 녹색으로 표시된다.