@ui5/mcp-server 0.1.0

package/resources/template-js/webapp/Component.js

@@ -0,0 +1,41 @@
+sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/Device", "./model/models"], function (UIComponent, Device, models) {
+	"use strict";
+
+	return UIComponent.extend("<%= appId %>.Component", {
+		metadata: {
+			manifest: "json",
+			interfaces: ["sap.ui.core.IAsyncContentCreation"]
+		},
+		init: function () {
+			// call the base component's init function
+			UIComponent.prototype.init.call(this); // create the views based on the url/hash
+
+			// create the device model
+			this.setModel(models.createDeviceModel(), "device");
+
+			// create the views based on the url/hash
+			this.getRouter().initialize();
+		},
+		/**
+		 * This method can be called to determine whether the sapUiSizeCompact or sapUiSizeCozy
+		 * design mode class should be set, which influences the size appearance of some controls.
+		 * @public
+		 * @returns {string} css class, either 'sapUiSizeCompact' or 'sapUiSizeCozy' - or an empty string if no css class should be set
+		 */
+		getContentDensityClass: function () {
+			if (this.contentDensityClass === undefined) {
+				// check whether FLP has already set the content density class; do nothing in this case
+				if (document.body.classList.contains("sapUiSizeCozy") || document.body.classList.contains("sapUiSizeCompact")) {
+					this.contentDensityClass = "";
+				} else if (!Device.support.touch) {
+					// apply "compact" mode if touch is not supported
+					this.contentDensityClass = "sapUiSizeCompact";
+				} else {
+					// "cozy" in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Table
+					this.contentDensityClass = "sapUiSizeCozy";
+				}
+			}
+			return this.contentDensityClass;
+		}
+	});
+});

package/resources/template-js/webapp/controller/App.controller.js

@@ -0,0 +1,10 @@
+sap.ui.define(["./BaseController"], function (BaseController) {
+	"use strict";
+
+	return BaseController.extend("<%= appId %>.controller.App", {
+		onInit: function () {
+			// apply content density mode to root view
+			this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
+		}
+	});
+});

package/resources/template-js/webapp/controller/BaseController.js

@@ -0,0 +1,67 @@
+sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/UIComponent", "sap/ui/core/routing/History"], function (Controller, UIComponent, History) {
+	"use strict";
+
+	return Controller.extend("<%= appId %>.controller.BaseController", {
+		/**
+		 * Convenience method to get the components' router instance.
+		 * @returns {sap.m.routing.Router} The router instance
+		 */
+		getRouter: function () {
+			return UIComponent.getRouterFor(this);
+		},
+
+		/**
+		 * Convenience method for getting the i18n resource bundle of the component.
+		 * @returns {Promise<sap.base.i18n.ResourceBundle>} The i18n resource bundle of the component
+		 */
+		getResourceBundle: function () {
+			const oModel = this.getOwnerComponent().getModel("i18n");
+			return oModel.getResourceBundle();
+		},
+
+		/**
+		 * Convenience method for getting the view model by name in every controller of the application.
+		 * @param {string} [sName] The model name
+		 * @returns {sap.ui.model.Model} The model instance
+		 */
+		getModel: function (sName) {
+			return this.getView().getModel(sName);
+		},
+
+		/**
+		 * Convenience method for setting the view model in every controller of the application.
+		 * @param {sap.ui.model.Model} oModel The model instance
+		 * @param {string} [sName] The model name
+		 * @returns {sap.ui.core.mvc.Controller} The current base controller instance
+		 */
+		setModel: function (oModel, sName) {
+			this.getView().setModel(oModel, sName);
+			return this;
+		},
+
+		/**
+		 * Convenience method for triggering the navigation to a specific target.
+		 * @public
+		 * @param {string} sName Target name
+		 * @param {object} [oParameters] Navigation parameters
+		 * @param {boolean} [bReplace] Defines if the hash should be replaced (no browser history entry) or set (browser history entry)
+		 */
+		navTo: function (sName, oParameters, bReplace) {
+			this.getRouter().navTo(sName, oParameters, undefined, bReplace);
+		},
+
+		/**
+		 * Convenience event handler for navigating back.
+		 * It there is a history entry we go one step back in the browser history
+		 * If not, it will replace the current entry of the browser history with the main route.
+		 */
+		onNavBack: function () {
+			const sPreviousHash = History.getInstance().getPreviousHash();
+			if (sPreviousHash !== undefined) {
+				window.history.go(-1);
+			} else {
+				this.getRouter().navTo("main", {}, undefined, true);
+			}
+		}
+	});
+});

