feat: Use Test Starter (#42)

This change introduces the test starter as a replacement for the
traditional test suite + test page setup.

The feature is only available for application projects starting with
UI5 1.124, so the existing test setup is kept for older projects.

Author: matz3

generators/app/index.js

@@ -9,9 +9,13 @@ import { glob } from "glob";
 import packageJson from "package-json";
 import semver from "semver";
 import upath from "upath";
+import path from "path";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
+const webappTestDir = path.normalize("webapp/test/");
+const webappTestDir_lt1_124 = path.normalize("webapp/test-lt1_124/");
+
 export default class extends Generator {
 	static displayName = "Create a new UI5 application with TypeScript";
 	static nestedGenerators = ["wdi5"]; // add wdi5 support
@@ -142,6 +146,7 @@ export default class extends Generator {
 			this.config.set("gte1_98_0", semver.gte(props.frameworkVersion, "1.98.0"));
 			this.config.set("gte1_104_0", semver.gte(props.frameworkVersion, "1.104.0"));
 			this.config.set("gte1_115_0", semver.gte(props.frameworkVersion, "1.115.0"));
+			this.config.set("lt1_124_0", semver.lt(props.frameworkVersion, "1.124.0"));
 		});
 	}
 
@@ -155,8 +160,21 @@ export default class extends Generator {
 				nodir: true
 			})
 			.forEach((file) => {
+				let sTargetFile = file;
+
+				// Use different "test" folder for older versions
+				if (file.startsWith(webappTestDir_lt1_124)) {
+					if (this.config.get("lt1_124_0")) {
+						sTargetFile = file.replace(webappTestDir_lt1_124, webappTestDir);
+					} else {
+						return;
+					}
+				} else if (file.startsWith(webappTestDir) && this.config.get("lt1_124_0")) {
+					return;
+				}
+
 				const sOrigin = this.templatePath(file);
-				let sTarget = this.destinationPath(file.replace(/^_/, "").replace(/\/_/, "/"));
+				let sTarget = this.destinationPath(sTargetFile.replace(/^_/, "").replace(/\/_/, "/"));
 
 				this.fs.copyTpl(sOrigin, sTarget, oConfig);
 			});

generators/app/templates/webapp/test-lt1_124/integration/HelloJourney.ts

@@ -0,0 +1,49 @@
+import opaTest from "sap/ui/test/opaQunit";
+import MainPage from "./pages/MainPage";
+
+const onTheMainPage = new MainPage();
+
+QUnit.module("Sample Hello Journey");
+
+opaTest("Should open the Hello dialog", function () {
+	// Arrangements
+	onTheMainPage.iStartMyUIComponent({
+		componentConfig: {
+			name: "<%= appId %>"
+		}
+	});
+
+	// Actions
+	onTheMainPage.iPressTheSayHelloWithDialogButton();
+
+	// Assertions
+	onTheMainPage.iShouldSeeTheHelloDialog();
+
+	// Actions
+	onTheMainPage.iPressTheOkButtonInTheDialog();
+
+	// Assertions
+	onTheMainPage.iShouldNotSeeTheHelloDialog();
+
+	// Cleanup
+	onTheMainPage.iTeardownMyApp();
+});
+
+opaTest("Should close the Hello dialog", function () {
+	// Arrangements
+	onTheMainPage.iStartMyUIComponent({
+		componentConfig: {
+			name: "<%= appId %>"
+		}
+	});
+
+	// Actions
+	onTheMainPage.iPressTheSayHelloWithDialogButton();
+	onTheMainPage.iPressTheOkButtonInTheDialog();
+
+	// Assertions
+	onTheMainPage.iShouldNotSeeTheHelloDialog();
+
+	// Cleanup
+	onTheMainPage.iTeardownMyApp();
+});

