Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not show required radiobuttons when using code list #12448

Merged
merged 2 commits into from
Mar 11, 2024
Merged

Not show required radiobuttons when using code list #12448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75a39ad
Remove 'At least one radio required' error message when custom code l…
standeren Mar 6, 2024
355e41e
Adapt tests for checkboxes also
standeren Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/language/src/nb.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
52 changes: 48 additions & 4 deletions frontend/packages/ux-editor/src/components/config/editModal/EditOptions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<ComponentType.RadioButtons> = {
id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96',
type: ComponentType.RadioButtons,
textResourceBindings: {
Expand All @@ -18,7 +19,10 @@ const mockComponent: FormRadioButtonsComponent = {
dataModelBindings: {},
};

const renderEditOptions = ({ component = mockComponent, handleComponentChange = jest.fn() } = {}) =>
const renderEditOptions = <T extends ComponentType.Checkboxes | ComponentType.RadioButtons>({
component = mockComponent as FormItem<T>,
handleComponentChange = jest.fn(),
}: { component?: FormItem<T>; handleComponentChange?: () => void } = {}) =>
renderWithMockStore()(
<EditOptions handleComponentChange={handleComponentChange} component={component} />,
);
Expand All @@ -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: {
Expand Down
8 changes: 5 additions & 3 deletions frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@ export function EditOptions<T extends SelectionComponentType>({
>
<Paragraph>{t('ux_editor.properties_panel.options.use_code_list_label')}</Paragraph>
</Switch>
<HelpText title='Bruk kodeliste'>
{t('ux_editor.properties_panel.options.use_code_list_helptext')}
<HelpText title={t('ux_editor.properties_panel.options.use_code_list_helpText')}>
{t('ux_editor.properties_panel.options.use_code_list_helpText')}
</HelpText>
</div>
{selectedOptionsType === SelectedOptionsType.CodeList && (
Expand Down Expand Up @@ -219,7 +219,9 @@ export function EditOptions<T extends SelectionComponentType>({
</StudioButton>
</div>
)}
{errorMessage && <ErrorMessage size='small'>{errorMessage}</ErrorMessage>}
{selectedOptionsType !== SelectedOptionsType.CodeList && errorMessage && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vi må kunne stole på at errorMessage er riktig her. Er det noen grunn til å ikke gjøre denne sjekken et annet sted, @standeren?

<ErrorMessage size='small'>{errorMessage}</ErrorMessage>
)}
</>
);
}
Loading