package/resources/template-js/webapp/controller/Main.controller.js

@@ -0,0 +1,14 @@
+sap.ui.define(["./BaseController"<% if (!oDataEntitySet) { %>, "sap/m/MessageBox"<% } %>], function (BaseController<% if (!oDataEntitySet) { %>, MessageBox<% } %>) {
+	"use strict";
+
+	return BaseController.extend("<%= appId %>.controller.Main", {<% if (!oDataEntitySet) { %>
+		sayHello: function () {
+			MessageBox.show("Hello World!");
+		}<% } else { %>
+
+		onRowSelectionChange: function(oEvent) {
+			const selectedContext = oEvent.getParameter("rowContext");
+			this.byId("detailForm").setBindingContext(selectedContext);
+		}<% } %>
+	});
+});

package/resources/template-js/webapp/i18n/i18n.properties

@@ -0,0 +1,3 @@
+appTitle=<%= appId %>
+appDescription=UI5 Application <%= appId %>
+btnText=Say Hello

package/resources/template-js/webapp/i18n/i18n_en.properties

@@ -0,0 +1,3 @@
+appTitle=<%= appId %>
+appDescription=UI5 Application <%= appId %>
+btnText=Say Hello

package/resources/template-js/webapp/index-cdn.html

@@ -0,0 +1,34 @@
+<!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>UI5 Application: <%= namespace %></title>
+
+		<script
+			id="sap-ui-bootstrap"
+			src="https://<%= cdnDomain %>/<%= frameworkVersion %>/resources/sap-ui-core.js"<% if (gte1_120_0) { %>
+			data-sap-ui-resource-roots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compat-version="edge"
+			data-sap-ui-frame-options="trusted"<% } else { %>
+			data-sap-ui-theme="<%= defaultTheme %>"
+			data-sap-ui-resourceroots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-frameOptions="trusted"<% } %>
+			data-sap-ui-async="true"
+		></script>
+	</head>
+
+	<body class="sapUiBody">
+		<div data-sap-ui-component data-name="<%= appId %>"></div>
+	</body>
+</html>

package/resources/template-js/webapp/index.html

@@ -0,0 +1,34 @@
+<!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>UI5 Application: <%= namespace %></title>
+
+		<script
+			id="sap-ui-bootstrap"
+			src="resources/sap-ui-core.js"<% if (gte1_120_0) { %>
+			data-sap-ui-resource-roots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compat-version="edge"
+			data-sap-ui-frame-options="trusted"<% } else { %>
+			data-sap-ui-theme="<%= defaultTheme %>"
+			data-sap-ui-resourceroots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-frameOptions="trusted"<% } %>
+			data-sap-ui-async="true"
+		></script>
+	</head>
+
+	<body class="sapUiBody">
+		<div data-sap-ui-component data-name="<%= appId %>"></div>
+	</body>
+</html>

package/resources/template-js/webapp/manifest.json

