fix: use jest-env-ui5 for preview middleware test

packages/preview-middleware-client/.babelrc.json

@@ -1,4 +1,7 @@
 {
+    "ignore": [
+		"**/*.d.ts"
+	],
     "presets": [
         "@babel/preset-env",
         "transform-ui5",

packages/preview-middleware-client/jest.config.js

@@ -1,19 +1,19 @@
-const config = require('../../jest.base');
-config.testEnvironment = 'jsdom';
-config.moduleNameMapper = {
-    '^sap/(.+)$': '<rootDir>/test/__mock__/sap/$1.ts',
-    // Jest will try to load browser version, because environment is set to jsdom, but that is not what we want 
-    // https://jest-archive-august-2023.netlify.app/docs/28.x/upgrading-to-jest28#packagejson-exports
-    '^@sap-ux/i18n$': require.resolve('@sap-ux/i18n'),
-    '^mock/(.+)$': '<rootDir>/test/__mock__/$1.ts',
-    '^open/ux/preview/client/(.+)$': '<rootDir>/src/$1.ts'
-};
-config.transform = {
-    '^.+\\.ts$': [
-        'ts-jest',
-        {
-            tsConfig: 'tsconfig.eslint.json'
-        }
-    ]
-};
-module.exports = config;
+                                       // const config = require('../../jest.base');
+// config.testEnvironment = 'jsdom';
+// config.moduleNameMapper = {
+//     '^sap/(.+)$': '<rootDir>/test/__mock__/sap/$1.ts',
+//     // Jest will try to load browser version, because environment is set to jsdom, but that is not what we want 
+//     // https://jest-archive-august-2023.netlify.app/docs/28.x/upgrading-to-jest28#packagejson-exports
+//     '^@sap-ux/i18n$': require.resolve('@sap-ux/i18n'),
+//     '^mock/(.+)$': '<rootDir>/test/__mock__/$1.ts',
+//     '^open/ux/preview/client/(.+)$': '<rootDir>/src/$1.ts'
+// };
+// // config.transform = {
+// //     '^.+\\.ts$': [
+// //         'ts-jest',
+// //         {
+// //             tsConfig: 'tsconfig.eslint.json'
+// //         }
+// //     ]
+// // };
+// module.exports = config;

packages/preview-middleware-client/jest.ui5.config.js

@@ -0,0 +1,24 @@
+const { resolve } = require('path');
+const config = require('../../jest.base');
+config.testEnvironment = '@sap-ux/jest-environment-ui5';
+config.testEnvironmentOptions = {
+    // mappingStrategy: 'tsconfig',
+    // configPath: resolve(__dirname, 'tsconfig.eslint.json'),
+    // rootFolder: __dirname,
+    configPath: 'ui5-test.yaml',
+    force: true
+};
+config.modulePathIgnorePatterns = config.modulePathIgnorePatterns.filter((pattern) => pattern !== '<rootDir>/test/integration');
+config.moduleNameMapper = {
+   // '^sap/(.+)$': '<rootDir>/test/__mock__/sap/$1.ts',
+    // Jest will try to load browser version, because environment is set to jsdom, but that is not what we want
+    // https://jest-archive-august-2023.netlify.app/docs/28.x/upgrading-to-jest28#packagejson-exports
+    '^@sap-ux/i18n$': require.resolve('@sap-ux/i18n'),
+    '^mock/(.+)$': '<rootDir>/test/__mock__/$1.ts',
+   // '^sap/(.+)$': '<rootDir>/test/__mock__/sap/$1.ts'
+};
+config.transform = {
+    '^.+\\.[t]s?$': ['babel-jest', { configFile: resolve(__dirname, '.babelrc.json') }]
+},
+
+module.exports = config;

packages/preview-middleware-client/package.json

@@ -18,7 +18,7 @@
         "format": "prettier --write '**/*.{js,json,ts,yaml,yml}' --ignore-path ../../.prettierignore",
         "lint": "eslint . --ext .ts",
         "lint:fix": "eslint . --ext .ts --fix",
-        "test": "jest --ci --forceExit --detectOpenHandles --colors"
+        "test": "jest --config=jest.ui5.config.js --runInBand --ci --forceExit --detectOpenHandles --colors"
     },
     "files": [
         "dist"
@@ -35,7 +35,9 @@
         "@sap-ux/i18n": "workspace:*",
         "@ui5/cli": "3.8.0",
         "npm-run-all2": "6.2.0",
-        "ui5-tooling-transpile": "3.4.0"
+        "ui5-tooling-transpile": "3.4.0",
+        "@sap-ux/jest-environment-ui5": "workspace:*",
+        "babel-jest": "29.7.0"
     },
     "browserslist": "defaults"
 }

packages/preview-middleware-client/src/adp/quick-actions/fe-v2/registry.ts

@@ -23,6 +23,7 @@ import { EnableTableEmptyRowModeQuickAction } from './op-enable-empty-row-mode';
 import { AddNewAnnotationFile } from '../common/add-new-annotation-file';
 import { EnableObjectPageVariantManagementQuickAction } from './op-enable-variant-management';
 import { EnableListReportVariantManagementQuickAction } from './lr-enable-variant-management';
+import { isA } from '../../../utils/core';
 type PageName = 'listReport' | 'objectPage' | 'analyticalListPage';
 
 const OBJECT_PAGE_TYPE = 'sap.suite.ui.generic.template.ObjectPage.view.Details';
