Skip to content

Commit

Permalink
update tests, remove duplicates and fix "false" tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@lassopicasso
lassopicasso committed Jan 30, 2025
1 parent e022534 commit 13cb6fa
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 177 deletions.
235 changes: 58 additions & 177 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,18 @@ 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;

describe('Summary2Override', () => {
beforeEach(() => {
jest.clearAllMocks();
Expand All @@ -38,34 +43,24 @@ 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));
await user.click(addNewOverrideButton());

it('should not show "vis type" comobox when componenetId is not checkbox or multipleSelect', async () => {
render({ overrides: [{ componentId: '1' }] });
expect(renderedTypeOptions()).toBeTruthy();
},
);

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 +72,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 +87,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 +103,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 +121,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 +135,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 +152,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 () => {
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' }]),
),
);
});

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 () => {
it('should be able to override display type when component type is multiple select', 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' }]),
),
);
});
render({ overrides: [{ componentId: multipleSelectId }] });

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 +186,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 +262,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 Down
12 changes: 12 additions & 0 deletions frontend/packages/ux-editor/src/testing/layoutMock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,17 @@ export const componentWithOptionsMock: FormComponent = {
optionsId: '',
propertyPath: 'definitions/radioAndCheckboxComponents',
};

export const componentWithMultipleSelectMock: FormComponent = {
id: 'ComponentWithMultipleSelectMock',
type: ComponentType.MultipleSelect,
dataModelBindings: { simpleBinding: 'some-path' },
itemType: 'COMPONENT',
pageIndex: null,
optionsId: '',
propertyPath: 'definitions/multipleSelectComponent',
};

export const container1IdMock = 'Container-1';
export const container2IdMock = 'Container-2';
export const customRootPropertiesMock: KeyValuePairs = {
Expand All @@ -70,6 +81,7 @@ export const layoutMock: IInternalLayout = {
[componentMocks[ComponentType.FileUploadWithTag].id]:
componentMocks[ComponentType.FileUploadWithTag],
ComponentWithOptionsMock: componentWithOptionsMock,
ComponentWithMultipleSelectMock: componentWithMultipleSelectMock,
},
containers: {
[baseContainerIdMock]: {
Expand Down

0 comments on commit 13cb6fa

Please sign in to comment.