@@ -0,0 +1,103 @@
+{
+	"_version": "1.21.0",
+
+	"sap.app": {
+		"id": "<%= appId %>",
+		"type": "application",
+		"i18n": "i18n/i18n.properties",
+		"title": "{{appTitle}}",
+		"description": "{{appDescription}}",
+		"applicationVersion": {
+			"version": "${version}"
+		}<% if (oDataV4Url) { %>,
+		"dataSources": {
+			"default": {
+				"uri": "<%= oDataV4Url %>",
+				"type": "OData",
+				"settings": {
+					"odataVersion": "4.0"
+				}
+			}
+		}<% } %>
+	},
+
+	"sap.ui": {
+		"technology": "UI5",
+		"icons": {},
+		"deviceTypes": {
+			"desktop": true,
+			"tablet": true,
+			"phone": true
+		}
+	},
+
+	"sap.ui5": {
+		"rootView": {
+			"viewName": "<%= appId %>.view.App",
+			"type": "XML",
+			"id": "app"
+		},
+
+		"dependencies": {
+			"minUI5Version": "<%= frameworkVersion %>",
+			"libs": {
+				"sap.ui.core": {},
+				"sap.m": {}<% if (oDataEntitySet) { %>,
+				"sap.ui.layout": {},
+				"sap.f": {},
+				"sap.ui.table": {}<% } %>
+			}
+		},
+
+		"handleValidation": true,
+
+		"contentDensities": {
+			"compact": true,
+			"cozy": true
+		},
+
+		"models": {
+			"i18n": {
+				"type": "sap.ui.model.resource.ResourceModel",
+				"settings": {
+					"bundleName": "<%= appId %>.i18n.i18n",
+					"async": true
+				}
+			}<% if (oDataV4Url) { %>,
+			"": {
+				"dataSource": "default",
+				"preload": true,
+				"settings": {
+					"autoExpandSelect": true,<% if (serverRequiresXCSRF) { %>
+					"earlyRequests": true,<% } %>
+					"operationMode": "Server"<% if (lt1_110_0) { %>,
+					"synchronizationMode": "None"<% } %>
+				}
+			}<% } %>
+		},
+
+		"routing": {
+			"config": {
+				"routerClass": "sap.m.routing.Router",
+				"type": "View",
+				"viewType": "XML",
+				"path": "<%= appId %>.view",
+				"controlId": "app",
+				"controlAggregation": "pages"
+			},
+			"routes": [
+				{
+					"pattern": "",
+					"name": "main",
+					"target": "main"
+				}
+			],
+			"targets": {
+				"main": {
+					"id": "main",
+					"name": "Main"
+				}
+			}
+		}
+	}
+}

package/resources/template-js/webapp/model/formatter.js

@@ -0,0 +1,9 @@
+sap.ui.define(function () {
+	"use strict";
+
+	return {
+		formatValue: function (value) {
+			return value && value.toUpperCase();
+		}
+	};
+});

package/resources/template-js/webapp/model/models.js

@@ -0,0 +1,11 @@
+sap.ui.define(["sap/ui/model/json/JSONModel", "sap/ui/model/BindingMode", "sap/ui/Device"], function (JSONModel, BindingMode, Device) {
+	"use strict";
+
+	return {
+		createDeviceModel: function () {
+			const oModel = new JSONModel(Device);
+			oModel.setDefaultBindingMode(BindingMode.OneWay);
+			return oModel;
+		}
+	};
+});

package/resources/template-js/webapp/test/Test.qunit.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<script
+			src="../resources/sap/ui/test/starter/runTest.js"
+			data-sap-ui-resource-roots='{
+			"test-resources.<%= appId %>": "./"
+		}'
+		></script>
+	</head>
+	<body class="sapUiBody">
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+	</body>
+</html>

package/resources/template-js/webapp/test/integration/HelloJourney.js