…app/test/integration/opaTests.qunit.html …-lt1_124/integration/opaTests.qunit.htmlgenerators/app/templates/webapp/test/integration/opaTests.qunit.html renamed to generators/app/templates/webapp/test-lt1_124/integration/opaTests.qunit.html generators/app/templates/webapp/test/integration/opaTests.qunit.html renamed to generators/app/templates/webapp/test-lt1_124/integration/opaTests.qunit.html

@@ -0,0 +1,8 @@
+/* @sapUiRequire */
+// https://api.qunitjs.com/config/autostart/
+QUnit.config.autostart = false;
+
+// import all your OPA journeys here
+void Promise.all([import("integration/HelloJourney")]).then(() => {
+	QUnit.start();
+});

generators/app/templates/webapp/test-lt1_124/integration/opaTests.qunit.ts

@@ -0,0 +1,50 @@
+import Opa5 from "sap/ui/test/Opa5";
+import Press from "sap/ui/test/actions/Press";
+
+const viewName = "<%= appId %>.view.Main";
+
+export default class MainPage extends Opa5 {
+	// Actions
+	iPressTheSayHelloWithDialogButton() {
+		this.waitFor({
+			id: "helloButton",
+			viewName,
+			actions: new Press(),
+			errorMessage: "Did not find the 'Say Hello With Dialog' button on the Main view"
+		});
+	}
+
+	iPressTheOkButtonInTheDialog() {
+		this.waitFor({
+			controlType: "sap.m.Button",
+			searchOpenDialogs: true,
+			viewName,
+			actions: new Press(),
+			errorMessage: "Did not find the 'OK' button in the Dialog"
+		});
+	}
+
+	// Assertions
+	iShouldSeeTheHelloDialog() {
+		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"
+		});
+	}
+
+	iShouldNotSeeTheHelloDialog() {
+		this.waitFor({
+			controlType: "sap.m.App", // dummy, I just want a check function, where I can search the DOM. Probably there is a better way for a NEGATIVE test (NO dialog).
+			check: function () {
+				return document.querySelectorAll(".sapMDialog").length === 0;
+			},
+			success: function () {
+				Opa5.assert.ok(true, "No dialog is open");
+			}
+		});
+	}
+}

generators/app/templates/webapp/test-lt1_124/integration/pages/MainPage.ts

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="expires" content="0" />
+		<meta charset="utf-8" />
+		<title>QUnit test suite for the UI5 Application: <%= namespace %></title>
+		<script src="../resources/sap/ui/qunit/qunit-redirect.js"></script>
+		<script src="testsuite.qunit.js" data-sap-ui-testsuite></script>
+	</head>
+	<body></body>
+</html>

generators/app/templates/webapp/test-lt1_124/testsuite.qunit.html

@@ -0,0 +1,9 @@
+/* eslint-disable */
+// @ts-nocheck
+window.suite = function () {
+	const suite = new parent.jsUnitTestSuite();
+	const sContextPath = location.pathname.match(/(.*\/)(?:[^/]+)/)?.[1];
+	suite.addTestPage(sContextPath + "unit/unitTests.qunit.html");
+	suite.addTestPage(sContextPath + "integration/opaTests.qunit.html");
+	return suite;
+};

generators/app/templates/webapp/test-lt1_124/testsuite.qunit.ts

@@ -0,0 +1,8 @@
+import Main from "<%= appURI %>/controller/Main.controller";
+
+QUnit.module("Sample Main controller test");
+
+QUnit.test("The Main controller class has a sayHello method", function (assert) {
+	// as a very basic test example just check the presence of the "sayHello" method
+	assert.strictEqual(typeof Main.prototype.sayHello, "function");
+});

generators/app/templates/webapp/test-lt1_124/unit/controller/Main.qunit.ts

@@ -0,0 +1,8 @@
+/* @sapUiRequire */
+// https://api.qunitjs.com/config/autostart/
+QUnit.config.autostart = false;
+
+// import all your QUnit tests here
+void Promise.all([import("unit/controller/Main.qunit")]).then(() => {
+	QUnit.start();
+});