Fixing delete error on gyldige verdier list (#11810)

* Fixing delete error on gyldige verdier list

* refactoring validatiin logic on datamodel list of gyldige verdier

* adding test for enumList

* adding delete enum from list test

* fixing feedback from PR

* fixing tests and feedback

* fixing some tests

* adding more tests

* fixing broken test

* fixing final test

frontend/language/src/nb.json

@@ -965,6 +965,7 @@
   "schema_editor.enum_empty": "Listen er tom - alle verdier vil bli godtatt.",
   "schema_editor.enum_error_duplicate": "Verdiene må være unike.",
   "schema_editor.enum_legend": "Liste med gyldige verdier",
+  "schema_editor.enum_value": "Gyldig verdi nummer {{index}}",
   "schema_editor.error_model_name_exists": "Modellnavnet {{newModelName}} er allerede i bruk.",
   "schema_editor.field": "Objekt",
   "schema_editor.field_name": "Navn på felt",
@@ -1052,7 +1053,6 @@
   "schema_editor.textRow-deletion-confirm": "Ja, slett raden",
   "schema_editor.textRow-deletion-text": "Er du sikker på at du vil slette denne raden?",
   "schema_editor.textRow-title-confirmCancel-popover": "Er du sikker på at du vil slette denne raden?",
-  "schema_editor.textfield_label": "Rad i listen med gyldige verdier med id {{ id }}",
   "schema_editor.title": "Tittel",
   "schema_editor.type": "Type",
   "schema_editor.types": "Typer",

frontend/packages/schema-editor/src/components/SchemaInspector.test.tsx

@@ -6,12 +6,7 @@ import { dataMock } from '../mockData';
 import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { FieldNode, UiSchemaNode, UiSchemaNodes } from '@altinn/schema-model';
-import {
-  buildUiSchema,
-  FieldType,
-  SchemaModel,
-  validateTestUiSchema,
-} from '@altinn/schema-model';
+import { buildUiSchema, FieldType, SchemaModel, validateTestUiSchema } from '@altinn/schema-model';
 import { mockUseTranslation } from '../../../../testing/mocks/i18nMock';
 import { renderWithProviders } from '../../test/renderWithProviders';
 import { getSavedModel } from '../../test/test-utils';
@@ -35,8 +30,7 @@ Object.defineProperty(window, 'matchMedia', {
 });
 const mockUiSchema = buildUiSchema(dataMock);
 const model = SchemaModel.fromArray(mockUiSchema);
-const getMockSchemaByPath = (selectedId: string): UiSchemaNode =>
-  model.getNode(selectedId);
+const getMockSchemaByPath = (selectedId: string): UiSchemaNode => model.getNode(selectedId);
 
 const texts = {
   'schema_editor.maxLength': 'Maksimal lengde',
@@ -178,9 +172,20 @@ describe('SchemaInspector', () => {
     const testUiSchema: UiSchemaNodes = [rootNode, item];
     validateTestUiSchema(testUiSchema);
     renderSchemaInspector(testUiSchema, item);
-    await act(() => user.click(screen.queryAllByRole('tab')[1]));
-    await act(() => user.click(screen.getByDisplayValue(enumValue)));
+
+    const enumField = screen.getAllByRole('textbox', {
+      name: 'schema_editor.enum_value',
+    });
+    expect(enumField).toHaveLength(item.enum.length);
+
+    await act(() => user.click(enumField[0]));
     await act(() => user.keyboard('{Enter}'));
-    expect(saveDatamodel).toHaveBeenCalledTimes(1);
+
+    const enumFieldAfter = screen.getAllByRole('textbox', {
+      name: 'schema_editor.enum_value',
+    });
+    expect(enumFieldAfter).toHaveLength(item.enum.length + 1);
+
+    expect(saveDatamodel).not.toHaveBeenCalled();
   });
 });

frontend/packages/schema-editor/src/components/SchemaInspector/restrictions/ArrayRestrictions.test.tsx → frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ArrayRestrictions/ArrayRestrictions.test.tsx

@@ -4,7 +4,7 @@ import type { RestrictionItemProps } from '../ItemRestrictions';
 import { ArrayRestrictions } from './ArrayRestrictions';
 import { ArrRestrictionKey } from '@altinn/schema-model';
 import userEvent from '@testing-library/user-event';
-import { textMock } from '../../../../../../testing/mocks/i18nMock';
+import { textMock } from '../../../../../../../testing/mocks/i18nMock';
 
 // Test data:
 const onChangeRestrictionValueMock = jest.fn();
@@ -48,8 +48,8 @@ describe('ArrayRestrictions', () => {
       expect(onChangeRestrictionValueMock).toHaveBeenCalledWith(
         pathMock,
         ArrRestrictionKey.minItems,
-        '12'
-      )
+        '12',
+      ),
     );
   });
 
