diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx index 9fd56228e8d..03e10557e34 100644 --- a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx +++ b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx @@ -178,7 +178,6 @@ export const FormComponentConfig = ({ propertyKey={propertyKey} key={propertyKey} helpText={properties[propertyKey]?.description} - enumValues={properties[propertyKey]?.enum} /> ); })} diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.test.tsx index 7f4421e04d9..8540d8067d0 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { screen, waitFor } from '@testing-library/react'; + import { EditNumberValue } from './EditNumberValue'; import { renderWithProviders, renderHookWithProviders } from '../../../testing/mocks'; import { useLayoutSchemaQuery } from '../../../hooks/queries/useLayoutSchemaQuery'; @@ -14,18 +15,13 @@ const waitForData = async () => { await waitFor(() => expect(layoutSchemaResult.current[0].isSuccess).toBe(true)); }; -const renderEditNumberValue = async ({ - enumValues = null, - maxLength = undefined, - handleComponentChange = jest.fn(), -} = {}) => { +const render = async ({ maxLength = undefined, handleComponentChange = jest.fn() } = {}) => { await waitForData(); return renderWithProviders( { - afterEach(() => { - jest.resetAllMocks(); - }); - - it('should render component as input field, when not given enum prop', async () => { - await renderEditNumberValue(); - - expect( - screen.getByRole('textbox', { name: textMock('ux_editor.component_properties.maxLength') }), - ).toBeInTheDocument(); - expect(screen.queryByRole('combobox')).not.toBeInTheDocument(); - }); - - it('should render component as select, when given enum prop', async () => { - await renderEditNumberValue({ enumValues: [1, 2, 3] }); - + it('should render', async () => { + await render(); expect( - screen.getByRole('combobox', { name: textMock('ux_editor.component_properties.maxLength') }), + screen.getByText(textMock('ux_editor.component_properties.maxLength')), ).toBeInTheDocument(); - expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); - }); - - it('should call onChange when typing in input field', async () => { - const user = userEvent.setup(); - const mockHandleComponentChange = jest.fn((componentProperties, _) => componentProperties); - await renderEditNumberValue({ - handleComponentChange: mockHandleComponentChange, - }); - - await user.type(screen.getByRole('textbox'), '2'); - - expect(mockHandleComponentChange).toHaveReturnedWith({ - id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96', - type: ComponentType.Input, - textResourceBindings: { - title: 'ServiceName', - }, - maxLength: 2, - itemType: 'COMPONENT', - dataModelBindings: { simpleBinding: 'some-path' }, - }); - }); - - it('should call onChange when choosing option from select', async () => { - const user = userEvent.setup(); - const mockHandleComponentChange = jest.fn((componentProperties, _) => componentProperties); - await renderEditNumberValue({ - handleComponentChange: mockHandleComponentChange, - enumValues: [1, 2, 3], - }); - - await user.selectOptions(screen.getByRole('combobox'), '1'); - - expect(mockHandleComponentChange).toHaveReturnedWith({ - id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96', - type: ComponentType.Input, - textResourceBindings: { - title: 'ServiceName', - }, - maxLength: 1, - itemType: 'COMPONENT', - dataModelBindings: { simpleBinding: 'some-path' }, - }); }); it('should save to backend and reload the preview when changing value, including the case of changing it to undefined/empty', async () => { @@ -113,24 +51,25 @@ describe('EditNumberValue', () => { mutationFn: () => Promise.resolve(), }), ).result; - const mockHandleComponentChange = jest + + const mockhHandleComponentChange = jest .fn() .mockImplementation(async (mutationArgs, mutateOptions) => { await handleSaveMutation.current.mutateAsync(mutationArgs, mutateOptions); }); - await renderEditNumberValue({ handleComponentChange: mockHandleComponentChange }); + await render({ handleComponentChange: mockhHandleComponentChange }); const input = screen.getByRole('textbox'); await user.type(input, '12'); // The component is updated for each keystroke, so we expect the mock to be called twice - // I think it should prevent this behavior with this new issue: https://github.com/Altinn/altinn-studio/issues/11989 - expect(mockHandleComponentChange).toHaveBeenCalledTimes(2); + expect(mockhHandleComponentChange).toHaveBeenCalledTimes(2); expect(appContextMock.refetchLayouts).toHaveBeenCalledTimes(2); expect(appContextMock.refetchLayouts).toHaveBeenCalledWith('test-layout-set', true); - mockHandleComponentChange.mockClear(); + mockhHandleComponentChange.mockClear(); await user.clear(input); - expect(mockHandleComponentChange).toHaveBeenCalledTimes(1); + expect(mockhHandleComponentChange).toHaveBeenCalledTimes(1); }); }); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.tsx index 0fcf33d38e6..d1ffa8e14fb 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditNumberValue.tsx @@ -1,8 +1,8 @@ import React from 'react'; import type { IGenericEditComponent } from '../componentConfig'; import { FormField } from '../../FormField'; -import { setComponentProperty } from '@altinn/ux-editor/utils/component'; -import { StudioDecimalInput, StudioNativeSelect } from '@studio/components'; +import { setComponentProperty } from '../../../utils/component'; +import { StudioDecimalInput } from '@studio/components'; import type { ComponentType } from 'app-shared/types/ComponentType'; import type { FormItem } from '../../../types/FormItem'; import type { FilterKeysOfType } from 'app-shared/types/FilterKeysOfType'; @@ -16,7 +16,6 @@ export interface EditNumberValueProps { propertyKey: K; helpText?: string; - enumValues?: number[]; } export const EditNumberValue = >>({ @@ -24,12 +23,10 @@ export const EditNumberValue = ) => { const { t } = useTranslation(); const componentPropertyLabel = useComponentPropertyLabel(); const { selectedFormLayoutSetName, refetchLayouts } = useAppContext(); - const handleValueChange = async (newValue: number) => { handleComponentChange(setComponentProperty(component, propertyKey, newValue), { onSuccess: async () => { @@ -41,35 +38,18 @@ export const EditNumberValue = - enumValues ? ( - fieldProps.onChange(Number(e.target.value))} - id={`component-${String(propertyKey)}-select${component.id}`} - size='sm' - > - {enumValues.map((value: number) => ( - - ))} - - ) : ( - - ) - } + renderField={({ fieldProps }) => ( + + )} /> ); }; diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.test.tsx index e0ad6b87a7b..9f7f3079b53 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.test.tsx @@ -35,25 +35,12 @@ const renderEditStringValue = ({ ); describe('EditStringValue', () => { - it('should render component as input field, when not given enum prop', () => { - renderEditStringValue(); - - expect( - screen.getByRole('textbox', { name: textMock('ux_editor.component_properties.maxLength') }), - ).toBeInTheDocument(); - expect(screen.queryByRole('combobox')).not.toBeInTheDocument(); - }); - - it('should render component as select, when given enum prop', () => { - renderEditStringValue({ enumValues: ['one', 'two', 'three'] }); - - expect( - screen.getByRole('combobox', { name: textMock('ux_editor.component_properties.maxLength') }), - ).toBeInTheDocument(); - expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); + it('should render', () => { + const handleComponentChange = jest.fn(); + renderEditStringValue({ handleComponentChange }); }); - it('should call onChange handler with the correct arguments', async () => { + it(' Ensure that the onChange handler is called with the correct arguments', async () => { const handleComponentChange = jest.fn(); renderEditStringValue({ handleComponentChange }); const inputElement = screen.getByLabelText( @@ -103,6 +90,7 @@ describe('EditStringValue', () => { ); await waitFor(() => { + //await user.selectOptions(screen.getByRole('listbox'), screen.getByRole('option', { name: "one" })); expect(handleComponentChange).toHaveBeenCalledWith({ id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96', type: ComponentType.Input, diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx index b1a23583467..b727de18f13 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx @@ -67,7 +67,7 @@ export const EditStringValue = ({ fieldProps.onChange(e.target.value)} + onChange={(e: any) => fieldProps.onChange(e.target.value)} id={`component-${propertyKey}-select${component.id}`} size='sm' > diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/Group.schema.v1.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/Group.schema.v1.json index e355a660449..1c4c05f295c 100644 --- a/frontend/packages/ux-editor/src/testing/schemas/json/component/Group.schema.v1.json +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/Group.schema.v1.json @@ -100,7 +100,7 @@ "title": "Heading level", "description": "The heading level of the group title.", "enum": [2, 3, 4, 5, 6], - "type": "number" + "type": "string" } }, "required": ["id", "type", "children"], diff --git a/frontend/packages/ux-editor/src/utils/component.ts b/frontend/packages/ux-editor/src/utils/component.ts index 00a0efa1f5c..ae79e8a4a65 100644 --- a/frontend/packages/ux-editor/src/utils/component.ts +++ b/frontend/packages/ux-editor/src/utils/component.ts @@ -59,11 +59,8 @@ export const propertyTypeMatcher = (property: KeyValuePairs, propertyType: Prope switch (propertyType) { case PropertyTypes.string: - // Not all schemas with enum value explicitly specify type as string - return baseMatch || (!!property.enum && typeof property.enum[0] === 'string'); - case PropertyTypes.number: - // Not all schemas with enum value explicitly specify type as number - return baseMatch || (!!property.enum && typeof property.enum[0] === 'number'); + // Not all schemas with enum value explicitly specifies type as string + return baseMatch || !!property.enum; case PropertyTypes.array: // Currently only supporting array of strings with specified enum values return baseMatch && !!property.items?.enum;