@@ -0,0 +1,85 @@
+/* global QUnit */
+sap.ui.define(["sap/ui/test/opaQunit", "./pages/Main"], function (opaTest) {
+	"use strict";
+
+<% if (!oDataEntitySet) { %>	QUnit.module("Sample Hello Journey");
+
+	opaTest("Should open the Hello dialog", function (Given, When, Then) {
+		// Arrangements
+		Given.iStartMyUIComponent({
+			componentConfig: {
+				name: "<%= appId %>"
+			}
+		});
+
+		// Actions
+		When.onTheMainPage.iPressTheSayHelloButton();
+
+		// Assertions
+		Then.onTheMainPage.iShouldSeeTheHelloDialog();
+
+		// Actions
+		When.onTheMainPage.iPressTheOkButtonInTheDialog();
+
+		// Assertions
+		Then.onTheMainPage.iShouldNotSeeTheHelloDialog();
+
+		// Cleanup
+		Then.iTeardownMyApp();
+	});
+
+	opaTest("Should close the Hello dialog", function (Given, When, Then) {
+		// Arrangements
+		Given.iStartMyUIComponent({
+			componentConfig: {
+				name: "<%= appId %>"
+			}
+		});
+
+		// Actions
+		When.onTheMainPage.iPressTheSayHelloButton();
+		When.onTheMainPage.iPressTheOkButtonInTheDialog();
+
+		// Assertions
+		Then.onTheMainPage.iShouldNotSeeTheHelloDialog();
+
+		// Cleanup
+		Then.iTeardownMyApp();
+	});
+<% } %><% if (oDataEntitySet) { %>	QUnit.module("Sample Data Journey");
+
+	opaTest("Should display the data table", function (Given, When, Then) {
+		// Arrangements
+		Given.iStartMyUIComponent({
+			componentConfig: {
+				name: "<%= appId %>"
+			}
+		});
+
+		// Assertions
+		Then.onTheMainPage.iShouldSeeTheDataTable();
+		Then.onTheMainPage.iShouldSeeTheDetailForm();
+		Then.onTheMainPage.iShouldSeeTableWithCorrectColumns();
+
+		// Cleanup
+		Then.iTeardownMyApp();
+	});
+
+	opaTest("Should select table row and populate detail form", function (Given, When, Then) {
+		// Arrangements
+		Given.iStartMyUIComponent({
+			componentConfig: {
+				name: "<%= appId %>"
+			}
+		});
+
+		// Actions
+		When.onTheMainPage.iSelectFirstTableRow();
+
+		// Assertions
+		Then.onTheMainPage.iShouldSeeTheDetailForm();
+
+		// Cleanup
+		Then.iTeardownMyApp();
+	});
+<% } %>});

package/resources/template-js/webapp/test/integration/opaTests.qunit.js

@@ -0,0 +1 @@
+sap.ui.define(["./HelloJourney"]);

package/resources/template-js/webapp/test/integration/pages/Main.js

@@ -0,0 +1,112 @@
+sap.ui.define(["sap/ui/test/Opa5"<% if (!oDataEntitySet) { %>, "sap/ui/test/actions/Press"<% } %>], function (Opa5<% if (!oDataEntitySet) { %>, Press<% } %>) {
+	"use strict";
+
+	Opa5.createPageObjects({
+		onTheMainPage: {
+			actions: {<% if (!oDataEntitySet) { %>
+				iPressTheSayHelloButton: function () {
+					return this.waitFor({
+						id: "helloButton",
+						viewName: "<%= appId %>.view.Main",
+						actions: new Press(),
+						errorMessage: "Did not find the 'Say Hello With Dialog' button on the App view"
+					});
+				},
+
+				iPressTheOkButtonInTheDialog: function () {
+					return this.waitFor({
+						controlType: "sap.m.Button",
+						searchOpenDialogs: true,
+						viewName: "<%= appId %>.view.Main",
+						actions: new Press(),
+						errorMessage: "Did not find the 'OK' button in the Dialog"
+					});
+				}<% } else { %>
+				iSelectFirstTableRow: function () {
+					return this.waitFor({
+						controlType: "sap.ui.table.Table",
+						viewName: "<%= appId %>.view.Main",
+						actions: function (oTable) {
+							// Select the first row if available
+							if (oTable.getRows().length > 0) {
+								oTable.setSelectedIndex(0);
+								oTable.fireRowSelectionChange({
+									rowIndex: 0,
+									rowContext: oTable.getRows()[0].getBindingContext(),
+									userInteraction: true
+								});
+							}
+						},
+						errorMessage: "Did not find the data table"
+					});
+				}<% } %>
+			},
+
+			assertions: {<% if (!oDataEntitySet) { %>
+				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"
+					});
+				},
+
+				iShouldNotSeeTheHelloDialog: function () {
+					return 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");
+						}
+					});
+				}<% } else { %>
+				iShouldSeeTheDataTable: function () {
+					return this.waitFor({
+						controlType: "sap.ui.table.Table",
+						viewName: "<%= appId %>.view.Main",
+						success: function (aTables) {
+							Opa5.assert.ok(aTables.length > 0, "The data table is displayed");
+						},
+						errorMessage: "Did not find the data table"
+					});
+				},
+
+				iShouldSeeTheDetailForm: function () {
+					return this.waitFor({
+						id: "detailForm",
+						viewName: "<%= appId %>.view.Main",
+						success: function (oForm) {
+							Opa5.assert.ok(oForm, "The detail form is displayed");
+						},
+						errorMessage: "Did not find the detail form"
+					});
+				},
+
+				iShouldSeeTableWithCorrectColumns: function () {
+					return this.waitFor({
+						controlType: "sap.ui.table.Table",
+						viewName: "<%= appId %>.view.Main",
+						success: function (aTables) {
+							const oTable = aTables[0];
+							const aColumns = oTable.getColumns();
+							const expectedColumns = [<% entityProperties.forEach(function(property, index) { %>"<%= property %>"<% if (index < entityProperties.length - 1) { %>, <% } %><% }); %>];
+							
+							Opa5.assert.equal(aColumns.length, expectedColumns.length, "Table has the correct number of columns");
+							
+							for (let i = 0; i < expectedColumns.length; i++) {
+								const sColumnText = aColumns[i].getLabel().getText();
+								Opa5.assert.equal(sColumnText, expectedColumns[i], "Column " + i + " has correct label: " + expectedColumns[i]);
+							}
+						},
+						errorMessage: "Table columns do not match expected properties"
+					});
+				}<% } %>
+			}
+		}
+	});
+});

