Skip to content

Commit

Permalink
fix: rely on component type instead of its ID when display override c…
Browse files Browse the repository at this point in the history 
…onfig (#14545)
  • Loading branch information
@lassopicasso
lassopicasso authored Jan 31, 2025
1 parent 34ac65e commit c72af87
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 193 deletions.
22 changes: 14 additions & 8 deletions ...componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,38 @@ import { type CustomConfigType, useCustomConfigType } from '../hook/useCustomCon
import { useTranslation } from 'react-i18next';
import { mapSelectedTypeToConfig } from '../utils';
import { ComponentType } from 'app-shared/types/ComponentType';
import type { TargetComponentProps } from '../../Summary2Target/targetUtils';

export type Summary2OverrideDisplayTypeProps = {
override: Summary2OverrideConfig;
componentOptions: TargetComponentProps[];
onChange: (override: Summary2OverrideConfig) => void;
};

export const Summary2OverrideDisplayType = ({
override,
componentOptions,
onChange,
}: Summary2OverrideDisplayTypeProps) => {
const { t } = useTranslation();

const handleCustomTypeChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
const newSelectedType = event.target.value as SummaryCustomTargetType;
const summary2OverrideConfig = mapSelectedTypeToConfig(newSelectedType, override.componentId);
onChange(summary2OverrideConfig);
};
const selectedComponentType = componentOptions?.find(
(comp) => comp.id === override?.componentId,
)?.type;

const checkboxOrMultipleselect =
override.componentId?.includes(ComponentType.MultipleSelect) ||
override.componentId?.includes(ComponentType.Checkboxes);
selectedComponentType?.includes(ComponentType.MultipleSelect) ||
selectedComponentType?.includes(ComponentType.Checkboxes);

if (!checkboxOrMultipleselect) {
return null;
}

const handleCustomTypeChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
const newSelectedType = event.target.value as SummaryCustomTargetType;
const summary2OverrideConfig = mapSelectedTypeToConfig(newSelectedType, override.componentId);
onChange(summary2OverrideConfig);
};

return (
<StudioCard.Content>
<StudioNativeSelect
Expand Down
243 changes: 64 additions & 179 deletions ...rc/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,25 @@ import userEvent from '@testing-library/user-event';
import {
component1IdMock,
container1IdMock,
componentWithOptionsMock,
componentWithMultipleSelectMock,
layout1NameMock,
layoutMock,
} from '../../../../../testing/layoutMock';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { layoutSet1NameMock, layoutSetsExtendedMock } from '../../../../../testing/layoutSetsMock';
import { renderWithProviders } from '../../../../../testing/mocks';

const checkBoxId = componentWithOptionsMock.id;
const multipleSelectId = componentWithMultipleSelectMock.id;
const layoutMockWithMultipleSelect = {
...layoutMock,
components: {
...layoutMock.components,
[multipleSelectId]: componentWithMultipleSelectMock,
},
};

describe('Summary2Override', () => {
beforeEach(() => {
jest.clearAllMocks();
Expand All @@ -38,34 +50,21 @@ describe('Summary2Override', () => {
expect(defaultProps.onChange).toHaveBeenCalledWith([]);
});

it('should be able to show "vis type" comobox when componenetId is checkbox', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'Checkboxes', hidden: false }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
expect(
screen.getByRole('combobox', {
name: textMock('ux_editor.component_properties.summary.override.display_type'),
}),
).toBeInTheDocument();
});
it.each([checkBoxId, multipleSelectId])(
'should render type options when component is %s',
async (componentId) => {
const user = userEvent.setup();
render({ overrides: [{ componentId }] });

it('should be able to show "vis type" comobox when componenetId is multipleSelect', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'MultipleSelect' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
expect(
screen.getByRole('combobox', {
name: textMock('ux_editor.component_properties.summary.override.display_type'),
}),
).toBeInTheDocument();
});
await user.click(overrideCollapsedButton(1));
expect(renderedTypeOptions()).toBeTruthy();
},
);

it('should not show "vis type" comobox when componenetId is not checkbox or multipleSelect', async () => {
render({ overrides: [{ componentId: '1' }] });
it('should not render type selector when component is not multiple select nor checkbox', async () => {
render({ overrides: [{ componentId: component1IdMock }] });
await userEvent.click(overrideCollapsedButton(1));
await userEvent.click(addNewOverrideButton());

expect(
screen.queryByRole('combobox', {
name: textMock('ux_editor.component_properties.summary.override.display_type'),
Expand All @@ -77,7 +76,7 @@ describe('Summary2Override', () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: '2' }], target: { type: 'layoutSet' } });
const componentId = component1IdMock;
await userEvent.click(overrideCollapsedButton(1));
await user.click(overrideCollapsedButton(1));
await user.click(overrideComponentSelect());
await user.click(
screen.getByRole('option', {
Expand All @@ -92,7 +91,7 @@ describe('Summary2Override', () => {
it('should be able to change override hidden', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: '1', hidden: false }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(overrideCollapsedButton(1));
await user.click(
screen.getByRole('checkbox', {
name: textMock('ux_editor.component_properties.summary.override.show_component'),
Expand All @@ -108,7 +107,7 @@ describe('Summary2Override', () => {
it('should be able to change override hideEmptyFields', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: '1', hidden: false }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(overrideCollapsedButton(1));
await user.click(
screen.getByRole('checkbox', {
name: textMock('ux_editor.component_properties.summary.override.hide_empty_fields'),
Expand All @@ -126,7 +125,7 @@ describe('Summary2Override', () => {
it('"isCompact" checkbox should not be checked when isCompact is false', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: container1IdMock, isCompact: false }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(overrideCollapsedButton(1));
const compactCheckbox = screen.getByRole('checkbox', {
name: textMock('ux_editor.component_properties.summary.override.is_compact'),
});
Expand All @@ -140,10 +139,10 @@ describe('Summary2Override', () => {
);
});

it('"isCompact" checkbox Should be checked when isCompact is true', async () => {
it('"isCompact" checkbox should be checked when isCompact is true', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: container1IdMock, isCompact: true }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(overrideCollapsedButton(1));
const compactCheckbox = screen.getByRole('checkbox', {
name: textMock('ux_editor.component_properties.summary.override.is_compact'),
});
Expand All @@ -157,160 +156,32 @@ describe('Summary2Override', () => {
);
});

it('should render the list of custom types', async () => {
render({ overrides: [{ componentId: 'MultipleSelect' }] });
await userEvent.click(overrideCollapsedButton(1));
await userEvent.click(addNewOverrideButton());
expect(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.list'),
}),
).toBeInTheDocument();
expect(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.string'),
}),
).toBeInTheDocument();
expect(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.not_set'),
}),
).toBeInTheDocument();
});

it('should be able to change override displayType when choosing list and componentId is MultipleSelect', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'MultipleSelect', displayType: 'list' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
await user.click(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.list'),
}),
);
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'MultipleSelect', displayType: 'list' }]),
),
);
});

it('should be able to change override displayType when choosing string and componentId is MultipleSelect', async () => {
it('should be able to override display type when component type is multiple select', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'MultipleSelect', displayType: 'string' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
await user.click(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.string'),
}),
);
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'MultipleSelect', displayType: 'string' }]),
),
);
});
render({ overrides: [{ componentId: multipleSelectId }] });

it('should be able to change override displayType when choosing notSet and componentId is MultipleSelect', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'MultipleSelect', displayType: 'notSet' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
await user.click(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.not_set'),
}),
);
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'MultipleSelect', displayType: 'notSet' }]),
),
);
});

