@sap-ux/preview-middleware 0.12.11 → 0.12.13

package/README.md

@@ -17,6 +17,7 @@ When this middleware is used together with the `reload-middleware`, then the ord
 | ---------------------- | --------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | `flp`                  |           |                  | Optional configuration object for the local Fiori launchpad                                                                         |
 | `flp.path`             | `string`  | `/test/flp.html` | The mount point of the local Fiori launchpad.                                                                                       |
+| `flp.init`             | `string`  | `undefined`      | Optional UI5 module/script to be executed after the standard initialization                                                         |
 | `flp.intent`           |           |                  | Optional intent to be used for the application                                                                                      |
 | `flp.intent.object`    | `string`  | `app`            | Optional intent object                                                                                                              |
 | `flp.intent.action`    | `string`  | `preview`        | Optional intent action                                                                                                              |
@@ -28,6 +29,7 @@ When this middleware is used together with the `reload-middleware`, then the ord
 | `rta`                  |           |                  | Optional configuration allowing to add mount points for runtime adaptation                                                          |
 | `rta.layer`            | `string`  | `(calculated)`   | Optional property for defining the runtime adaptation layer for changes (default is `CUSTOMER_BASE` or read from the project for adaptation projects) |
 | `rta.editors`          | `array`   | `undefined`      | Optional list of mount points for editing                                                                                           |
+| `test`                 | `array`   | `undefined`      | Optional list of configurations for automated testing                                                                               |
 | `debug`                | `boolean` | `false`          | Enables debug output                                                                                                                |
 
 ### `flp.apps`
@@ -54,6 +56,14 @@ Array of additional application configurations:
 | `path`          | `string` mandatory | The mount point to be used for the editor.                                                     |
 | `developerMode` | `boolean` optional | Enables/disables the runtime adaptation developer mode (only supported for adaptation projects) |
 
+### `test`
+| Option          | Type               | Description                                                                                    |
+| --------------- | -------------------| -----------------------------------------------------------------------------------------------|
+| `framework`     | `string` mandatory | Currently `OPA5` and `QUnit` are supported                                                     |
+| `path`          | `string` optional  | The mount point to be used for test suite                                                      |
+| `init`          | `string` optional  | The mount point to be used for test runner script                                              |
+| `pattern`       | `string` optional  | Optional glob pattern to find the tests. By default `/test/**/*Journey.*` is used for `OPA5` and `/test/**/*Test.*` is used for `QUnit`|
+
 
 ## Usage
 The middleware can be used without configuration. However, since the middleware intercepts a few requests that might otherwise be handled by a different middleware, it is strongly recommended to run other file serving middlewares after the `preview-middleware` e.g. `backend-proxy-middleware` and `ui5-proxy-middleware` (and the corresponding middlewares in the `@sap/ux-ui5-tooling`).
@@ -109,6 +119,18 @@ server:
           - path: /test/variant-editor.html
 ```
 
+### Test Suites
+If you want to also generate generic test suites and test runners for QUnit or OPA5 tests then you can use the following minimum configurations
+```Yaml
+server:
+  customMiddleware:
+  - name: preview-middleware
+    afterMiddleware: compression
+    configuration:
+      test:
+        - framework: QUnit
+        - framework: OPA5
+```
 
 ### Adaptation Project
 If you want to use the middleware in an adaption project, the additional `adp` object needs to be configured. This example would preview a local adaptation project merged with its reference application from the target system at `http://sap.example` and it will ignore certification validation errors. For adaptation projects, it is also recommended to add the `rta` configuration allowing to edit the project.

package/dist/base/flp.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../../../types/ui5.d.ts" />
 import type { ReaderCollection } from '@ui5/fs';
 import type { Router } from 'express';
-import type { App, FlpConfig, MiddlewareConfig, RtaConfig } from '../types';
+import type { App, FlpConfig, MiddlewareConfig, RtaConfig, TestConfig } from '../types';
 import type { Logger, ToolsLogger } from '@sap-ux/logger';
 import type { MiddlewareUtils } from '@ui5/server';
 import type { Manifest, UI5FlexLayer } from '@sap-ux/project-access';
@@ -44,6 +44,7 @@ export interface TemplateConfig {
         bootstrapOptions: string;
         resources: Record<string, string>;
     };
