Demo / Übung

Die Demo-Apps im SAPUI5 Demo Kit sind mit OPA Tests ausgestattet:

https://sapui5.hana.ondemand.com/sdk/#/demoapps

Schaut Euch zunächst die App Browse Orders an. Danach startet die Integration Tests.

Übung OPA Test anlegen (2)

• Wir fügen in dem Dokument NavigationJourney.js folgenden Code ein:

sap.ui.define([
	"sap/ui/test/opaQunit",
	"./pages/App"
], (opaTest) => {
	"use strict";

	QUnit.module("Navigation");

	opaTest("Should open the Hello dialog", (Given, When, Then) => {
		// Arrangements
		Given.iStartMyUIComponent({
			componentConfig: {
				name: "ui5.walkthrough"
			}
		});

		//Actions
		When.onTheAppPage.iPressTheSayHelloWithDialogButton();

		// Assertions
		Then.onTheAppPage.iShouldSeeTheHelloDialog();

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

Übung OPA Test anlegen (4)

• Wir fügen in dem Dokument pages/App.js folgenden Code ein:

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

	const sViewName = "ui5.walkthrough.view.HelloPanel";

	Opa5.createPageObjects({
		onTheAppPage: {
			actions: {
				iPressTheSayHelloWithDialogButton() {
					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() {
					return this.waitFor({
						controlType: "sap.m.Dialog",
						success() {
							// 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"
					});
				}
			}
		}
	});
});

Übung OPA Test anlegen (6)

1. Wir legen innerhalb des integration Ordners das Dokument opaTests.qunit.js an und fügen dort folgenden Code ein:

QUnit.config.autostart = false;

sap.ui.require(["sap/ui/core/Core"], async(Core) => {
	"use strict";

	await Core.ready();

	sap.ui.require([
		"ui5/walkthrough/localService/mockserver",
		"ui5/walkthrough/test/integration/NavigationJourney"
	], (mockserver) => {
		// initialize the mock server
		mockserver.init();
		QUnit.start();
	});
});

OPA5 Erläuterungen

• Given: Setzt den Anfangszustand für den Test
  • Beispiel: Starten der Anwendung, Navigieren zu einer bestimmten Seite
  • Given.iStartMyAppInAFrame("index.html");
• When: Führt die zu testende Aktion aus
  • Beispiel: Klicken eines Buttons, Eingeben von Text
  • When.onTheAppPage.iPressTheSayHelloButton();
• Then: Überprüft das erwartete Ergebnis
  • Beispiel: Prüfen, ob ein Dialog geöffnet wurde, ob Text angezeigt wird
  • Then.onTheAppPage.iShouldSeeTheHelloDialog();
• Zusammen bilden sie ein vollständiges Testszenario:

opaTest("Should open the hello dialog", function (Given, When, Then) {
  Given.iStartMyAppInAFrame("index.html");
  When.onTheAppPage.iPressTheSayHelloButton();
  Then.onTheAppPage.iShouldSeeTheHelloDialog();
});

Aufzeichnen von Tests im Browser

UI5 Test Recorder

Integriertes Tool zum Aufzeichnen von UI-Interaktionen
Zugänglich über das Entwicklermenü in UI5-Anwendungen über die Tastenkombination strg+shift+alt+p

Funktionen:

• Aufzeichnen von Aktionen:
• Klicks, Texteingaben, Navigation etc.

Generierung von OPA5-Code:

• Erstellt automatisch OPA5-Testcode für aufgezeichnete Aktionen

Elementidentifikation:

• Hilft bei der Auswahl geeigneter Selektoren für UI-Elemente

Interaktive Bearbeitung:

• Möglichkeit, aufgezeichnete Tests zu bearbeiten und zu verfeinern

OPA Test erweitern mit dem UI5 Test Recorder (2)

• Wir öffnen den Browser und ändern den letzten Teil der Adressezeile in *..*/test/mockServer.html
• Wir drücken die Tastenkombination strg+shift+alt+p
• Es öffnet sich im unteren Teils des Browsers ein neues Fenster
• Dort klicken wir auf Test-Recorder aktivieren
  
• Es kann einige Sekunden dauern bis der TestRecorder geladen wird.

OPA Test erweitern mit dem UI5 Test Recorder (4)

  autoWait: false,

OPA Test erweitern mit dem UI5 Test Recorder (6)

• Nun fügen wir unter webapp/test/integration/pages/App.js die Funktion iShouldSeeMessageToastAppearance nach der Funktion iShouldSeeTheHelloDialog() ein.
• der Code sollte nun wie folgt aussehen:

assertions: {
	iShouldSeeTheHelloDialog() {
		return this.waitFor({
			controlType: "sap.m.Dialog",
			success() {
				// 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"
		});
	},
	iShouldSeeMessageToastAppearance: function () {
		return this.waitFor({
			// Turn off autoWait
			autoWait: false,
			check: function () {
				return Opa5.getJQuery()(".sapMMessageToast").length > 0;
			},
			success: function () {
				Opa5.assert.ok(true, "The message toast was shown");
			},
			errorMessage: "The message toast did not show up"
		});
	}
}

OPA Test erweitern mit dem UI5 Test Recorder (8)

• Nun lassen wir die Tests noch einmal laufen. Dazu starten wir gegebenenfalls den Server neu. Das Terminal öffnen und den Server starten

	npm run start

• Nun öffnen wir den Browser und ändern den letzten Teil der Adressezeile von *..*/test/mockServer.html zu *..*/test/integration/opaTests.qunit.html
• Wir sehen nun, dass der Test erfolgreich war.