update tests in EditBinding when feature flag is removed and update t…

…he type for simpleBinding with InternalBindingFormat
Altinn · Nov 26, 2024 · 5072f83 · 5072f83
1 parent 7674c10
commit 5072f83
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 101 deletions.
diff --git a/frontend/packages/shared/src/types/ComponentSpecificConfig.ts b/frontend/packages/shared/src/types/ComponentSpecificConfig.ts
@@ -7,6 +7,7 @@ import type { ActionButtonAction } from 'app-shared/types/ActionButtonAction';
 import type { GridRow } from 'app-shared/types/GridRow';
 import type { HTMLAutoCompleteValue } from 'app-shared/types/HTMLAutoCompleteValue';
 import type { BooleanExpression, StringExpression } from '@studio/components';
+import type { InternalBindingFormat } from '@altinn/ux-editor/utils/dataModelUtils';
 
 type DataModelBindingsForAddress = {
   address: string;
@@ -38,12 +39,12 @@ type DataModelBindingsList = {
 };
 
 type DataModelBindingsOptionsSimple = {
-  simpleBinding: string;
+  simpleBinding: string | InternalBindingFormat;
   metadata?: string;
 };
 
 export type DataModelBindingsSimple = {
-  simpleBinding: string;
+  simpleBinding: string | InternalBindingFormat;
 };
 
 type DataModelBindingsForFileUpload = DataModelBindingsSimple | DataModelBindingsList;

diff --git a/...packages/ux-editor/src/components/Properties/EditSubformTableColumns/types/TableColumn.ts b/...packages/ux-editor/src/components/Properties/EditSubformTableColumns/types/TableColumn.ts
@@ -1,5 +1,7 @@
+import type { InternalBindingFormat } from '@altinn/ux-editor/utils/dataModelUtils';
+
 type TableColumnCellContent = {
-  query: string;
+  query: string | InternalBindingFormat;
   default?: string;
 };
 

diff --git a/...tor/src/components/config/editModal/EditDataModelBinding/EditBinding/EditBinding.test.tsx b/...tor/src/components/config/editModal/EditDataModelBinding/EditBinding/EditBinding.test.tsx
@@ -17,6 +17,7 @@ import { app, org } from '@studio/testing/testids';
 const defaultLabel = 'label';
 const defaultBindingKey = 'simpleBinding';
 const defaultDataModelField = 'field1';
+const secondDataModelField = 'field2';
 const defaultDataModel = 'defaultModel';
 const secondDataModel = 'secondModel';
 
@@ -42,9 +43,10 @@ const MockedParentComponent = (props: MockedParentComponentProps) => {
     <EditBinding
       {...props}
       handleComponentChange={(formItem) => {
+        const fieldBinding = formItem.dataModelBindings[defaultBindingKey] as InternalBindingFormat;
         setNewInternalBindingFormat((prev) => ({
           ...prev,
-          field: formItem.dataModelBindings[defaultBindingKey],
+          field: fieldBinding.field,
         }));
       }}
       internalBindingFormat={newInternalBindingFormat}
@@ -96,7 +98,7 @@ const getDataModelMetadataMock = jest
   .fn()
   .mockImplementation(() => Promise.resolve(dataModelMetadataResponseMock));
 
-describe('EditBinding without featureFlag', () => {
+describe('EditBinding', () => {
   it('should render loading spinner', async () => {
     renderEditBinding({});
 
@@ -119,7 +121,7 @@ describe('EditBinding without featureFlag', () => {
     expect(fieldSet).toBeInTheDocument();
   });
 
-  it('should render correct elements in field set', async () => {
+  it('should display two selectors: data model and a data model field', async () => {
     renderEditBinding({
       queries: {
         getAppMetadataModelIds: getAppMetadataModelIdsMock,
@@ -131,18 +133,15 @@ describe('EditBinding without featureFlag', () => {
       screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
     );
 
-    const label = screen.getByText(defaultEditBinding.label);
-    expect(label).toBeInTheDocument();
-
-    const selectedModel = screen.getByText(defaultDataModel);
-    const noneExistingDataModelSelector = screen.queryByRole('combobox', {
+    const dataModelSelector = screen.getByRole('combobox', {
       name: textMock('ux_editor.modal_properties_data_model_binding'),
     });
-    expect(selectedModel).toBeInTheDocument();
-    expect(noneExistingDataModelSelector).not.toBeInTheDocument();
+    expect(dataModelSelector).toBeInTheDocument();
 
-    const selectedField = screen.getByRole('combobox');
-    expect(selectedField).toBeInTheDocument();
+    const dataModelFieldSelector = screen.getByRole('combobox', {
+      name: textMock('ux_editor.modal_properties_data_model_field_binding'),
+    });
+    expect(dataModelFieldSelector).toBeInTheDocument();
   });
 
   it('should display default data model and "choose datafield" when no bindings', async () => {
@@ -164,7 +163,10 @@ describe('EditBinding without featureFlag', () => {
       screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
     );
 
-    expect(screen.getByText(defaultDataModel)).toBeInTheDocument();
+    const dataModelSelector = screen.getByRole('combobox', {
+      name: textMock('ux_editor.modal_properties_data_model_binding'),
+    });
+    expect(dataModelSelector).toHaveValue(defaultDataModel);
 
     const chooseDataFieldOption: HTMLOptionElement = screen.getByRole('option', {
       name: textMock('ux_editor.modal_properties_data_model_field_choose'),
@@ -225,14 +227,15 @@ describe('EditBinding without featureFlag', () => {
     );
     expect(errorMessage).toBeInTheDocument();
 
-    const dataModelFieldSelector = screen.getByRole('combobox');
-    const option2 = screen.getByRole('option', { name: defaultDataModelField });
+    const dataModelFieldSelector = screen.getByRole('combobox', {
+      name: textMock('ux_editor.modal_properties_data_model_field_binding'),
+    });
+    const option2 = screen.getByRole('option', { name: secondDataModelField });
     await user.selectOptions(dataModelFieldSelector, option2);
-
     expect(errorMessage).not.toBeInTheDocument();
   });
 
-  it('should call handleComponentChange with old binding format when data model field is changed', async () => {
+  it('should call handleComponentChange with new binding format when data model field is changed', async () => {
     const user = userEvent.setup();
     const handleComponentChange = jest.fn();
     renderEditBinding({
@@ -250,7 +253,9 @@ describe('EditBinding without featureFlag', () => {
       screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
     );
 
-    const dataModelFieldSelector = screen.getByRole('combobox');
+    const dataModelFieldSelector = screen.getByRole('combobox', {
+      name: textMock('ux_editor.modal_properties_data_model_field_binding'),
+    });
     const option2 = screen.getByRole('option', { name: 'field2' });
     await user.selectOptions(dataModelFieldSelector, option2);
 
@@ -259,7 +264,10 @@ describe('EditBinding without featureFlag', () => {
       {
         ...componentMocks[ComponentType.Input],
         dataModelBindings: {
-          [defaultEditBinding.bindingKey]: 'field2',
+          [defaultEditBinding.bindingKey]: {
+            field: 'field2',
+            dataType: defaultDataModel,
+          },
         },
         maxCount: undefined,
         required: true,
@@ -271,8 +279,7 @@ describe('EditBinding without featureFlag', () => {
     );
   });
 
-  it('should call handleComponentChange when click on delete button', async () => {
-    window.confirm = jest.fn(() => true);
+  it('should call handleComponentChange with new binding format when data model is changed', async () => {
     const user = userEvent.setup();
     const handleComponentChange = jest.fn();
     renderEditBinding({
@@ -290,89 +297,24 @@ describe('EditBinding without featureFlag', () => {
       screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
     );
 
-    const deleteButton = screen.getByRole('button', {
-      name: textMock('general.delete'),
-    });
-    await user.click(deleteButton);
-
-    expect(handleComponentChange).toHaveBeenCalledTimes(1);
-    expect(handleComponentChange).toHaveBeenCalledWith(
-      {
-        ...componentMocks[ComponentType.Input],
-        dataModelBindings: {
-          simpleBinding: '',
-        },
-        maxCount: undefined,
-        required: undefined,
-        timeStamp: undefined,
-      },
-      {
-        onSuccess: expect.any(Function),
-      },
-    );
-  });
-});
-
-describe('EditBinding with featureFlag', () => {
-  it('should display two selectors: data model and a data model field', async () => {
-    renderEditBinding({
-      queries: {
-        getAppMetadataModelIds: getAppMetadataModelIdsMock,
-        getDataModelMetadata: getDataModelMetadataMock,
-      },
-    });
-
-    await waitForElementToBeRemoved(() =>
-      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
-    );
-
     const dataModelSelector = screen.getByRole('combobox', {
       name: textMock('ux_editor.modal_properties_data_model_binding'),
     });
-    expect(dataModelSelector).toBeInTheDocument();
-
-    const dataModelFieldSelector = screen.getByRole('combobox', {
-      name: textMock('ux_editor.modal_properties_data_model_field_binding'),
-    });
-    expect(dataModelFieldSelector).toBeInTheDocument();
-  });
-
-  it('should call handleComponentChange with new binding format when data model field is changed', async () => {
-    const user = userEvent.setup();
-    const handleComponentChange = jest.fn();
-    renderEditBinding({
-      editBindingProps: {
-        ...defaultEditBinding,
-        handleComponentChange,
-      },
-      queries: {
-        getAppMetadataModelIds: getAppMetadataModelIdsMock,
-        getDataModelMetadata: getDataModelMetadataMock,
-      },
-    });
-
-    await waitForElementToBeRemoved(() =>
-      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
-    );
-
-    const dataModelFieldSelector = screen.getByRole('combobox', {
-      name: textMock('ux_editor.modal_properties_data_model_field_binding'),
-    });
-    const option2 = screen.getByRole('option', { name: 'field2' });
-    await user.selectOptions(dataModelFieldSelector, option2);
+    const option2 = screen.getByRole('option', { name: secondDataModel });
+    await user.selectOptions(dataModelSelector, option2);
 
     expect(handleComponentChange).toHaveBeenCalledTimes(1);
     expect(handleComponentChange).toHaveBeenCalledWith(
       {
         ...componentMocks[ComponentType.Input],
         dataModelBindings: {
           [defaultEditBinding.bindingKey]: {
-            field: 'field2',
-            dataType: defaultDataModel,
+            field: '',
+            dataType: secondDataModel,
           },
         },
         maxCount: undefined,
-        required: true,
+        required: undefined,
         timeStamp: undefined,
       },
       {
@@ -381,7 +323,8 @@ describe('EditBinding with featureFlag', () => {
     );
   });
 
-  it('should call handleComponentChange with new binding format when data model is changed', async () => {
+  it('should call handleComponentChange when click on delete button', async () => {
+    window.confirm = jest.fn(() => true);
     const user = userEvent.setup();
     const handleComponentChange = jest.fn();
     renderEditBinding({
@@ -399,20 +342,19 @@ describe('EditBinding with featureFlag', () => {
       screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
     );
 
-    const dataModelSelector = screen.getByRole('combobox', {
-      name: textMock('ux_editor.modal_properties_data_model_binding'),
+    const deleteButton = screen.getByRole('button', {
+      name: textMock('general.delete'),
     });
-    const option2 = screen.getByRole('option', { name: secondDataModel });
-    await user.selectOptions(dataModelSelector, option2);
+    await user.click(deleteButton);
 
     expect(handleComponentChange).toHaveBeenCalledTimes(1);
     expect(handleComponentChange).toHaveBeenCalledWith(
       {
         ...componentMocks[ComponentType.Input],
         dataModelBindings: {
-          [defaultEditBinding.bindingKey]: {
+          simpleBinding: {
+            dataType: '',
             field: '',
-            dataType: secondDataModel,
           },
         },
         maxCount: undefined,