@sap-ux/control-property-editor 0.3.1 → 0.4.0

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

@@ -9,7 +9,7 @@ import { DeviceType } from '../../../../src/devices';
 import { registerAppIcons } from '../../../../src/icons';
 import { ChangesPanel } from '../../../../src/panels/changes';
 import { initI18n } from '../../../../src/i18n';
-import type { PendingPropertyChange, SavedPropertyChange } from '@sap-ux-private/control-property-editor-common';
+import type { PendingChange, SavedPropertyChange } from '@sap-ux-private/control-property-editor-common';
 
 export type State = ReturnType<typeof reducer>;
 
@@ -33,7 +33,8 @@ const getModel = (saved = false): ChangesSlice => {
                       propertyName: 'testPropertyName1',
                       type: 'pending',
                       value: 'testValue1',
-                      isActive: true
+                      isActive: true,
+                      changeType: 'propertyChange'
                   },
                   {
                       controlId: 'testId1BoolFalse',
@@ -41,7 +42,8 @@ const getModel = (saved = false): ChangesSlice => {
                       propertyName: 'testPropertyNameBoolFalse',
                       type: 'pending',
                       value: false,
-                      isActive: true
+                      isActive: true,
+                      changeType: 'propertyChange'
                   },
                   {
                       controlId: 'testId1Exp',
@@ -49,9 +51,24 @@ const getModel = (saved = false): ChangesSlice => {
                       propertyName: 'testPropertyNameExp',
                       type: 'pending',
                       value: '{expression}',
-                      isActive: true
+                      isActive: true,
+                      changeType: 'propertyBindingChange'
+                  },
+                  {
+                      controlId: 'ListReport::TableToolbar',
+                      controlName: 'OverflowToolbar',
+                      type: 'pending',
+                      isActive: true,
+                      changeType: 'addXML'
+                  },
+                  {
+                      controlId: 'FieldGroup::TechnicalData::FormGroup',
+                      controlName: 'Group',
+                      type: 'pending',
+                      isActive: true,
+                      changeType: 'addFields'
                   }
-              ] as PendingPropertyChange[])
+              ] as PendingChange[])
             : [],
         saved: saved
             ? ([
@@ -63,7 +80,19 @@ const getModel = (saved = false): ChangesSlice => {
                       value: 'testValue2',
                       fileName: 'testFileName',
                       kind: 'valid',
-                      timestamp: new Date('2022-02-09T12:06:53.939Z').getTime()
+                      timestamp: new Date('2022-02-09T12:06:53.939Z').getTime(),
+                      changeType: 'propertyChange'
+                  },
+                  {
+                      controlId: 'testId2',
+                      controlName: 'controlName2',
+                      propertyName: 'Icon',
+                      type: 'saved',
+                      value: 'sap-icon://accept',
+                      fileName: 'testFileName',
+                      kind: 'valid',
+                      timestamp: new Date('2022-02-09T12:06:53.939Z').getTime(),
+                      changeType: 'propertyChange'
                   },
                   {
                       controlId: 'testId3',
@@ -73,7 +102,8 @@ const getModel = (saved = false): ChangesSlice => {
                       value: true,
                       fileName: 'testFileNameBool',
                       kind: 'valid',
-                      timestamp: new Date('2022-02-09T12:06:53.939Z').getTime()
+                      timestamp: new Date('2022-02-09T12:06:53.939Z').getTime(),
+                      changeType: 'propertyChange'
                   },
                   {
                       controlId: 'testId4',
@@ -83,7 +113,22 @@ const getModel = (saved = false): ChangesSlice => {
                       value: 2,
                       fileName: 'testFileNameNum',
                       kind: 'valid',
-                      timestamp: new Date('2022-02-09T12:06:53.939Z').getTime()
+                      timestamp: new Date('2022-02-09T12:06:53.939Z').getTime(),
+                      changeType: 'propertyChange'
+                  },
+                  {
+                      controlId: 'supplierView--supplierForm',
+                      type: 'saved',
+                      fileName: 'id_1698648267087_373_moveSimpleFormField',
+                      kind: 'unknown',
+                      timestamp: new Date('2023-10-11T12:06:53.939Z').getTime()
+                  },
+                  {
+                      controlId: 'supplierView--supplierForm',
+                      type: 'saved',
+                      fileName: 'id_1698648267088_374_moveSimpleFormField',
+                      kind: 'unknown',
+                      timestamp: new Date('2023-10-12T12:06:53.939Z').getTime()
                   }
               ] as SavedPropertyChange[])
             : []
@@ -115,7 +160,7 @@ describe('ChangePanel', () => {
         expect(noControlFound).toBeInTheDocument();
     });
 
-    test('ChangePanel with unsaved changes', () => {
+    test('unsaved changes - all changes', () => {
         const model = getModel();
         const initialState: State = {
             deviceType: DeviceType.Desktop,
@@ -140,9 +185,15 @@ describe('ChangePanel', () => {
 
         const value = screen.getByText(/testValue1/i);
         expect(value).toBeInTheDocument();
+
+        const controlToolbar = screen.getByRole('button', { name: /overflow toolbar/i });
+        expect(controlToolbar).toBeInTheDocument();
+
+        const changeAddXML = screen.getByText(/add fields/i);
+        expect(changeAddXML).toBeInTheDocument();
     });
 
-    test('ChangePanel with saved changes', () => {
+    test('saved changes - property change', () => {
         const model = getModel(true);
         const initialState: State = {
             deviceType: DeviceType.Desktop,
@@ -169,6 +220,9 @@ describe('ChangePanel', () => {
         const value1 = screen.getByText(/testValue2/i);
         expect(value1).toBeInTheDocument();
 
+        const propertyIcon = screen.getByText(/sap\-icon:\/\/accept/i);
+        expect(propertyIcon).toBeInTheDocument();
+
         const deleteButton = screen.getAllByRole('button')[1];
         const iTagAttributes = deleteButton?.children?.item(0)?.children?.item(0)?.attributes;
         const iconName = iTagAttributes?.getNamedItem('data-icon-name')?.value;
@@ -203,7 +257,7 @@ describe('ChangePanel', () => {
         expect(screen.queryByText(/Test Property Name2/i)).toStrictEqual(null);
     });
 
-    test('ChangePanel with unknown saved changes', () => {
+    test('saved changes - Other change', () => {
         const model: ChangesSlice = {
             controls: {} as any,
             pending: [],
@@ -211,7 +265,9 @@ describe('ChangePanel', () => {
                 {
                     fileName: 'testFileName2',
                     type: 'saved',
-                    kind: 'unknown'
+                    kind: 'unknown',
+                    controlId: 'someSelectorId',
+                    header: true
                 } as any
             ]
         };
@@ -230,11 +286,20 @@ describe('ChangePanel', () => {
         const savedChangesTitle = screen.getByText(/saved changes/i);
         expect(savedChangesTitle).toBeInTheDocument();
 
-        const title = screen.getByText(/Test File Name2/i);
+        const title = screen.getByText(/Test File Name2 Change/i);
         expect(title).toBeInTheDocument();
 
-        const value = screen.getByText(/File: testFileName2/i);
-        expect(value).toBeInTheDocument();
+        const fileLabel = screen.getByText(/file:/i);
+        expect(fileLabel).toBeInTheDocument();
+
+        const fileName = screen.getByText(/testfilename2/i);
+        expect(fileName).toBeInTheDocument();
+
+        const selectorIdLabel = screen.getByText(/selector id:/i);
+        expect(selectorIdLabel).toBeInTheDocument();
+
+        const selectorId = screen.getByText(/someSelectorId/i);
+        expect(selectorId).toBeInTheDocument();
 
         const deleteButton = screen.getAllByRole('button')[0];
         const iTagAttributes = deleteButton?.children?.item(0)?.children?.item(0)?.attributes;
@@ -258,4 +323,50 @@ describe('ChangePanel', () => {
         const confirmButton = screen.getByRole('button', { name: /^Delete$/i });
         confirmButton.click();
     });
+
+    test('Filter unsaved changes', () => {
+        const model = getModel();
+        const filterInitOptions: FilterOptions[] = [{ name: FilterName.changeSummaryFilterQuery, value: 'toolbar' }];
+        const initialState: State = {
+            deviceType: DeviceType.Desktop,
+            scale: 1,
+            outline: {} as any,
+            filterQuery: filterInitOptions,
+            selectedControl: undefined,
+            changes: model,
+            icons: []
+        };
+        render(<ChangesPanel />, { initialState });
+
+        // check unsaved changes
+        const savedChangesTitle = screen.getByText(/unsaved changes/i);
+        expect(savedChangesTitle).toBeInTheDocument();
+
+        const controlToolbar = screen.getByRole('button', { name: /overflow toolbar/i });
+        expect(controlToolbar).toBeInTheDocument();
+    });
+
+    test('Filter saved changes', () => {
+        const model = getModel(true);
+        const filterInitOptions: FilterOptions[] = [
+            { name: FilterName.changeSummaryFilterQuery, value: 'Simple Form' }
+        ];
+        const initialState: State = {
+            deviceType: DeviceType.Desktop,
+            scale: 1,
+            outline: {} as any,
+            filterQuery: filterInitOptions,
+            selectedControl: undefined,
+            changes: model,
+            icons: []
+        };
+        render(<ChangesPanel />, { initialState });
+
+        // check unsaved changes
+        const savedChangesTitle = screen.getByText(/saved changes/i);
+        expect(savedChangesTitle).toBeInTheDocument();
+
+        const formFieldChange = screen.getByText(/id_1698648267087_373_movesimpleformfield/i);
+        expect(formFieldChange).toBeInTheDocument();
+    });
 });