+    init?: string;
     flex?: {
         [key: string]: unknown;
         layer: UI5FlexLayer;
@@ -62,6 +63,7 @@ export declare class FlpSandbox {
     protected templateConfig: TemplateConfig;
     readonly config: FlpConfig;
     readonly rta?: RtaConfig;
+    readonly test?: TestConfig[];
     readonly router: EnhancedRouter;
     /**
      * Constructor setting defaults and keeping reference to workspace resources.
@@ -119,6 +121,13 @@ export declare class FlpSandbox {
      * Create required routes for flex.
      */
     private createFlexHandler;
+    /**
+     * Add routes for html and scripts required for a local test FLP.
+     *
+     * @param configs test configurations
+     * @param id application id from manifest
+     */
+    private addTestRoutes;
     /**
      * Add an application to the local FLP preview.
      *

package/dist/base/flp.js

@@ -16,6 +16,7 @@ const path_1 = require("path");
 const express_1 = require("express");
 const flex_1 = require("./flex");
 const adp_tooling_1 = require("@sap-ux/adp-tooling");
+const test_1 = require("./test");
 const DEVELOPER_MODE_CONFIG = new Map([
     // Run application in design time mode
     // Adds bindingString to BindingInfo objects. Required to create and read PropertyBinding changes
@@ -91,7 +92,7 @@ class FlpSandbox {
      * @param logger logger instance
      */
     constructor(config, project, utils, logger) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         this.project = project;
         this.utils = utils;
         this.logger = logger;
@@ -100,13 +101,15 @@ class FlpSandbox {
             intent: (_d = (_c = config.flp) === null || _c === void 0 ? void 0 : _c.intent) !== null && _d !== void 0 ? _d : DEFAULT_INTENT,
             apps: (_f = (_e = config.flp) === null || _e === void 0 ? void 0 : _e.apps) !== null && _f !== void 0 ? _f : [],
             libs: (_g = config.flp) === null || _g === void 0 ? void 0 : _g.libs,
-            theme: (_h = config.flp) === null || _h === void 0 ? void 0 : _h.theme
+            theme: (_h = config.flp) === null || _h === void 0 ? void 0 : _h.theme,
+            init: (_j = config.flp) === null || _j === void 0 ? void 0 : _j.init
         };
         if (!this.config.path.startsWith('/')) {
             this.config.path = `/${this.config.path}`;
         }
+        this.test = config.test;
         this.rta = config.rta;
-        logger.debug(`Config: ${JSON.stringify({ flp: this.config, rta: this.rta })}`);
+        logger.debug(`Config: ${JSON.stringify({ flp: this.config, rta: this.rta, test: this.test })}`);
         this.router = (0, express_1.Router)();
     }
     /**
@@ -124,9 +127,12 @@ class FlpSandbox {
             const flex = this.getFlexSettings();
             const supportedThemes = (_b = (_a = manifest['sap.ui5']) === null || _a === void 0 ? void 0 : _a.supportedThemes) !== null && _b !== void 0 ? _b : [DEFAULT_THEME];
             const ui5Theme = (_c = this.config.theme) !== null && _c !== void 0 ? _c : (supportedThemes.includes(DEFAULT_THEME) ? DEFAULT_THEME : supportedThemes[0]);
+            const id = manifest['sap.app'].id;
+            const ns = id.replace(/\./g, '/');
             this.templateConfig = {
                 basePath: (_d = path_1.posix.relative(path_1.posix.dirname(this.config.path), '/')) !== null && _d !== void 0 ? _d : '.',
                 apps: {},
+                init: this.config.init ? ns + this.config.init : undefined,
                 ui5: {
                     libs: this.getUI5Libs(manifest),
                     theme: ui5Theme,
@@ -136,7 +142,6 @@ class FlpSandbox {
                 },
                 locateReuseLibsScript: (_e = this.config.libs) !== null && _e !== void 0 ? _e : (yield this.hasLocateReuseLibsScript())
             };
-            const id = manifest['sap.app'].id;
             this.addApp(manifest, {
                 componentId,
                 target: (_f = resources[componentId !== null && componentId !== void 0 ? componentId : id]) !== null && _f !== void 0 ? _f : this.templateConfig.basePath,
@@ -150,6 +155,9 @@ class FlpSandbox {
                 this.rta.options.appName = id;
                 this.addEditorRoutes(this.rta);
             }
+            if (this.test) {
+                this.addTestRoutes(this.test, id);
+            }
             this.addRoutesForAdditionalApps();
             this.logger.info(`Initialized for app ${id}`);
             this.logger.debug(`Configured apps: ${JSON.stringify(this.templateConfig.apps)}`);
@@ -325,6 +333,61 @@ class FlpSandbox {
             }
         })));
     }
+    /**
+     * Add routes for html and scripts required for a local test FLP.
+     *
+     * @param configs test configurations
+     * @param id application id from manifest
+     */
+    addTestRoutes(configs, id) {
+        const ns = id.replace(/\./g, '/');
+        const htmlTemplate = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/test/qunit.html'), 'utf-8');
+        const initTemplate = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/test/qunit.js'), 'utf-8');
+        for (const testConfig of configs) {
+            const config = (0, test_1.mergeTestConfigDefaults)(testConfig);
+            this.logger.debug(`Add route for ${config.path}`);
+            // add route for the *.qunit.html
+            this.router.get(config.path, ((_req, res, next) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                this.logger.debug(`Serving test route: ${config.path}`);
+                const file = yield this.project.byPath(config.path);
+                if (file) {
+                    this.logger.warn(`HTML file returned at ${config.path} is loaded from the file system.`);
+                    next();
+                }
+                else {
+                    const templateConfig = {
+                        id,
+                        framework: config.framework,
+                        basePath: (_a = path_1.posix.relative(path_1.posix.dirname(config.path), '/')) !== null && _a !== void 0 ? _a : '.',
+                        initPath: `${ns}${config.init.replace('.js', '')}`
+                    };
+                    const html = (0, ejs_1.render)(htmlTemplate, templateConfig);
+                    res.status(200).contentType('html').send(html);
+                }
+            })));
+            if (testConfig.init !== undefined) {
+                this.logger.debug(`Skip serving test init script in favor of provided script: ${testConfig.init}`);
+                continue;
+            }
+            // add route for the init file
+            this.logger.debug(`Add route for ${config.init}`);
+            this.router.get(config.init, ((_req, res, next) => __awaiter(this, void 0, void 0, function* () {
+                this.logger.debug(`Serving test init script: ${config.init}`);
+                const files = yield this.project.byGlob(config.init.replace('.js', '.*'));
+                if ((files === null || files === void 0 ? void 0 : files.length) > 0) {
+                    this.logger.warn(`Script returned at ${config.path} is loaded from the file system.`);
+                    next();
+                }
+                else {
+                    const testFiles = yield this.project.byGlob(config.pattern);
+                    const templateConfig = { tests: (0, test_1.generateImportList)(ns, testFiles) };
+                    const html = (0, ejs_1.render)(initTemplate, templateConfig);
+                    res.status(200).contentType('application/javascript').send(html);
+                }
+            })));
+        }
+    }
     /**
      * Add an application to the local FLP preview.
      *

package/dist/base/test.d.ts

@@ -0,0 +1,24 @@
+/// <reference path="../../../../types/ui5.d.ts" />
+import type { Resource } from '@ui5/fs';
+import type { TestConfig } from '../types';
+/**
+ * Merge the given test configuration with the default values.
+ *
+ * @param config test configuration
+ * @returns merged test configuration
+ */
+export declare function mergeTestConfigDefaults(config: TestConfig): {
+    framework: "OPA5" | "QUnit";
+    path: string;
+    init: string;
+    pattern: string;
+};
+/**
+ * Generate a list of imports from a list of resources.
+ *
+ * @param ns namespace of the test files
+ * @param resourceList list of resources representing test files
+ * @returns array of strings representing the tests
+ */
+export declare function generateImportList(ns: string, resourceList: Resource[]): string[];
+//# sourceMappingURL=test.d.ts.map