package/resources/template-js/webapp/test/testsuite.qunit.html

@@ -0,0 +1,18 @@
+<!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/test/starter/createSuite.js"
+			data-sap-ui-testsuite="test-resources/<%= appURI %>/testsuite.qunit"
+			data-sap-ui-resource-roots='{
+				"test-resources.<%= appId %>": "./"
+			}'
+		></script>
+	</head>
+	<body></body>
+</html>

package/resources/template-js/webapp/test/testsuite.qunit.js

@@ -0,0 +1,37 @@
+sap.ui.define(function () {
+	"use strict";
+
+	return {
+		name: "QUnit test suite for the UI5 Application: <%= namespace %>",
+		defaults: {
+			page: "ui5://test-resources/<%= appURI %>/Test.qunit.html?testsuite={suite}&test={name}",
+			qunit: {
+				version: 2
+			},
+			sinon: {
+				version: 1
+			},
+			ui5: {
+				language: "EN",
+				theme: "<%= defaultTheme %>"
+			},
+			coverage: {
+				only: "<%= appURI %>/",
+				never: "test-resources/<%= appURI %>/"
+			},
+			loader: {
+				paths: {
+					"<%= appURI %>": "../"
+				}
+			}
+		},
+		tests: {
+			"unit/unitTests": {
+				title: "Unit tests for <%= namespace %>"
+			},
+			"integration/opaTests": {
+				title: "Integration tests for <%= namespace %>"
+			}
+		}
+	};
+});

package/resources/template-js/webapp/test/unit/controller/Main.qunit.js

@@ -0,0 +1,11 @@
+/* global QUnit */
+sap.ui.define(["<%= appURI %>/controller/Main.controller"], function (MainController) {
+	"use strict";
+
+	QUnit.module("Sample Main controller test");
+
+	QUnit.test("The MainController class has a <% if (!oDataEntitySet) { %>sayHello<% } else { %>onRowSelectionChange<% } %> method", function (assert) {
+		// as a very basic test example just check the presence of the "<% if (!oDataEntitySet) { %>sayHello<% } else { %>onRowSelectionChange<% } %>" method
+		assert.strictEqual(typeof MainController.prototype.<% if (!oDataEntitySet) { %>sayHello<% } else { %>onRowSelectionChange<% } %>, "function");
+	});
+});

package/resources/template-js/webapp/test/unit/unitTests.qunit.js

@@ -0,0 +1 @@
+sap.ui.define(["./controller/Main.qunit"]);