@sap-ux/control-property-editor 0.8.0 → 1.0.1

package/test/unit/middleware.test.ts

@@ -1,22 +1,30 @@
-import * as common from '@sap-ux-private/control-property-editor-common';
-import { communicationMiddleware } from '../../src/middleware';
-jest.mock('../../src/slice', () => {
-    return {
-        changeProperty: { type: '[ext] property-changed' }
-    };
+import { jest } from '@jest/globals';
+import * as actualCommon from '@sap-ux-private/control-property-editor-common';
+
+const mockSendAction = jest.fn();
+const mockDispose = jest.fn();
+const mockStartPostMessageCommunication = jest.fn().mockReturnValue({
+    sendAction: mockSendAction,
+    dispose: mockDispose
 });
 
+jest.unstable_mockModule('@sap-ux-private/control-property-editor-common', () => ({
+    ...actualCommon,
+    startPostMessageCommunication: mockStartPostMessageCommunication
+}));
+
+jest.unstable_mockModule('../../src/slice', () => ({
+    changeProperty: { type: '[ext] property-changed' }
+}));
+
+const common = await import('@sap-ux-private/control-property-editor-common');
+const { communicationMiddleware } = await import('../../src/middleware');
+
 describe('communication middleware', () => {
-    let messageProcessor: jest.SpyInstance;
-    let dispatch: jest.SpyInstance;
+    let dispatch: jest.Mock;
     let middleWare: any;
-    const sendActionfn = jest.fn();
 
     beforeEach(() => {
-        messageProcessor = jest.spyOn(common, 'startPostMessageCommunication').mockReturnValue({
-            sendAction: sendActionfn,
-            dispose: jest.fn()
-        });
         dispatch = jest.fn();
         middleWare = communicationMiddleware({
             dispatch,
@@ -27,10 +35,8 @@ describe('communication middleware', () => {
         } as any);
     });
     afterEach(() => {
-        if (messageProcessor) {
-            messageProcessor.mockRestore();
-        }
-        sendActionfn.mockReset();
+        mockStartPostMessageCommunication.mockClear();
+        mockSendAction.mockReset();
     });
 
     test('property changed in UI5 application', () => {
@@ -39,15 +45,15 @@ describe('communication middleware', () => {
             propertyName: 'text',
             newValue: 'new value'
         });
-        messageProcessor.mock.calls[0][1](action);
+        mockStartPostMessageCommunication.mock.calls[0][1](action);
         expect(dispatch).toHaveBeenCalledTimes(1);
         expect(dispatch).toHaveBeenNthCalledWith(1, action);
     });
 
     test('select control in UI5 application on apploaded', () => {
         const action = common.appLoaded();
-        messageProcessor.mock.calls[0][1](action);
-        expect(sendActionfn).toHaveBeenCalledWith(common.selectControl('filterBar'));
+        mockStartPostMessageCommunication.mock.calls[0][1](action);
+        expect(mockSendAction).toHaveBeenCalledWith(common.selectControl('filterBar'));
         expect(dispatch).toHaveBeenCalledTimes(1);
         expect(dispatch).toHaveBeenNthCalledWith(1, action);
     });
@@ -59,14 +65,14 @@ describe('communication middleware', () => {
             type: 'text',
             properties: []
         });
-        messageProcessor.mock.calls[0][1](action);
+        mockStartPostMessageCommunication.mock.calls[0][1](action);
         expect(dispatch).toHaveBeenCalledTimes(1);
         expect(dispatch).toHaveBeenNthCalledWith(1, action);
     });
 
     test('outline changed in UI5 application', () => {
         const action = common.outlineChanged([]);
-        messageProcessor.mock.calls[0][1](action);
+        mockStartPostMessageCommunication.mock.calls[0][1](action);
         expect(dispatch).toHaveBeenCalledTimes(1);
         expect(dispatch).toHaveBeenNthCalledWith(1, action);
     });
@@ -77,13 +83,13 @@ describe('communication middleware', () => {
             propertyName: 'text',
             errorMessage: 'change failed'
         });
-        messageProcessor.mock.calls[0][1](action);
+        mockStartPostMessageCommunication.mock.calls[0][1](action);
         expect(dispatch).toHaveBeenCalledTimes(1);
         expect(dispatch).toHaveBeenNthCalledWith(1, action);
     });
 
     test('getTarget', () => {
-        expect(messageProcessor.mock.calls[0][0]()).toEqual('Target');
+        expect(mockStartPostMessageCommunication.mock.calls[0][0]()).toEqual('Target');
     });
 
     test('property change - send action', () => {
@@ -104,17 +110,12 @@ describe('communication middleware', () => {
               "type": "[ext] property-changed",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
 
     test('select control - send action', () => {
         const action = common.selectControl('01-02');
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                selectControl: { type: '[ext] select-control' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -122,17 +123,12 @@ describe('communication middleware', () => {
               "type": "[ext] select-control",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
 
     test('add extension point - send action', () => {
         const action = common.addExtensionPoint({ controlId: 'control1' } as common.OutlineNode);
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                addExtensionPoint: { type: '[ext] add-extension-point' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -142,17 +138,12 @@ describe('communication middleware', () => {
               "type": "[ext] add-extension-point",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
 
     test('undo - send action', () => {
         const action = common.undo();
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                undo: { type: '[ext] undo' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -160,17 +151,12 @@ describe('communication middleware', () => {
               "type": "[ext] undo",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
 
     test('redo - send action', () => {
         const action = common.redo();
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                redo: { type: '[ext] redo' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -178,17 +164,12 @@ describe('communication middleware', () => {
               "type": "[ext] redo",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
 
     test('save - send action', () => {
         const action = common.save();
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                save: { type: '[ext] save' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -196,17 +177,12 @@ describe('communication middleware', () => {
               "type": "[ext] save",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
 
     test('setAppMode(adaptation) mode - send action', () => {
         const action = common.setAppMode('adaptation');
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                setAppMode: { type: '[ext] setAppMode' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -214,16 +190,11 @@ describe('communication middleware', () => {
               "type": "[ext] set-app-mode",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
     test('setAppMode(navigation) mode - send action', () => {
         const action = common.setAppMode('navigation');
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                setAppMode: { type: '[ext] setAppMode' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -231,16 +202,11 @@ describe('communication middleware', () => {
               "type": "[ext] set-app-mode",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
     test('externalFileChange - send action', () => {
         const action = common.externalFileChange('file-path');
         const next = jest.fn().mockReturnValue(action);
-        jest.mock('@sap-ux-private/control-property-editor-common', () => {
-            return {
-                externalFileChange: { type: '[ext] external-file-change' }
-            };
-        });
         const result = middleWare(next)(action);
         expect(result).toMatchInlineSnapshot(`
             Object {
@@ -248,6 +214,6 @@ describe('communication middleware', () => {
               "type": "[ext] external-file-change",
             }
         `);
-        expect(sendActionfn).toHaveBeenCalledTimes(1);
+        expect(mockSendAction).toHaveBeenCalledTimes(1);
     });
 });

package/test/unit/panels/changes/ChangesPanel.test.tsx

@@ -1,20 +1,12 @@
 import type { PendingChange, SavedChange } from '@sap-ux-private/control-property-editor-common';
+import { selectControl } from '@sap-ux-private/control-property-editor-common';
 import type { FilterOptions, ChangesSlice } from '../../../../src/slice';
 import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
-import * as cpeCommon from '@sap-ux-private/control-property-editor-common';
-import * as reactRedux from 'react-redux';
 import { render } from '../../utils';
 import { FilterName } from '../../../../src/slice';
 import { ChangesPanel } from '../../../../src/panels/changes';
 
-jest.mock('@sap-ux-private/control-property-editor-common', () => {
-    return {
-        __esModule: true,
-        ...jest.requireActual('@sap-ux-private/control-property-editor-common')
-    };
-});
-
 const getChanges = (generateSavedChanges = false, filterByKind = ''): ChangesSlice => {
     const pending: PendingChange[] = !generateSavedChanges
         ? [
@@ -763,10 +755,7 @@ describe('ChangePanel', () => {
     });
 
     test('saved control change - link', () => {
-        jest.spyOn(cpeCommon, 'selectControl').mockImplementationOnce(jest.fn());
-        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(jest.fn());
-
-        render(<ChangesPanel />, {
+        const { dispatch } = render(<ChangesPanel />, {
             initialState: {
                 changes: {
                     controls: {},
@@ -804,8 +793,7 @@ describe('ChangePanel', () => {
         expect(link).toBeInTheDocument();
 
         link.click();
-        expect(reactRedux.useDispatch).toHaveBeenCalled();
-        expect(cpeCommon.selectControl).toHaveBeenCalledWith('testId1');
+        expect(dispatch).toHaveBeenCalledWith(selectControl('testId1'));
     });
 
     test('Filter unsaved changes', () => {

package/test/unit/panels/changes/FileChange.test.tsx

@@ -2,20 +2,13 @@ import { FileChange } from '../../../../src/panels/changes/FileChange';
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { render } from '../../utils';
-import { useDispatch } from 'react-redux';
 import { reloadApplication } from '@sap-ux-private/control-property-editor-common';
 
-// Mock the useDispatch hook
-jest.mock('react-redux', () => ({
-    ...jest.requireActual('react-redux'),
-    useDispatch: jest.fn().mockReturnValue(jest.fn())
-}));
-
 describe('FileChange', () => {
     it('renders the component with correct text when fileName is provided', () => {
         const hasUnsavedChanges = true;
 
-        render(<FileChange hasUnsavedChanges={hasUnsavedChanges} />);
+        const { dispatch } = render(<FileChange hasUnsavedChanges={hasUnsavedChanges} />);
 
         const saveAndReloadLink = screen.getByText(/Save and Reload/i);
         expect(saveAndReloadLink).toBeInTheDocument();
@@ -24,8 +17,7 @@ describe('FileChange', () => {
         expect(detailLinkText).toBeInTheDocument();
 
         saveAndReloadLink.click();
-        const hookMock = useDispatch();
-        expect(hookMock as jest.Mock).toHaveBeenCalledWith({
+        expect(dispatch).toHaveBeenCalledWith({
             payload: {
                 save: true
             },

package/test/unit/panels/properties/DropdownEditor.test.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import type { StringControlPropertyWithOptions } from '@sap-ux-private/control-property-editor-common';
 import { DROPDOWN_EDITOR_TYPE, PropertyType, STRING_VALUE_TYPE } from '@sap-ux-private/control-property-editor-common';
 import { DropdownEditor, valueChanged } from '../../../../src/panels/properties/DropdownEditor';
-import * as slice from '../../../../src/slice';
 import '@testing-library/jest-dom';
 
 import { render } from '../../utils';
@@ -28,7 +27,6 @@ describe('DropdownEditor', () => {
             propertyType: PropertyType.ControlProperty
         };
         const testId = `${propertyName}--DropdownEditor`;
-        jest.spyOn(slice, 'changeProperty');
 
         cleanup();
 

package/test/unit/panels/properties/InputTypeToggle.test.tsx

@@ -18,7 +18,6 @@ import { getValueForInputType, InputTypeToggle } from '../../../../src/panels/pr
 import type { InputTypeToggleOptionProps } from '../../../../src/panels/properties/types';
 import { InputType } from '../../../../src/panels/properties/types';
 import { render } from '../../utils';
-import * as slice from '../../../../src/slice';
 
 describe('InputTypeToggle', () => {
     const controlId = 'testControlId';
@@ -101,10 +100,8 @@ describe('InputTypeToggle', () => {
         };
         const testId = `${propertyName}--InputTypeToggle--${InputType.booleanTrue}`;
 
-        const spyGetChangePropertyAction = jest.spyOn(slice, 'changeProperty');
-
         // act
-        render(
+        const { dispatch } = render(
             <InputTypeToggle
                 inputTypeProps={inputTypeProps}
                 property={property}
@@ -118,12 +115,14 @@ describe('InputTypeToggle', () => {
         cleanup();
 
         // assert
-        expect(spyGetChangePropertyAction).toHaveBeenCalledTimes(1);
-        expect(spyGetChangePropertyAction).toHaveBeenCalledWith(
+        expect(dispatch).toHaveBeenCalledWith(
             expect.objectContaining({
-                controlId,
-                propertyName,
-                value: true
+                type: 'app/change-property',
+                payload: expect.objectContaining({
+                    controlId,
+                    propertyName,
+                    value: true
+                })
             })
         );
     });

package/test/unit/setup.ts

@@ -1,11 +1,27 @@
 import { initIcons } from '@sap-ux/ui-components';
 
-import { initI18n } from '../../src/i18n';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import i18nEn from '../../src/i18n/i18n.json';
 import { registerAppIcons } from '../../src/icons';
 import { mockResizeObserver } from '../utils/utils';
 
 mockResizeObserver();
-initI18n();
+// Initialize i18n synchronously for tests (initImmediate: false prevents async init)
+i18n.use(initReactI18next).init({
+    resources: {
+        en: {
+            translation: i18nEn
+        }
+    },
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false
+    },
+    showSupportNotice: false,
+    initImmediate: false
+});
 registerAppIcons();
 initIcons();
 

package/test/utils/utils.tsx

@@ -1,3 +1,5 @@
+import { jest } from '@jest/globals';
+
 declare global {
     interface Window {
         ResizeObserver: any;

package/tsconfig.eslint.json

@@ -1,4 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["src", "test", ".eslintrc.js"]
+  "include": ["src", "test"],
+  "exclude": ["dist", "node_modules", "coverage"]
 }

package/tsconfig.json

@@ -9,7 +9,7 @@
     ],
     "strictNullChecks": true,
     "outDir": "dist",
-    "module": "ES6",
+    "module": "NodeNext",
     "rootDir": ".",
     "baseUrl": ".",
     "types": [
@@ -20,14 +20,13 @@
   "include": [
     "src/**/*.json",
     "src/**/*.ts",
-    "src/**/*.tsx",
-    "test/**/*.ts",
-    "test/**/*.tsx"
+    "src/**/*.tsx"
   ],
   "exclude": [
     "dist",
     "node_modules",
-    "coverage"
+    "coverage",
+    "test"
   ],
   "references": [
     {

package/jest.config.js

@@ -1,21 +0,0 @@
-const config = require('../../jest.base');
-config.testEnvironment = 'jsdom';
-config.collectCoverageFrom = ['src/**/*.{ts,tsx}'];
-config.transform = {
-    '^.+\\.test.tsx?$': 'ts-jest',
-    '.+\\.(css|sass|scss)$': 'jest-scss-transform'
-};
-config.globals = {
-    'ts-jest': {
-        jsx: 'react',
-        diagnostics: {
-            warnOnly: true,
-            exclude: /\.(spec|test)\.ts$/
-        }
-    }
-};
-config.preset = 'ts-jest';
-config.transformIgnorePatterns = ['<rootDir>/node_modules/'];
-config.testMatch = ['**/test/unit/**/*.(test).ts(x)?'];
-config.setupFiles = ['./test/unit/setup.ts'];
-module.exports = config;