@sap-ux/control-property-editor 0.2.0

package/test/unit/slice.test.ts

@@ -0,0 +1,268 @@
+import {
+    changeStackModified,
+    propertyChanged,
+    propertyChangeFailed
+} from '@sap-ux-private/control-property-editor-common';
+import reducer, { FilterName, filterNodes, changeProperty } from '../../src/slice';
+
+describe('main redux slice', () => {
+    describe('property changed', () => {
+        test('existing property', () => {
+            expect(
+                reducer(
+                    {
+                        selectedControl: {
+                            id: 'control1',
+                            properties: [
+                                {
+                                    name: 'text',
+                                    value: 'old value'
+                                }
+                            ]
+                        }
+                    } as any,
+                    propertyChanged({
+                        controlId: 'control1',
+                        propertyName: 'text',
+                        newValue: 'new text'
+                    })
+                )
+            ).toStrictEqual({
+                selectedControl: {
+                    id: 'control1',
+                    properties: [
+                        {
+                            name: 'text',
+                            value: 'new text'
+                        }
+                    ]
+                }
+            });
+        });
+
+        test('filterNodes', () => {
+            expect(
+                reducer(
+                    {
+                        filterQuery: [
+                            { name: FilterName.focusEditable, value: false },
+                            { name: FilterName.focusCommonlyUsed, value: false },
+                            { name: FilterName.query, value: '' }
+                        ]
+                    } as any,
+                    filterNodes([
+                        { name: FilterName.focusEditable, value: false },
+                        { name: FilterName.focusCommonlyUsed, value: false }
+                    ])
+                )
+            ).toStrictEqual({
+                filterQuery: [
+                    {
+                        name: 'focus-editable-controls',
+                        value: false
+                    },
+                    {
+                        name: 'focus-commonly-used-controls',
+                        value: false
+                    },
+                    {
+                        name: 'query',
+                        value: ''
+                    }
+                ]
+            });
+        });
+
+        test('propertyChangeFailed', () => {
+            expect(
+                reducer(
+                    {
+                        selectedControl: {
+                            id: 'control1',
+                            properties: [
+                                {
+                                    name: 'text',
+                                    value: 'old value'
+                                }
+                            ]
+                        }
+                    } as any,
+                    propertyChangeFailed({
+                        controlId: 'control1',
+                        propertyName: 'text',
+                        errorMessage: 'change failed'
+                    })
+                )
+            ).toStrictEqual({
+                selectedControl: {
+                    id: 'control1',
+                    properties: [{ errorMessage: 'change failed', name: 'text', value: 'old value' }]
+                }
+            });
+        });
+
+        test('changeProperty', () => {
+            expect(
+                reducer(
+                    {
+                        selectedControl: {
+                            id: 'control1',
+                            type: 'string',
+                            properties: [
+                                {
+                                    name: 'text',
+                                    value: 'old value'
+                                }
+                            ]
+                        }
+                    } as any,
+                    changeProperty({
+                        controlId: 'control1',
+                        controlName: 'Button',
+                        propertyName: 'text',
+                        value: 'change text'
+                    })
+                )
+            ).toStrictEqual({
+                selectedControl: {
+                    id: 'control1',
+                    properties: [
+                        {
+                            errorMessage: '',
+                            name: 'text',
+                            value: 'change text'
+                        }
+                    ],
+                    type: 'string'
+                }
+            });
+        });
+
+        test('non existing property', () => {
+            expect(
+                reducer(
+                    {
+                        selectedControl: {
+                            id: 'control1',
+                            properties: [
+                                {
+                                    name: 'text',
+                                    value: 'old value'
+                                }
+                            ]
+                        }
+                    } as any,
+                    propertyChanged({
+                        controlId: 'control1',
+                        propertyName: 'does not exist',
+                        newValue: 'new text'
+                    })
+                )
+            ).toStrictEqual({
+                selectedControl: {
+                    id: 'control1',
+                    properties: [
+                        {
+                            name: 'text',
+                            value: 'old value'
+                        }
+                    ]
+                }
+            });
+        });
+
+        test('changeStackModified', () => {
+            expect(
+                reducer(
+                    {
+                        changes: {
+                            saved: [],
+                            pending: [],
+                            controls: [] // make sure that old value is not reused
+                        }
+                    } as any,
+                    changeStackModified({
+                        pending: [
+                            {
+                                type: 'pending',
+                                controlName: 'Button',
+                                controlId: 'control1',
+                                isActive: true,
+                                propertyName: 'text',
+                                value: '{i18n>DELETE}'
+                            }
+                        ],
+                        saved: [
+                            {
+                                controlId: 'control1',
+                                controlName: 'Button',
+                                propertyName: 'text',
+                                type: 'saved',
+                                kind: 'valid',
+                                fileName: 'file',
+                                timestamp: 123,
+                                value: 'abc'
+                            }
+                        ]
+                    })
+                )
+            ).toStrictEqual({
+                changes: {
+                    controls: {
+                        control1: {
+                            controlName: 'Button',
+                            pending: 1,
+                            saved: 1,
+                            properties: {
+                                text: {
+                                    lastChange: {
+                                        controlName: 'Button',
+                                        controlId: 'control1',
+                                        isActive: true,
+                                        propertyName: 'text',
+                                        type: 'pending',
+                                        value: '{i18n>DELETE}'
+                                    },
+                                    lastSavedChange: {
+                                        controlId: 'control1',
+                                        controlName: 'Button',
+                                        kind: 'valid',
+                                        fileName: 'file',
+                                        propertyName: 'text',
+                                        timestamp: 123,
+                                        type: 'saved',
+                                        value: 'abc'
+                                    },
+                                    pending: 1,
+                                    saved: 1
+                                }
+                            }
+                        }
+                    },
+                    pending: [
+                        {
+                            type: 'pending',
+                            controlName: 'Button',
+                            controlId: 'control1',
+                            isActive: true,
+                            propertyName: 'text',
+                            value: '{i18n>DELETE}'
+                        }
+                    ],
+                    saved: [
+                        {
+                            controlId: 'control1',
+                            controlName: 'Button',
+                            propertyName: 'text',
+                            type: 'saved',
+                            kind: 'valid',
+                            fileName: 'file',
+                            timestamp: 123,
+                            value: 'abc'
+                        }
+                    ]
+                }
+            });
+        });
+    });
+});