it('should be able to change override displayType when choosing list and componentId is Checkboxes', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'Checkboxes', displayType: 'list' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
await user.click(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.list'),
}),
);
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'list' }]),
),
);
});

it('should be able to change override displayType when choosing string and componentId is Checkboxes', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'Checkboxes', displayType: 'string' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
await user.click(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.string'),
}),
);
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'string' }]),
),
);
});

it('should be able to change override displayType when choosing notSet and componentId is Checkboxes', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'Checkboxes', displayType: 'notSet' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
await user.click(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.not_set'),
}),
);
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'notSet' }]),
),
);
});
await user.click(overrideCollapsedButton(1));
const optionStringType = screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.string'),
});
await user.selectOptions(overrideTypeSelect(), optionStringType);

it('should displayType have a new option value when user select a new option.', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'Checkboxes', displayType: 'string' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());
await user.click(
screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.string'),
}),
);
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'string' }]),
),
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: multipleSelectId, displayType: 'string' }]),
);
});

it('should handle custom type change', async () => {
it('should be able to override display type when component type is checkbox', async () => {
const user = userEvent.setup();
render({ overrides: [{ componentId: 'Checkboxes' }] });
await userEvent.click(overrideCollapsedButton(1));
await user.click(addNewOverrideButton());

const select = screen.getByRole('combobox', {
name: textMock('ux_editor.component_properties.summary.override.display_type'),
render({ overrides: [{ componentId: checkBoxId }] });
await user.click(overrideCollapsedButton(1));
const optionStringType = screen.getByRole('option', {
name: textMock('ux_editor.component_properties.summary.override.display_type.string'),
});
await user.selectOptions(select, 'list');
await waitFor(() =>
expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'list' }]),
),
await user.selectOptions(overrideTypeSelect(), optionStringType);

expect(defaultProps.onChange).toHaveBeenCalledWith(
expect.arrayContaining([{ componentId: checkBoxId, displayType: 'string' }]),
);
});

Expand All @@ -319,7 +190,7 @@ describe('Summary2Override', () => {
render({
overrides: [{ componentId: '1', hidden: false, hideEmptyFields: false, forceShow: true }],
});
await userEvent.click(overrideCollapsedButton(1));
await user.click(overrideCollapsedButton(1));
const emptyFieldText = 'asdf;ljr%';
const textFieldButton = screen.getByRole('button', {
name: /ux_editor.component_properties.summary.override.empty_field_text/i,
Expand Down Expand Up @@ -395,6 +266,20 @@ const overrideComponentSelect = () =>
name: textMock('ux_editor.component_properties.summary.override.choose_component'),
});

const overrideTypeSelect = () =>
screen.getByRole('combobox', {
name: textMock('ux_editor.component_properties.summary.override.display_type'),
});

const renderedTypeOptions = () => {
const expectedOptions = ['list', 'string', 'not_set'].map((type) =>
textMock(`ux_editor.component_properties.summary.override.display_type.${type}`),
);

const renderedOptions = screen.getAllByRole('option').map((option) => option.textContent);
return expectedOptions.every((option) => renderedOptions.includes(option));
};

const defaultProps: Summary2OverrideProps = {
overrides: [],
target: {},
Expand All @@ -403,7 +288,7 @@ const defaultProps: Summary2OverrideProps = {
const render = (props?: Partial<Summary2OverrideProps>) => {
const queryClient = createQueryClientMock();
queryClient.setQueryData([QueryKey.FormLayouts, org, app, layoutSet1NameMock], {
[layout1NameMock]: layoutMock,
[layout1NameMock]: layoutMockWithMultipleSelect,
});
queryClient.setQueryData([QueryKey.LayoutSetsExtended, org, app], layoutSetsExtendedMock);
renderWithProviders(<Summary2Override {...defaultProps} {...props} />, {
Expand Down
Loading

0 comments on commit c72af87

Please sign in to comment.