package/dist/base/test.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateImportList = exports.mergeTestConfigDefaults = void 0;
+const DEFAULTS = {
+    qunit: {
+        path: '/test/unitTests.qunit.html',
+        init: '/test/unitTests.qunit.js',
+        pattern: '/test/**/*Test.*',
+        framework: 'QUnit'
+    },
+    opa5: {
+        path: '/test/opaTests.qunit.html',
+        init: '/test/opaTests.qunit.js',
+        pattern: '/test/**/*Journey.*',
+        framework: 'OPA5'
+    }
+};
+/**
+ * Merge the given test configuration with the default values.
+ *
+ * @param config test configuration
+ * @returns merged test configuration
+ */
+function mergeTestConfigDefaults(config) {
+    var _a, _b, _c, _d;
+    const key = config.framework.toLowerCase();
+    const defaults = (_a = DEFAULTS[key]) !== null && _a !== void 0 ? _a : {};
+    if (config.path && !config.path.startsWith('/')) {
+        config.path = `/${config.path}`;
+    }
+    if (config.init && !config.init.startsWith('/')) {
+        config.init = `/${config.init}`;
+    }
+    return {
+        framework: config.framework,
+        path: (_b = config.path) !== null && _b !== void 0 ? _b : defaults.path,
+        init: (_c = config.init) !== null && _c !== void 0 ? _c : defaults.init,
+        pattern: (_d = config.pattern) !== null && _d !== void 0 ? _d : defaults.pattern
+    };
+}
+exports.mergeTestConfigDefaults = mergeTestConfigDefaults;
+/**
+ * Generate a list of imports from a list of resources.
+ *
+ * @param ns namespace of the test files
+ * @param resourceList list of resources representing test files
+ * @returns array of strings representing the tests
+ */
+function generateImportList(ns, resourceList) {
+    return resourceList
+        ? resourceList.map((file) => {
+            const path = file.getPath().split('.');
+            path.pop();
+            return `${ns}${path.join('.')}`;
+        })
+        : [];
+}
+exports.generateImportList = generateImportList;
+//# sourceMappingURL=test.js.map

