diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 73a04014688..736cd69da66 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1329,7 +1329,7 @@ "ux_editor.component_properties.headingLevel": "Overskriftsnivå", "ux_editor.component_properties.hidden": "Skjul feltet", "ux_editor.component_properties.hiddenRow": "Angi hvilke rader som skal skjules", - "ux_editor.component_properties.hideBottomBorder": "Skjul skillelinje under komponenten", + "ux_editor.component_properties.hideBottomBorder": "Skjul skillelinjen under komponenten", "ux_editor.component_properties.hideChangeButton": "Skjul Endre-knapp", "ux_editor.component_properties.hideEmptyFields": "Skjul tomme felter", "ux_editor.component_properties.hideValidationMessages": "Skjul valideringsmeldinger", @@ -1373,9 +1373,10 @@ "ux_editor.component_properties.overrides_type": "Vis type", "ux_editor.component_properties.pageBreak": "PDF-innstillinger (pageBreak)", "ux_editor.component_properties.pageRef": "Navnet til siden det gjelder (pageRef)", - "ux_editor.component_properties.pagination": "Paginering", + "ux_editor.component_properties.pagination": "Sidenummerering", "ux_editor.component_properties.position": "Plassering av valuta", - "ux_editor.component_properties.preselectedOptionIndex": "Indeks/plassering av forhåndsvalgt verdi (preselectedOptionIndex)", + "ux_editor.component_properties.preselectedOptionIndex": "Angi det valget som skal være forhåndsvalgt.", + "ux_editor.component_properties.preselected_help_text": "Eksempel: Hvis du har 5 valg, kan du bruke tall fra 0-4.", "ux_editor.component_properties.queryParameters": "Parametere i spørringen", "ux_editor.component_properties.readOnly": "Feltet kan kun leses", "ux_editor.component_properties.receiver": "Den som mottar skjemaet", @@ -1479,6 +1480,7 @@ "ux_editor.component_properties_description.elements": "Hvilke elementer skal vises for instansinformasjonen", "ux_editor.component_properties_description.pageBreak": "Valgfri sideskift før eller etter komponenten i PDF", "ux_editor.component_properties_description.pagination": "Pagineringsvalg for repeterende gruppe", + "ux_editor.component_properties_help_text.hidden": "Hvis du velger å skjule et felt, kan du sette betingelser for når det skal skjules under Valg for dynamikk.", "ux_editor.component_title.Accordion": "Trekkspilliste", "ux_editor.component_title.AccordionGroup": "Nestet trekkspilliste", "ux_editor.component_title.ActionButton": "Handlingsknapp", diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx index 14d5f81523c..82f84a7f5b3 100644 --- a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx @@ -330,6 +330,77 @@ describe('FormComponentConfig', () => { ).not.toBeInTheDocument(); }); + it('should call handleComponentUpdate with validFileEndings undefined when hasCustomFileEndings is false', async () => { + const handleComponentUpdateMock = jest.fn(); + render({ + props: { + schema: { + properties: { + hasCustomFileEndings: { type: 'boolean', default: true }, + validFileEndings: { type: 'string', description: 'Valid file endings' }, + }, + }, + handleComponentUpdate: handleComponentUpdateMock, + }, + }); + const user = userEvent.setup(); + const hasCustomFileEndingsSwitch = screen.getByRole('checkbox', { + name: textMock('ux_editor.component_properties.hasCustomFileEndings'), + }); + expect(hasCustomFileEndingsSwitch).toBeChecked(); + await user.click(hasCustomFileEndingsSwitch); + expect(handleComponentUpdateMock).toHaveBeenCalledWith( + expect.objectContaining({ + hasCustomFileEndings: false, + validFileEndings: undefined, + }), + ); + }); + + it('should call handleComponentUpdate with updated component when hasCustomFileEndings is true', async () => { + const handleComponentUpdateMock = jest.fn(); + render({ + props: { + schema: { + properties: { + hasCustomFileEndings: { type: 'boolean', default: false }, + validFileEndings: { type: 'string', description: 'Valid file endings' }, + }, + }, + handleComponentUpdate: handleComponentUpdateMock, + }, + }); + const user = userEvent.setup(); + const hasCustomFileEndingsSwitch = screen.getByRole('checkbox', { + name: textMock('ux_editor.component_properties.hasCustomFileEndings'), + }); + expect(hasCustomFileEndingsSwitch).not.toBeChecked(); + await user.click(hasCustomFileEndingsSwitch); + expect(handleComponentUpdateMock).toHaveBeenCalledWith( + expect.objectContaining({ + hasCustomFileEndings: true, + }), + ); + }); + + it('should call handleComponentUpdate when a boolean value is toggled', async () => { + const user = userEvent.setup(); + const handleComponentUpdateMock = jest.fn(); + render({ + props: { + schema: DatepickerSchema, + handleComponentUpdate: handleComponentUpdateMock, + }, + }); + const timeStampSwitch = screen.getByRole('checkbox', { + name: textMock('ux_editor.component_properties.readOnly'), + }); + await user.click(timeStampSwitch); + expect(handleComponentUpdateMock).toHaveBeenCalledWith( + expect.objectContaining({ readOnly: true }), + ); + }); + const render = ({ props = {}, queries = {}, diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx index 3d7f2c9a3d7..39f6c9a0155 100644 --- a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx +++ b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx @@ -213,7 +213,7 @@ export const FormComponentConfig = ({ handleComponentChange={handleComponentUpdate} propertyKey={propertyKey} key={propertyKey} - helpText={properties[propertyKey]?.description} + helpText={t('ux_editor.component_properties.preselected_help_text')} enumValues={properties[propertyKey]?.enum} /> ); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.test.tsx new file mode 100644 index 00000000000..c6e98968754 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.test.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { screen, waitFor } from '@testing-library/react'; +import { EditBooleanValue } from './EditBooleanValue'; +import { renderWithProviders } from '../../../testing/mocks'; + +import { textMock } from '@studio/testing/mocks/i18nMock'; +import { ComponentType } from 'app-shared/types/ComponentType'; +import userEvent from '@testing-library/user-event'; + +const user = userEvent.setup(); + +const renderEditBooleanValue = ({ + handleComponentChange = jest.fn(), + value = false, + propertyKey = 'required', + componentOverrides = {}, + helpText = '', +} = {}) => + renderWithProviders( + , + ); + +describe('EditBooleanValue', () => { + it('should render component as switch', () => { + renderEditBooleanValue(); + + expect( + screen.getByRole('checkbox', { name: textMock('ux_editor.component_properties.required') }), + ).toBeInTheDocument(); + }); + + it('should call onChange handler with the correct arguments', async () => { + const handleComponentChange = jest.fn(); + renderEditBooleanValue({ handleComponentChange }); + const inputElement = screen.getByLabelText(textMock('ux_editor.component_properties.required')); + + user.click(inputElement); + + await waitFor(() => { + expect(handleComponentChange).toHaveBeenCalledWith({ + id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96', + type: ComponentType.Input, + textResourceBindings: { + title: 'ServiceName', + }, + required: true, + itemType: 'COMPONENT', + dataModelBindings: { simpleBinding: 'some-path' }, + }); + }); + }); + + it('should display correct help text when value is an expression (array)', () => { + renderEditBooleanValue({ + componentOverrides: { + required: [], + }, + }); + expect( + screen.getByText(textMock('ux_editor.component_properties.config_is_expression_message')), + ).toBeInTheDocument(); + }); + + it('should display custom help text', () => { + const customHelpText = textMock('ux_editor.component_properties_help_text.required'); + renderEditBooleanValue({ + helpText: customHelpText, + }); + expect(screen.getByRole('button')).toHaveTextContent(customHelpText); + }); +}); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx index 1a259f1edff..6ce1a0238bf 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx @@ -32,6 +32,10 @@ export const EditBooleanValue = ({ const getNewBooleanValue = () => !(component[propertyKey] ?? defaultValue); + const helpText = isValueExpression(component[propertyKey]) + ? t('ux_editor.component_properties.config_is_expression_message') + : componentPropertyHelpText(propertyKey); + return ( { return (