@sap-ux/jest-environment-ui5 5.3.5 → 5.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sap-ux/jest-environment-ui5",
-  "version": "5.3.5",
+  "version": "5.3.6",
   "description": "Jest matchers for files and folders",
   "repository": {
     "type": "git",
@@ -23,8 +23,8 @@
     "@ui5/project": "^3.9.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@ui5/project": "^3.9.0",
     "@ui5/cli": "^3",
+    "@ui5/project": "^3.9.0",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0"
   },

package/src/env/mockXHR.js

@@ -7,9 +7,41 @@ const fs = require('fs');
  * @param {object} pathMappingFn The path mapping function.
  * @param {object} shimmedFilePath The shimmed file paths.
  * @param {object} mockData An object containing file content for the mock.
+ * @param {object} XHR The real XMLHttpRequest class.
  * @returns {object} The fake XMLHttpRequest class.
  */
-function createMockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData) {
+function createMockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData, XHR) {
+    let realXhr = new XHR();
+
+    /**
+     * Handles the real XHR send.
+     * @param mockXHR The mock XHR object.
+     * @param data The data to send.
+     */
+    function handleRealXHRSend(mockXHR, data) {
+        realXhr.addEventListener('load', function () {
+            mockXHR.responseText = realXhr.responseText;
+            if (mockXHR.listeners['load']) {
+                mockXHR.listeners['load']?.({
+                    status: 200,
+                    responseText: realXhr.responseText
+                });
+            } else {
+                mockXHR['onload']([]);
+            }
+        });
+        if (mockXHR.onload) {
+            realXhr.onload = function () {
+                mockXHR.responseText = realXhr.responseText;
+                if (mockXHR.onload) {
+                    mockXHR.onload.apply(realXhr, arguments);
+                }
+            };
+        }
+
+        realXhr.send(data);
+    }
+
     return {
         /**
          * Returns true if cross-site Access-Control requests should be made using credentials such as cookies or authorization headers; otherwise false.
@@ -22,19 +54,29 @@ function createMockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData) {
          * @param {string} url The URL of the request.
          */
         open: function (type, url) {
-            if (url.startsWith('./')) {
-                this.url = url;
-            } else if (url.endsWith('.js')) {
-                this.url = url.substring(0, url.length - 3);
+            if (url.startsWith('http')) {
+                realXhr.open(type, url);
             } else {
-                this.url = url;
+                realXhr = undefined;
+                if (url.startsWith('./')) {
+                    this.url = url;
+                } else if (url.endsWith('.js')) {
+                    this.url = url.substring(0, url.length - 3);
+                } else {
+                    this.url = url;
+                }
             }
         },
         /**
          * Sends the request.
          * If the request is asynchronous (which is the default), this method returns as soon as the request is sent.
+         * @param {string} data The data to send.
          */
-        send: function () {
+        send: function (data) {
+            if (realXhr) {
+                handleRealXHRSend(this, data);
+                return;
+            }
             let fileContent = mockData[this.url];
             if (fileContent) {
                 this.responseText = fileContent;
@@ -95,6 +137,9 @@ function createMockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData) {
          * @returns {{}|{"Content-Type": string}|string} The response headers.
          */
         getAllResponseHeaders: function () {
+            if (realXhr) {
+                return realXhr.getAllResponseHeaders();
+            }
             if (this.isXML) {
                 return 'Content-Type: application/xml; Last-Modified: 2019-08-29T00:00:00.000Z;ETag: NotYolow';
             } else if (this.url.endsWith('json')) {
@@ -111,6 +156,9 @@ function createMockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData) {
          * @returns {null|string} The response header.
          */
         getResponseHeader: function (type) {
+            if (realXhr) {
+                return realXhr.getResponseHeader(type);
+            }
             if (type === 'Content-Type' && this.url.endsWith('xml')) {
                 return 'application/xml';
             }
@@ -119,8 +167,14 @@ function createMockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData) {
         /**
          * Sets the value of an HTTP request header. You must call setRequestHeader() after open(), but before send().
          * Useless in our case.
+         * @param {string} header The name of the header whose value is to be set.
+         * @param {string} value The value to set as the body of the header.
          */
-        setRequestHeader: () => {},
+        setRequestHeader: (header, value) => {
+            if (realXhr) {
+                realXhr.setRequestHeader(header, value);
+            }
+        },
         /**
          * Adds an event listener to the XMLHttpRequest object.
          * @param {string} type The type of event to listen for.

package/src/env/ui5Environment.js

@@ -13,8 +13,9 @@ function initUI5Environment(globalWindow, pathMappingFn, isV2, ui5Version) {
 
     globalWindow.jestSetup = true;
 
+    const XHR = globalWindow.XMLHttpRequest;
     globalWindow.XMLHttpRequest = function () {
-        return mockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData);
+        return mockXHR(globalWindow, pathMappingFn, shimmedFilePath, mockData, XHR);
     };
     globalWindow.performance.timing = {
         fetchStart: Date.now(),

package/src/index.js

@@ -23,6 +23,7 @@ class UI5DOMEnvironment extends JSDOMEnvironment {
         this.testEnvironmentOptions = config.testEnvironmentOptions;
         this.mappingStrategy = config.testEnvironmentOptions ? config.testEnvironmentOptions.mappingStrategy : 'ui5';
         this.useOptimized = config.testEnvironmentOptions ? !config.testEnvironmentOptions.useDebugSources : true;
+        this.allowCSS = config.testEnvironmentOptions ? config.testEnvironmentOptions.allowCSS : false;
 
         // make sure that the test path is in POSIX style:
         //   C:\dir1\dir2 --> /dir1/dir2
@@ -51,8 +52,6 @@ class UI5DOMEnvironment extends JSDOMEnvironment {
         context.testPath = this.testPath;
         global.window = context;
         global.Object = context.Object;
-        global.CanvasRenderingContext2D = function () {};
-        context.HTMLCanvasElement.prototype.getContext = () => {};
         window.NewObject = Object;
         [
             'sap',
@@ -70,7 +69,6 @@ class UI5DOMEnvironment extends JSDOMEnvironment {
             global[keyName] = context[keyName];
         });
         window.console = console;
-        window.CanvasRenderingContext2D = function () {};
         window.matchMedia = (query) => ({
             matches: false,
             media: query,
@@ -114,22 +112,23 @@ class UI5DOMEnvironment extends JSDOMEnvironment {
             this.core.boot();
         }
         return new Promise((resolve) => {
-            this.initUI5Core(resolve);
+            this.initUI5Core(resolve, this.allowCSS);
         });
     }
 
     /**
      * Initialize the UI5 Core and resolve once ready.
      * @param {Function} resolve The function to call once the core is ready
+     * @param {boolean} allowCSS Whether to allow the UI5 CSS to be loaded
      */
-    initUI5Core(resolve) {
+    initUI5Core(resolve, allowCSS = false) {
         sap.ui.require(['sap/ui/core/Core', 'sap/ui/core/date/Gregorian'], async (Core) => {
             if (Core.ready) {
                 await Core.ready();
-                this.overwriteUi5Lib(resolve);
+                this.overwriteUi5Lib(resolve, allowCSS);
             } else {
                 Core.attachInit(() => {
-                    this.overwriteUi5Lib(resolve);
+                    this.overwriteUi5Lib(resolve, allowCSS);
                 });
             }
         });
@@ -138,14 +137,15 @@ class UI5DOMEnvironment extends JSDOMEnvironment {
     /**
      * Overwrite the UI5 Lib to disable the library CSS.
      * @param {Function} resolve the function to call once the lib is overwritten
+     * @param {boolean} allowCSS Whether to allow the UI5 CSS to be loaded
      */
-    overwriteUi5Lib(resolve) {
+    overwriteUi5Lib(resolve, allowCSS) {
         sap.ui.require(
             ['sap/ui/core/Lib'],
             function (Lib) {
                 const fnInit = Lib.init;
                 Lib.init = function (mSettings) {
-                    mSettings.noLibraryCSS = true;
+                    mSettings.noLibraryCSS = !allowCSS;
                     return fnInit.call(this, mSettings);
                 };
                 resolve();