@@ -104,8 +105,8 @@ export default class FEV2QuickActionRegistry extends QuickActionDefinitionRegist
 
     protected getComponentContainerFromPage(page: Control): ComponentContainer | undefined {
         // in ui5 version 1.71 there is no XMLView wrapper around ComponentContainer
-        const componentContainer = page instanceof XMLView ? page.getContent()[0] : page;
-        if (componentContainer instanceof ComponentContainer) {
+        const componentContainer = isA<XMLView>('sap.ui.core.mvc.XMLView', page) ? page.getContent()[0] : page;
+        if (isA<ComponentContainer>('sap.ui.core.ComponentContainer', componentContainer)) {
             return componentContainer;
         }
         return undefined;

packages/preview-middleware-client/src/cpe/quick-actions/registry.ts

@@ -9,7 +9,7 @@ import ComponentContainer from 'sap/ui/core/ComponentContainer';
 import { QuickActionActivationContext, QuickActionDefinitionGroup } from './quick-action-definition';
 
 import type { ControlTreeIndex } from '../types';
-import { getControlById } from '../../utils/core';
+import { getControlById, isA } from '../../utils/core';
 import { getRootControlFromComponentContainer } from '../utils';
 
 const NAV_CONTAINER_CONTROL_TYPE = 'sap.m.NavContainer';
@@ -46,7 +46,7 @@ export abstract class QuickActionDefinitionRegistry<T extends string> {
      * @returns ComponentContainer control.
      */
     protected getComponentContainerFromPage(page: Control): ComponentContainer | undefined {
-        if (page instanceof ComponentContainer) {
+        if (isA<ComponentContainer>('sap.ui.core.ComponentContainer', page) ) {
             return page;
         }
         return undefined;
@@ -108,7 +108,7 @@ export abstract class QuickActionDefinitionRegistry<T extends string> {
         const navContainerNode = controlIndex[NAV_CONTAINER_CONTROL_TYPE]?.[0];
         if (navContainerNode) {
             const control = getControlById(navContainerNode.controlId);
-            if (control instanceof NavContainer) {
+            if (isA<NavContainer>('sap.m.NavContainer', control)) {
                 return [control.getCurrentPage()];
             }
         }

packages/preview-middleware-client/src/cpe/utils.ts

@@ -7,7 +7,7 @@ import ComponentContainer from 'sap/ui/core/ComponentContainer';
 import XMLView from 'sap/ui/core/mvc/XMLView';
 import UIComponent from 'sap/ui/core/UIComponent';
 
-import { getComponent } from '../utils/core';
+import { getComponent, isA } from '../utils/core';
 import { isLowerThanMinimalUi5Version, Ui5VersionInfo } from '../utils/version';
 import { DesigntimeSetting } from 'sap/ui/dt/DesignTimeMetadata';
 import { ChangeService } from './changes';
@@ -118,9 +118,9 @@ export function getRootControlFromComponentContainer(container?: ComponentContai
     if (container) {
         const componentId = container.getComponent();
         const component = getComponent(componentId);
-        if (component instanceof UIComponent) {
+        if (isA<UIComponent>('sap.ui.core.UIComponent', component)) {
             const rootControl = component.getRootControl();
-            if (rootControl instanceof XMLView) {
+            if (isA<XMLView>('sap.ui.core.mvc.XMLView', rootControl)) {
                 return rootControl;
             }
         }

packages/preview-middleware-client/test/__mock__/sap/m/NavContainer.ts

@@ -1,4 +1,5 @@
 // add required functionality for testing here
-export default class {
+export default class NavContainer {
     getCurrentPage = jest.fn();
+    isA = jest.fn().mockReturnValue(true);
 }

packages/preview-middleware-client/test/__mock__/sap/ui/core/ComponentContainer.ts

@@ -1,7 +1,10 @@
 import UIComponentMOck from './UIComponent';
 
-export default class {
+export default class ComponentContainer {
     getComponent() {
         new UIComponentMOck();
+    };
+    isA() {
+        return true;
     }
 }

packages/preview-middleware-client/test/__mock__/sap/ui/core/UIComponent.ts

@@ -1,3 +1,4 @@
 export default class UIComponentMock {
     getRootControl = jest.fn();
+    isA = jest.fn().mockReturnValue(true);
 }

packages/preview-middleware-client/test/__mock__/sap/ui/core/mvc/XMLView.ts

@@ -1,5 +1,5 @@
 // add required functionality for testing here
-export default class {
+export default class XMLView {
     isA = jest.fn().mockImplementation((type) => type === 'sap.ui.core.mvc.XMLView')
     create = jest.fn();
     getContent = jest.fn();

packages/preview-middleware-client/test/__mock__/sap/ui/dt/OverlayRegistry.ts

@@ -6,6 +6,6 @@ export const mockOverlay = {
     getElementInstance: jest.fn()
 };
 
-export default {
-    getOverlay: jest.fn().mockReturnValue(mockOverlay)
+export default class OverlayRegistry {
+    getOverlay = jest.fn().mockReturnValue(mockOverlay)
 };

packages/preview-middleware-client/test/__mock__/sap/ui/fl/Utils.ts

@@ -1,8 +1,8 @@
 // add required functionality for testing here
-export default {
-    checkControlId: jest.fn().mockReturnValue(true),
-    getViewForControl: jest.fn().mockReturnValue({
+export default class Utils {
+    checkControlId = jest.fn().mockReturnValue(true);
+    static getViewForControl = jest.fn().mockReturnValue({
         getId: jest.fn()
-    }),
-    getAppComponentForControl: jest.fn()
+    });
+    getAppComponentForControl= jest.fn()
 };

packages/preview-middleware-client/test/__mock__/sap/ui/rta/command/CommandFactory.ts

@@ -1,4 +1,3 @@
-// add required functionality for testing here
 export default class CommandFactory {
     constructor(_: any) {}