@sap-ux/preview-middleware 0.12.11 → 0.12.12

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/adp/api-handler.js

@@ -1,143 +1,143 @@
-"use strict";
-
-sap.ui.define([], function () {
-  "use strict";
-
-  var ApiEndpoints = /*#__PURE__*/function (ApiEndpoints) {
-    ApiEndpoints["CHANGES"] = "/preview/api/changes";
-    ApiEndpoints["FRAGMENT"] = "/adp/api/fragment";
-    ApiEndpoints["CONTROLLER"] = "/adp/api/controller";
-    ApiEndpoints["CODE_EXT"] = "/adp/api/code_ext";
-    ApiEndpoints["MANIFEST_APP_DESCRIPTOR"] = "/manifest.appdescr_variant";
-    return ApiEndpoints;
-  }(ApiEndpoints || {});
-  var RequestMethod = /*#__PURE__*/function (RequestMethod) {
-    RequestMethod["GET"] = "GET";
-    RequestMethod["PUT"] = "PUT";
-    RequestMethod["POST"] = "POST";
-    RequestMethod["PATCH"] = "PATCH";
-    RequestMethod["DELETE"] = "DELETE";
-    return RequestMethod;
-  }(RequestMethod || {});
-  /**
-   * Requests a given endpoint
-   *
-   * @param endpoint API Endpoint
-   * @param method RequestMethod
-   * @param data Data to be sent to the server
-   * @returns Data from the server request
-   */
-  async function request(endpoint, method, data) {
-    const config = {
-      method,
-      body: JSON.stringify(data),
-      headers: {
-        'content-type': 'application/json'
-      }
-    };
-    try {
-      const response = await fetch(endpoint, config);
-      if (!response.ok) {
-        const errorData = await response.json();
-        const message = errorData?.message ?? '';
-        throw new Error(`Request failed, status: ${response.status}. ${message}`.trim());
-      }
-      switch (method) {
-        case RequestMethod.GET:
-          return response.json();
-        case RequestMethod.POST:
-          /**
-           * Since POST usually creates something
-           * and returns nothing (or a message) we just parse the text from res.send(msg)
-           */
-          return response.text();
-        default:
-          return response.json();
-      }
-    } catch (e) {
-      throw new Error(e.message);
-    }
-  }
-
-  /**
-   * Retrieves all XML fragments from the project's workspace
-   *
-   * @returns Generic Promise<T>
-   */
-  async function getFragments() {
-    return request(ApiEndpoints.FRAGMENT, RequestMethod.GET);
-  }
-
-  /**
-   * Writes an XML fragment to the project's workspace
-   *
-   * @param data Data to be send to the server
-   * @returns Generic Promise<T>
-   */
-  async function writeFragment(data) {
-    return request(ApiEndpoints.FRAGMENT, RequestMethod.POST, data);
-  }
-
-  /**
-   * Retrieves manifest.appdescr_variant from the project's workspace
-   *
-   * @returns Generic Promise<T>
-   */
-  async function getManifestAppdescr() {
-    return request(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
-  }
-
-  /**
-   * Retrieves all controller extensions from the project's workspace
-   *
-   * @returns Generic Promise<T>
-   */
-  async function readControllers() {
-    return request(ApiEndpoints.CONTROLLER, RequestMethod.GET);
-  }
-
-  /**
-   * Writes a Controller to the project's workspace
-   *
-   * @param data Data to be send to the server
-   * @returns Generic Promise<T>
-   */
-  async function writeController(data) {
-    return request(ApiEndpoints.CONTROLLER, RequestMethod.POST, data);
-  }
-
-  /**
-   * Checks for existing controller in the project's workspace
-   *
-   * @param controllerName Name of the controller
-   * @returns {CodeExtResponse} Returns path to existing controller if found
-   */
-  async function getExistingController(controllerName) {
-    return request(`${ApiEndpoints.CODE_EXT}/${controllerName}`, RequestMethod.GET);
-  }
-
-  /**
-   * Writes a change object to the project's workspace
-   *
-   * @param data Data to be send to the server
-   * @returns Generic Promise<T>
-   */
-  async function writeChange(data) {
-    return request(ApiEndpoints.CHANGES, RequestMethod.POST, data);
-  }
-  var __exports = {
-    __esModule: true
-  };
-  __exports.ApiEndpoints = ApiEndpoints;
-  __exports.RequestMethod = RequestMethod;
-  __exports.request = request;
-  __exports.getFragments = getFragments;
-  __exports.writeFragment = writeFragment;
-  __exports.getManifestAppdescr = getManifestAppdescr;
-  __exports.readControllers = readControllers;
-  __exports.writeController = writeController;
-  __exports.getExistingController = getExistingController;
-  __exports.writeChange = writeChange;
-  return __exports;
+"use strict";
+
+sap.ui.define([], function () {
+  "use strict";
+
+  var ApiEndpoints = /*#__PURE__*/function (ApiEndpoints) {
+    ApiEndpoints["CHANGES"] = "/preview/api/changes";
+    ApiEndpoints["FRAGMENT"] = "/adp/api/fragment";
+    ApiEndpoints["CONTROLLER"] = "/adp/api/controller";
+    ApiEndpoints["CODE_EXT"] = "/adp/api/code_ext";
+    ApiEndpoints["MANIFEST_APP_DESCRIPTOR"] = "/manifest.appdescr_variant";
+    return ApiEndpoints;
+  }(ApiEndpoints || {});
+  var RequestMethod = /*#__PURE__*/function (RequestMethod) {
+    RequestMethod["GET"] = "GET";
+    RequestMethod["PUT"] = "PUT";
+    RequestMethod["POST"] = "POST";
+    RequestMethod["PATCH"] = "PATCH";
+    RequestMethod["DELETE"] = "DELETE";
+    return RequestMethod;
+  }(RequestMethod || {});
+  /**
+   * Requests a given endpoint
+   *
+   * @param endpoint API Endpoint
+   * @param method RequestMethod
+   * @param data Data to be sent to the server
+   * @returns Data from the server request
+   */
+  async function request(endpoint, method, data) {
+    const config = {
+      method,
+      body: JSON.stringify(data),
+      headers: {
+        'content-type': 'application/json'
+      }
+    };
+    try {
+      const response = await fetch(endpoint, config);
+      if (!response.ok) {
+        const errorData = await response.json();
+        const message = errorData?.message ?? '';
+        throw new Error(`Request failed, status: ${response.status}. ${message}`.trim());
+      }
+      switch (method) {
+        case RequestMethod.GET:
+          return response.json();
+        case RequestMethod.POST:
+          /**
+           * Since POST usually creates something
+           * and returns nothing (or a message) we just parse the text from res.send(msg)
+           */
+          return response.text();
+        default:
+          return response.json();
+      }
+    } catch (e) {
+      throw new Error(e.message);
+    }
+  }
+
+  /**
+   * Retrieves all XML fragments from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function getFragments() {
+    return request(ApiEndpoints.FRAGMENT, RequestMethod.GET);
+  }
+
+  /**
+   * Writes an XML fragment to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeFragment(data) {
+    return request(ApiEndpoints.FRAGMENT, RequestMethod.POST, data);
+  }
+
+  /**
+   * Retrieves manifest.appdescr_variant from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function getManifestAppdescr() {
+    return request(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
+  }
+
+  /**
+   * Retrieves all controller extensions from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function readControllers() {
+    return request(ApiEndpoints.CONTROLLER, RequestMethod.GET);
+  }
+
+  /**
+   * Writes a Controller to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeController(data) {
+    return request(ApiEndpoints.CONTROLLER, RequestMethod.POST, data);
+  }
+
+  /**
+   * Checks for existing controller in the project's workspace
+   *
+   * @param controllerName Name of the controller
+   * @returns {CodeExtResponse} Returns path to existing controller if found
+   */
+  async function getExistingController(controllerName) {
+    return request(`${ApiEndpoints.CODE_EXT}/${controllerName}`, RequestMethod.GET);
+  }
+
+  /**
+   * Writes a change object to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeChange(data) {
+    return request(ApiEndpoints.CHANGES, RequestMethod.POST, data);
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.ApiEndpoints = ApiEndpoints;
+  __exports.RequestMethod = RequestMethod;
+  __exports.request = request;
+  __exports.getFragments = getFragments;
+  __exports.writeFragment = writeFragment;
+  __exports.getManifestAppdescr = getManifestAppdescr;
+  __exports.readControllers = readControllers;
+  __exports.writeController = writeController;
+  __exports.getExistingController = getExistingController;
+  __exports.writeChange = writeChange;
+  return __exports;
 });
 //# sourceMappingURL=api-handler.js.map