package/test/unit/utils.tsx

@@ -0,0 +1,67 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import type { Store, Dispatch } from '@reduxjs/toolkit';
+import { createStore } from '@reduxjs/toolkit';
+import type { RenderOptions, RenderResult } from '@testing-library/react';
+import { render as rtlRender } from '@testing-library/react';
+import { Provider } from 'react-redux';
+
+import reducer from '../../src/slice';
+
+export type State = ReturnType<typeof reducer>;
+
+export interface Options<T = State> extends RenderOptions {
+    initialState?: T;
+    store?: Store<State>;
+}
+
+export function render<T = State>(
+    ui: ReactElement,
+    { initialState, store = createStore(reducer, initialState as unknown as State), ...renderOptions }: Options<T> = {}
+): RenderResult & { store: Store; dispatch: jest.SpyInstance<Dispatch> } {
+    function Wrapper({ children }: PropsWithChildren<{}>): ReactElement {
+        return <Provider store={store}>{children}</Provider>;
+    }
+    const origDispatch = store.dispatch;
+    const dispatch = jest.fn(origDispatch);
+    store.dispatch = dispatch;
+    return { ...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }), store, dispatch };
+}
+
+export const mockDomEventListener = (handler: Document | Window | Element = document): DOMEventListenerMock => {
+    const domEventListeners: { [k: string]: Array<Function> } = {};
+    // Mock for add event listener
+    handler.addEventListener = jest.fn((event, cb) => {
+        if (!domEventListeners[event]) {
+            domEventListeners[event] = [];
+        }
+        domEventListeners[event].push(cb as Function);
+    });
+    handler.removeEventListener = jest.fn((event, cb) => {
+        if (domEventListeners[event]) {
+            const index = domEventListeners[event].findIndex((storedCb) => storedCb === cb);
+            if (index !== -1) {
+                domEventListeners[event].splice(index, 1);
+            }
+            if (domEventListeners[event].length === 0) {
+                delete domEventListeners[event];
+            }
+        }
+    });
+    return {
+        simulateEvent: (name: string, value: object): void => {
+            if (domEventListeners[name]) {
+                for (const cb of domEventListeners[name]) {
+                    cb(value);
+                }
+            }
+        },
+        cleanDomEventListeners: (): void => {
+            for (const eventName in domEventListeners) {
+                delete domEventListeners[eventName];
+            }
+        },
+        domEventListeners
+    };
+};

package/test/utils/utils.tsx

@@ -0,0 +1,25 @@
+declare global {
+    interface Window {
+        ResizeObserver: any;
+        resizeobserversMocks: Array<any>;
+    }
+}
+
+export const mockResizeObserver = (): void => {
+    window.resizeobserversMocks = [];
+    window.ResizeObserver = jest.fn((callback: () => void) => {
+        const resizeObserver = {
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: () => {
+                const index = window.resizeobserversMocks.indexOf(resizeObserver);
+                window.resizeobserversMocks.splice(index, 1);
+            },
+            simulate: () => {
+                callback();
+            }
+        };
+        window.resizeobserversMocks.push(resizeObserver);
+        return resizeObserver;
+    });
+};

package/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src", "test", ".eslintrc.js"]
+}

package/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "incremental": true,
+    "lib": [
+      "ES2021",
+      "dom"
+    ],
+    "strictNullChecks": true,
+    "outDir": "dist",
+    "module": "ES6",
+    "rootDir": ".",
+    "baseUrl": ".",
+    "types": [
+      "node",
+      "jest"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "test/**/*.ts",
+    "test/**/*.tsx"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "coverage"
+  ],
+  "references": [
+    {
+      "path": "../control-property-editor-common"
+    },
+    {
+      "path": "../ui-components"
+    }
+  ]
+}