@sap-ux/control-property-editor 0.2.0

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { render } from '../../utils';
+import type { PropertyDocumentationProps } from '../../../../src/panels/properties/PropertyDocumentation';
+import { PropertyDocumentation } from '../../../../src/panels/properties/PropertyDocumentation';
+import { initI18n } from '../../../../src/i18n';
+
+import { mockResizeObserver } from '../../../utils/utils';
+
+describe('PropertyDoc', () => {
+    beforeAll(() => {
+        mockResizeObserver();
+        initI18n();
+    });
+
+    test('no changes', () => {
+        const props: PropertyDocumentationProps = {
+            description: 'testDoc',
+            title: 'Test Property',
+            defaultValue: 'defaultValue',
+            propertyName: 'testProperty',
+            propertyType: 'testType',
+            onDelete: jest.fn()
+        };
+        render(<PropertyDocumentation {...props} />);
+
+        expect(screen.getByText(/property name/i)).toBeInTheDocument();
+        expect(screen.getByText(/testProperty/i)).toBeInTheDocument();
+        expect(screen.getByText(/property type/i)).toBeInTheDocument();
+        expect(screen.getByText(/testType/i)).toBeInTheDocument();
+        expect(screen.getByText(/default value/i)).toBeInTheDocument();
+        expect(screen.getByText(/defaultValue/i)).toBeInTheDocument();
+        expect(screen.getByText(/testDoc/i)).toBeInTheDocument();
+    });
+
+    test('pending changes', () => {
+        const props: PropertyDocumentationProps = {
+            description: 'testDoc',
+            title: 'Test Property',
+            defaultValue: 'defaultValue',
+            propertyName: 'testProperty',
+            propertyType: 'testType',
+            onDelete: jest.fn()
+        };
+        render(<PropertyDocumentation {...props} />, {
+            initialState: {
+                selectedControl: {
+                    id: 'control1'
+                } as any,
+                changes: {
+                    stack: [],
+                    controls: {
+                        control1: {
+                            pending: 0,
+                            saved: 1,
+                            properties: {
+                                testProperty: {
+                                    saved: 0,
+                                    pending: 1,
+                                    lastChange: {
+                                        propertyName: 'testProperty',
+                                        value: 'c value',
+                                        type: 'pending',
+                                        isActive: true,
+                                        controlId: 'control1'
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        expect(screen.getByText(/Modified & Unsaved/i)).toBeInTheDocument();
+
+        expect(screen.getByText(/current value/i)).toBeInTheDocument();
+        expect(screen.getByText(/c value/i)).toBeInTheDocument();
+    });
+
+    test('saved changes', () => {
+        const props: PropertyDocumentationProps = {
+            description: 'testDoc',
+            title: 'Test Property',
+            defaultValue: 'defaultValue',
+            propertyName: 'testProperty',
+            propertyType: 'testType',
+            onDelete: jest.fn()
+        };
+        render(<PropertyDocumentation {...props} />, {
+            initialState: {
+                selectedControl: {
+                    id: 'control1'
+                } as any,
+                changes: {
+                    stack: [],
+                    controls: {
+                        control1: {
+                            pending: 0,
+                            saved: 1,
+                            properties: {
+                                testProperty: {
+                                    saved: 1,
+                                    pending: 0,
+                                    lastSavedChange: {
+                                        propertyName: 'testProperty',
+                                        value: 'old value',
+                                        type: 'saved',
+                                        fileName: 'file',
+                                        timestamp: 123,
+                                        controlId: 'control1'
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            } as any
+        });
+
+        expect(screen.getByText(/Modified & Saved/i)).toBeInTheDocument();
+
+        expect(screen.getByText(/Saved value/i)).toBeInTheDocument();
+        expect(screen.getByText(/old value/i)).toBeInTheDocument();
+        const deleteButton = screen.getByRole('button');
+
+        deleteButton.click();
+
+        expect(props.onDelete).toHaveBeenCalledWith('control1', 'testProperty');
+    });
+});

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

@@ -0,0 +1,107 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { render } from '../../utils';
+import React from 'react';
+import { StringEditor } from '../../../../src/panels/properties/StringEditor';
+
+describe('StringEditor', () => {
+    const controlId = 'testControlId';
+
+    test('initial load', () => {
+        const value = 'testValue12345';
+        const props: any = {
+            icons: [],
+            isIcon: false,
+            isEnabled: false,
+            name: 'testProperty',
+            value
+        };
+        render(<StringEditor property={...props} controlId={controlId} />);
+
+        const textBox = screen.getByDisplayValue(value);
+        expect(textBox).toBeInTheDocument();
+    });
+    test('render suffix', () => {
+        const value = 'testValue12345';
+        const props: any = {
+            icons: [
+                {
+                    content: 'testData2',
+                    fontFamily: 'SAP-fontFamily',
+                    name: 'testName2'
+                },
+                {
+                    content: 'testData3',
+                    fontFamily: 'SAP-fontFamily',
+                    name: 'testName3'
+                }
+            ],
+            isEnabled: false,
+            isIcon: true,
+            name: 'testProperty',
+            value
+        };
+        render(<StringEditor property={...props} controlId={controlId} />);
+
+        const textBox = screen.getByDisplayValue(value);
+        expect(textBox).toBeInTheDocument();
+    });
+
+    test('integer value', () => {
+        const value = '12345';
+        const props: any = {
+            icons: [],
+            isEnabled: false,
+            isIcon: false,
+            name: 'testProperty',
+            value,
+            type: 'integer'
+        };
+
+        render(<StringEditor property={...props} controlId={controlId} />);
+
+        const textBox = screen.getByDisplayValue(value);
+        expect(textBox).toBeInTheDocument();
+        expect((textBox as any).value).toBe(value);
+        fireEvent.change(textBox, { target: { value: 'testName1' } });
+        expect((textBox as any).value).toBe('1');
+    });
+    test('float value', () => {
+        const value = '0.12345';
+        const props: any = {
+            icons: [],
+            isEnabled: false,
+            isIcon: false,
+            name: 'testProperty',
+            value,
+            type: 'float'
+        };
+
+        render(<StringEditor property={...props} controlId={controlId} />);
+
+        const textBox = screen.getByDisplayValue(value);
+        expect(textBox).toBeInTheDocument();
+        expect((textBox as any).value).toBe(value);
+        fireEvent.change(textBox, { target: { value: '5.3f04f.23' } });
+        expect((textBox as any).value).toBe('5.30423');
+    });
+
+    test('float value onBlur', () => {
+        const value = '5.300';
+        const props: any = {
+            icons: [],
+            isEnabled: false,
+            isIcon: false,
+            name: 'testProperty',
+            value,
+            type: 'float'
+        };
+
+        render(<StringEditor property={...props} controlId={controlId} />);
+
+        const textBox = screen.getByDisplayValue(value);
+        expect(textBox).toBeInTheDocument();
+        expect((textBox as any).value).toBe('5.300');
+        fireEvent.blur(textBox);
+        expect((textBox as any).value).toBe('5.3');
+    });
+});

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+
+import { ViewChanger } from '../../../../src/panels/properties/ViewChanger';
+import { initI18n } from '../../../../src/i18n';
+
+import { render } from '../../utils';
+
+describe('ViewChanger', () => {
+    beforeAll(() => {
+        initI18n();
+    });
+
+    test('zoom in', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 0.5,
+                fitPreview: false
+            }
+        });
+        screen.getByTitle(/zoom in/i).click();
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, {
+            payload: 0.6,
+            type: 'app/change-preview-scale'
+        });
+        expect(dispatch).toHaveBeenNthCalledWith(2, {
+            payload: 'fixed',
+            type: 'app/change-preview-scale-mode'
+        });
+    });
+
+    test('zoom in with max scale', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 1,
+                fitPreview: false
+            }
+        });
+        screen.getByTitle(/zoom in/i).click();
+
+        expect(dispatch).toHaveBeenCalledTimes(0);
+    });
+
+    test('zoom in to max scale', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 0.95,
+                fitPreview: false
+            }
+        });
+        screen.getByTitle(/zoom in/i).click();
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, {
+            payload: 1,
+            type: 'app/change-preview-scale'
+        });
+        expect(dispatch).toHaveBeenNthCalledWith(2, {
+            payload: 'fixed',
+            type: 'app/change-preview-scale-mode'
+        });
+    });
+
+    test('zoom out', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 1,
+                fitPreview: false
+            }
+        });
+        screen.getByTitle(/zoom out/i).click();
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, {
+            payload: 0.9,
+            type: 'app/change-preview-scale'
+        });
+        expect(dispatch).toHaveBeenNthCalledWith(2, {
+            payload: 'fixed',
+            type: 'app/change-preview-scale-mode'
+        });
+    });
+
+    test('zoom out with min scale', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 0.1,
+                fitPreview: false
+            }
+        });
+        screen.getByTitle(/zoom out/i).click();
+
+        expect(dispatch).toHaveBeenCalledTimes(0);
+    });
+
+    test('zoom out with min scale', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 0.12,
+                fitPreview: false
+            }
+        });
+        screen.getByTitle(/zoom out/i).click();
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, {
+            payload: 0.1,
+            type: 'app/change-preview-scale'
+        });
+        expect(dispatch).toHaveBeenNthCalledWith(2, {
+            payload: 'fixed',
+            type: 'app/change-preview-scale-mode'
+        });
+    });
+
+    test('select from dropdown', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 1,
+                fitPreview: false
+            }
+        });
+        const combobox = screen.getByRole('combobox');
+
+        if (!combobox.parentElement) {
+            expect(combobox.parentElement).not.toBeNull();
+            return;
+        }
+        combobox.parentElement.querySelector('button')?.click();
+
+        screen.getByText('50%').click();
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, {
+            payload: 0.5,
+            type: 'app/change-preview-scale'
+        });
+        expect(dispatch).toHaveBeenNthCalledWith(2, {
+            payload: 'fixed',
+            type: 'app/change-preview-scale-mode'
+        });
+    });
+
+    test('select "fit" from dropdown', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 1,
+                fitPreview: false
+            }
+        });
+        const combobox = screen.getByRole('combobox');
+
+        if (!combobox.parentElement) {
+            expect(combobox.parentElement).not.toBeNull();
+            return;
+        }
+        combobox.parentElement.querySelector('button')?.click();
+
+        screen.getByText(/fit/i).click();
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, {
+            payload: 'fit',
+            type: 'app/change-preview-scale-mode'
+        });
+    });
+
+    test('enter "new" value in combobox', () => {
+        const { dispatch } = render(<ViewChanger />, {
+            initialState: {
+                scale: 1,
+                fitPreview: true
+            }
+        });
+        const combobox = screen.getByRole('combobox');
+
+        if (!combobox.parentElement) {
+            expect(combobox.parentElement).not.toBeNull();
+            return;
+        }
+        const dropDownEditor = screen.getByTestId('testId-view-changer-combobox');
+        const dropDownEditorInput = dropDownEditor.querySelector('input');
+        if (dropDownEditorInput) {
+            fireEvent.focus(dropDownEditorInput);
+            fireEvent.input(dropDownEditorInput, { target: { value: '35%' } });
+            fireEvent.blur(dropDownEditorInput);
+        }
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, {
+            payload: 0.35,
+            type: 'app/change-preview-scale'
+        });
+    });
+});

package/test/unit/panels/properties/propertyValuesCache.test.ts

@@ -0,0 +1,23 @@
+import { getCachedValue, setCachedValue } from '../../../../src/panels/properties/propertyValuesCache';
+import { InputType } from '../../../../src/panels/properties/types';
+
+describe('propertyValuesCache', () => {
+    test('read/write', () => {
+        const controlId = 'testControlId';
+        const propertyName = 'testPropName';
+
+        setCachedValue(controlId, propertyName, InputType.expression, '{firstExpression}');
+
+        let cachedValue = getCachedValue('controlId2', propertyName, InputType.enumMember);
+        expect(cachedValue).toMatchInlineSnapshot(`null`);
+
+        cachedValue = getCachedValue(controlId, 'propertyName2', InputType.enumMember);
+        expect(cachedValue).toMatchInlineSnapshot(`null`);
+
+        cachedValue = getCachedValue(controlId, propertyName, InputType.enumMember);
+        expect(cachedValue).toMatchInlineSnapshot(`null`);
+
+        cachedValue = getCachedValue(controlId, propertyName, InputType.expression);
+        expect(cachedValue).toMatchInlineSnapshot(`"{firstExpression}"`);
+    });
+});