diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index ffa53e4f64c..972062fec1a 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1862,7 +1862,7 @@ "ux_editor.properties_panel.options.codelist_switch_to_custom": "Bytt til egendefinert kodeliste", "ux_editor.properties_panel.options.codelist_switch_to_static": "Bytt til statisk kodeliste", "ux_editor.properties_panel.options.remove_option": "Slett alternativ", - "ux_editor.properties_panel.options.use_code_list_helptext": "Skru på denne innstillingen for å bruke en kodeliste for å styre alternativene til denne komponenten. Skru av innstillingen for å legge til alternativene manuelt.", + "ux_editor.properties_panel.options.use_code_list_helpText": "Skru på denne innstillingen for å bruke en kodeliste for å styre alternativene til denne komponenten. Skru av innstillingen for å legge til alternativene manuelt.", "ux_editor.properties_panel.options.use_code_list_label": "Bruk kodeliste", "ux_editor.properties_panel.texts.loading": "Laster inn tekster", "ux_editor.properties_panel.texts.no_properties": "Det er ingen tekster å konfigurere for denne komponenten.", diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.test.tsx index 9f27fcf3020..ebc12e1281c 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.test.tsx @@ -5,9 +5,10 @@ import { EditOptions } from './EditOptions'; import { renderWithMockStore } from '../../../testing/mocks'; import { textMock } from '../../../../../../testing/mocks/i18nMock'; import { ComponentType } from 'app-shared/types/ComponentType'; -import type { FormRadioButtonsComponent } from '../../../types/FormComponent'; +import type { FormComponent } from '../../../types/FormComponent'; +import type { FormItem } from '../../../types/FormItem'; -const mockComponent: FormRadioButtonsComponent = { +const mockComponent: FormComponent = { id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96', type: ComponentType.RadioButtons, textResourceBindings: { @@ -18,7 +19,10 @@ const mockComponent: FormRadioButtonsComponent = { dataModelBindings: {}, }; -const renderEditOptions = ({ component = mockComponent, handleComponentChange = jest.fn() } = {}) => +const renderEditOptions = ({ + component = mockComponent as FormItem, + handleComponentChange = jest.fn(), +}: { component?: FormItem; handleComponentChange?: () => void } = {}) => renderWithMockStore()( , ); @@ -31,13 +35,53 @@ describe('EditOptions', () => { ).toBeInTheDocument(); }); - it('should show code list input by default when neither options nor optionId are set', async () => { + it('should show code list input by default when neither options nor optionId are set', () => { renderEditOptions(); expect( screen.getByText(textMock('ux_editor.modal_properties_custom_code_list_id')), ).toBeInTheDocument(); }); + it('should not show error message when code list input is enabled', async () => { + renderEditOptions(); + screen.getByText(textMock('ux_editor.modal_properties_custom_code_list_id')); + expect( + screen.queryByText(textMock('ux_editor.radios_error_NoOptions')), + ).not.toBeInTheDocument(); + }); + + it('should show error message when manual options are enabled by switch', async () => { + renderEditOptions(); + expect( + screen.queryByText(textMock('ux_editor.radios_error_NoOptions')), + ).not.toBeInTheDocument(); + const switchElement = screen.getByRole('checkbox'); + await act(() => switchElement.click()); + screen.getByText(textMock('ux_editor.radios_error_NoOptions')); + }); + + it('should not show error message when code list input is enabled for CheckBoxes component', async () => { + renderEditOptions({ + component: { ...mockComponent, type: ComponentType.Checkboxes }, + }); + screen.getByText(textMock('ux_editor.modal_properties_custom_code_list_id')); + expect( + screen.queryByText(textMock('ux_editor.checkboxes_error_NoOptions')), + ).not.toBeInTheDocument(); + }); + + it('should show error message when manual options are enabled by switch for CheckBoxes component', async () => { + renderEditOptions({ + component: { ...mockComponent, type: ComponentType.Checkboxes }, + }); + expect( + screen.queryByText(textMock('ux_editor.checkboxes_error_NoOptions')), + ).not.toBeInTheDocument(); + const switchElement = screen.getByRole('checkbox'); + await act(() => switchElement.click()); + screen.getByText(textMock('ux_editor.checkboxes_error_NoOptions')); + }); + it('should show manual input when component has options defined', async () => { renderEditOptions({ component: { diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx index 4f47ab06f59..328874eb8b4 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx @@ -133,8 +133,8 @@ export function EditOptions({ > {t('ux_editor.properties_panel.options.use_code_list_label')} - - {t('ux_editor.properties_panel.options.use_code_list_helptext')} + + {t('ux_editor.properties_panel.options.use_code_list_helpText')} {selectedOptionsType === SelectedOptionsType.CodeList && ( @@ -219,7 +219,9 @@ export function EditOptions({ )} - {errorMessage && {errorMessage}} + {selectedOptionsType !== SelectedOptionsType.CodeList && errorMessage && ( + {errorMessage} + )} ); }