package/dist/client/flp/init.js

@@ -145,12 +145,14 @@ sap.ui.define(["sap/base/Log", "sap/ui/core/IconPool", "sap/base/i18n/ResourceBu
    * @param params init parameters read from the script tag
    * @param params.appUrls JSON containing a string array of application urls
    * @param params.flex JSON containing the flex configuration
+   * @param params.customInit path to the custom init module to be called
    * @returns promise
    */
   async function init(_ref) {
     let {
       appUrls,
-      flex
+      flex,
+      customInit
     } = _ref;
     // Register RTA if configured
     if (flex) {
@@ -189,6 +191,11 @@ sap.ui.define(["sap/base/Log", "sap/ui/core/IconPool", "sap/base/i18n/ResourceBu
       await registerComponentDependencyPaths(JSON.parse(appUrls));
     }
 
+    // Load custom initialization module
+    if (customInit) {
+      sap.ui.require([customInit]);
+    }
+
     // init
     setI18nTitle();
     registerSAPFonts();
@@ -199,7 +206,8 @@ sap.ui.define(["sap/base/Log", "sap/ui/core/IconPool", "sap/base/i18n/ResourceBu
   if (bootstrapConfig) {
     init({
       appUrls: bootstrapConfig.getAttribute('data-open-ux-preview-libs-manifests'),
-      flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings')
+      flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings'),
+      customInit: bootstrapConfig.getAttribute('data-open-ux-preview-customInit')
     }).catch(() => Log.error('Sandbox initialization failed.'));
   }
   var __exports = {

package/dist/client/flp/init.ts

@@ -185,9 +185,18 @@ export function setI18nTitle(i18nKey = 'appTitle') {
  * @param params init parameters read from the script tag
  * @param params.appUrls JSON containing a string array of application urls
  * @param params.flex JSON containing the flex configuration
+ * @param params.customInit path to the custom init module to be called
  * @returns promise
  */
-export async function init({ appUrls, flex }: { appUrls?: string | null; flex?: string | null }): Promise<void> {
+export async function init({
+    appUrls,
+    flex,
+    customInit
+}: {
+    appUrls?: string | null;
+    flex?: string | null;
+    customInit?: string | null;
+}): Promise<void> {
     // Register RTA if configured
     if (flex) {
         sap.ushell.Container.attachRendererCreatedEvent(async function () {
@@ -232,6 +241,11 @@ export async function init({ appUrls, flex }: { appUrls?: string | null; flex?:
         await registerComponentDependencyPaths(JSON.parse(appUrls));
     }
 
+    // Load custom initialization module
+    if (customInit) {
+        sap.ui.require([customInit]);
+    }
+
     // init
     setI18nTitle();
     registerSAPFonts();
@@ -243,6 +257,7 @@ const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
 if (bootstrapConfig) {
     init({
         appUrls: bootstrapConfig.getAttribute('data-open-ux-preview-libs-manifests'),
-        flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings')
+        flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings'),
+        customInit: bootstrapConfig.getAttribute('data-open-ux-preview-customInit')
     }).catch(() => Log.error('Sandbox initialization failed.'));
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './ui5/middleware';
 export { FlpSandbox, initAdp } from './base';
-export { FlpConfig, RtaConfig } from './types';
+export { FlpConfig, RtaConfig, TestConfig, MiddlewareConfig } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts

@@ -48,12 +48,35 @@ export interface FlpConfig {
     libs?: boolean;
     apps: App[];
     theme?: string;
+    /**
+     * Optional: allows to specify a custom init script executed in addition to the default one
+     */
+    init?: string;
+}
+interface OptionalTestConfig {
+    /**
+     * Optional: path hosting the main test page
+     */
+    path: string;
+    /**
+     * Optional: path to the init script
+     */
+    init: string;
+    /**
+     * Optional: pattern to match the test files
+     */
+    pattern: string;
+}
+export interface TestConfig extends Partial<OptionalTestConfig> {
+    framework: 'OPA5' | 'QUnit';
 }
+export type InternalTestConfig = TestConfig & OptionalTestConfig;
 /**
  * Middleware configuration.
  */
 export interface MiddlewareConfig {
     flp?: Partial<FlpConfig>;
+    test?: TestConfig[];
     rta?: RtaConfig;
     adp?: AdpPreviewConfig;
     debug?: boolean;

package/package.json

@@ -9,7 +9,7 @@
   "bugs": {
     "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
   },
-  "version": "0.12.11",
+  "version": "0.12.13",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
   "dependencies": {
     "ejs": "3.1.9",
     "@sap-ux/logger": "0.5.1",
-    "@sap-ux/adp-tooling": "0.9.3",
+    "@sap-ux/adp-tooling": "0.9.4",
     "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@0.4.15"
   },
   "devDependencies": {
@@ -39,8 +39,8 @@
     "supertest": "6.3.3",
     "@sap-ux-private/playwright": "0.0.3",
     "dotenv": "16.3.1",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.9.1",
-    "@sap-ux/project-access": "1.18.0",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.9.2",
+    "@sap-ux/project-access": "1.19.0",
     "@sap-ux/axios-extension": "1.11.3",
     "@sap-ux/store": "0.5.0"
   },

package/templates/flp/sandbox.html

@@ -55,7 +55,8 @@
         data-sap-ui-resourceroots='<%- JSON.stringify(ui5.resources) %>'
         data-sap-ui-frameOptions="allow"
         data-sap-ui-xx-componentPreload="off"<%- ui5.bootstrapOptions %>
-        data-sap-ui-oninit="module:open/ux/preview/client/flp/init"<% if (locals.flex) { %>
+        data-sap-ui-oninit="module:open/ux/preview/client/flp/init"<% if (locals.init) { %>
+        data-open-ux-preview-customInit='<%- init %>'<% } if (locals.flex) { %>
         data-open-ux-preview-flex-settings='<%- JSON.stringify(flex) %>'<% } if (locals.locateReuseLibsScript) { %>
         data-open-ux-preview-libs-manifests='<%- JSON.stringify(Object.values(apps).map(app => app.url)) %>'<% } %>>
     </script>
@@ -63,12 +64,12 @@
     <script type="text/javascript">
         (() => sap.ui.require(['open/ux/preview/client/flp/initConnectors']))()
     </script>
-    
-    <% if (locals.flex && flex?.scenario === 'ADAPTATION_PROJECT') { %>
+
+<% if (locals.flex && flex?.scenario === 'ADAPTATION_PROJECT') { %>
         <!-- Temporary fix until RTA provides api for enable/disable buttons in main RTA navigation menu -->
     <style>
         .sapUiRtaToolbarActionsSection button[aria-label="Exit"],
-        .sapUiRtaToolbarActionsSection button[id$="fragment--sapUiRta_feedback"], 
+        .sapUiRtaToolbarActionsSection button[id$="fragment--sapUiRta_feedback"],
         .sapUiRtaToolbarActionsSection button[id$="fragment--sapUiRta_actionsToolbar-overflowButton"] {
         display:none;
         }

package/templates/test/qunit.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title><%- framework %> tests</title>
+	<meta charset="utf-8">
+
+	<script
+		src="<%- basePath %>/resources/sap-ui-core.js"
+		data-sap-ui-theme='sap_fiori_3'
+		data-sap-ui-resourceroots='{
+			"<%- id %>": "<%- basePath %>"
+		}'
+		data-sap-ui-animation="false"
+		data-sap-ui-compatVersion="edge"
+		data-sap-ui-async="true"
+		data-sap-ui-oninit="module:<%- initPath %>">
+	</script>
+
+	<link rel="stylesheet" type="text/css" href="<%- basePath %>/resources/sap/ui/thirdparty/qunit-2.css">
+</head>
+<body>
+	<div id="qunit"></div>
+	<div id="qunit-fixture"></div>
+</body>
+</html>

package/templates/test/qunit.js

@@ -0,0 +1,6 @@
+sap.ui.define([
+    'sap/ui/thirdparty/qunit-2'
+], function() {
+        sap.ui.require(<%- JSON.stringify(tests) %>);
+    }
+);