@@ -67,8 +67,8 @@ describe('ArrayRestrictions', () => {
       expect(onChangeRestrictionValueMock).toHaveBeenCalledWith(
         pathMock,
         ArrRestrictionKey.maxItems,
-        '12'
-      )
+        '12',
+      ),
     );
   });
 
@@ -81,15 +81,15 @@ describe('ArrayRestrictions', () => {
     };
     render(props);
     const uniqueItems = screen.getByLabelText(
-      textMock('schema_editor.' + ArrRestrictionKey.uniqueItems)
+      textMock('schema_editor.' + ArrRestrictionKey.uniqueItems),
     );
     await act(() => user.click(uniqueItems));
     await waitFor(() =>
       expect(onChangeRestrictionValueMock).toHaveBeenCalledWith(
         pathMock,
         ArrRestrictionKey.uniqueItems,
-        true
-      )
+        true,
+      ),
     );
   });
 });

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ArrayRestrictions/index.ts

@@ -0,0 +1 @@
+export { ArrayRestrictions } from './ArrayRestrictions';

frontend/packages/schema-editor/src/components/SchemaInspector/EnumField.test.tsx → frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumField/EnumField.test.tsx

@@ -2,25 +2,23 @@ import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { EnumField, EnumFieldProps } from './EnumField';
-import { textMock } from '../../../../../testing/mocks/i18nMock';
+import { textMock } from '../../../../../../../../testing/mocks/i18nMock';
 
-const mockPath: string = 'mockPath';
 const mockValue: string = 'test';
-const mockBaseId: string = 'id123';
-const mockId: string = `${mockBaseId}-enum-${mockValue}`;
+const mockIndex: number = 0;
 
 const mockOnChange = jest.fn();
 const mockOnDelete = jest.fn();
 const mockOnEnterKeyPress = jest.fn();
 
 const defaultProps: EnumFieldProps = {
-  path: mockPath,
   value: mockValue,
   readOnly: false,
   isValid: true,
   onChange: mockOnChange,
+  onDelete: mockOnDelete,
   onEnterKeyPress: mockOnEnterKeyPress,
-  baseId: mockBaseId,
+  index: mockIndex,
 };
 
 describe('EnumField', () => {
@@ -30,9 +28,9 @@ describe('EnumField', () => {
     const user = userEvent.setup();
     render(<EnumField {...defaultProps} />);
 
-    const textField = screen.getByLabelText(
-      textMock('schema_editor.textfield_label', { id: mockId }),
-    );
+    const textField = screen.getByRole('textbox', {
+      name: textMock('schema_editor.enum_value', { index: mockIndex }),
+    });
     expect(textField).toHaveValue(mockValue);
 
     const newValue: string = '1';
@@ -43,21 +41,12 @@ describe('EnumField', () => {
     const updatedValue: string = `${mockValue}${newValue}`;
 
     expect(mockOnChange).toHaveBeenCalledTimes(1);
-    expect(mockOnChange).toHaveBeenCalledWith(updatedValue, mockValue);
+    expect(mockOnChange).toHaveBeenCalledWith(updatedValue);
 
-    const textFieldAfter = screen.getByLabelText(
-      textMock('schema_editor.textfield_label', { id: mockId }),
-    );
-    expect(textFieldAfter).toHaveValue(updatedValue);
-  });
-
-  it('hides delete button when onDelete is not present', () => {
-    render(<EnumField {...defaultProps} />);
-
-    const deleteButton = screen.queryByRole('button', {
-      name: textMock('schema_editor.delete_field'),
+    const textFieldAfter = screen.getByRole('textbox', {
+      name: textMock('schema_editor.enum_value', { index: mockIndex }),
     });
-    expect(deleteButton).not.toBeInTheDocument();
+    expect(textFieldAfter).toHaveValue(updatedValue);
   });
 
   it('calls onDelete when delete button is clicked', async () => {
@@ -72,16 +61,15 @@ describe('EnumField', () => {
     await act(() => user.click(deleteButton));
 
     expect(mockOnDelete).toHaveBeenCalledTimes(1);
-    expect(mockOnDelete).toHaveBeenCalledWith(mockPath, mockValue);
   });
 
   it('calls onEnterKeyPress when "Enter" key is pressed', async () => {
     const user = userEvent.setup();
     render(<EnumField {...defaultProps} />);
 
-    const textField = screen.getByLabelText(
-      textMock('schema_editor.textfield_label', { id: mockId }),
-    );
+    const textField = screen.getByRole('textbox', {
+      name: textMock('schema_editor.enum_value', { index: mockIndex }),
+    });
 
     const newValue: string = '1';