Unverified Commit f218a41a authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub
Browse files

Update custom downloads tests (#481)

parent 4d39d5fd
Pipeline #139029 passed with stages
in 8 minutes and 40 seconds
......@@ -15,13 +15,16 @@
*/
import React from 'react';
import { mount } from 'enzyme';
import CheckboxGrid, { CheckboxGridOption } from './CheckboxGrid';
import Checkbox from 'src/shared/components/checkbox/Checkbox';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import faker from 'faker';
import times from 'lodash/times';
import CheckboxGrid, {
CheckboxGridOption,
CheckboxGridProps
} from './CheckboxGrid';
const createCheckboxData = (options: CheckboxGridOption[]) => {
const id = faker.lorem.word();
const label = faker.lorem.word();
......@@ -49,29 +52,34 @@ describe('<CheckboxGrid />', () => {
jest.resetAllMocks();
});
let wrapper: any;
const defaultProps = {
options: defaultOptions,
onChange,
label: faker.lorem.word()
};
const renderCheckboxGrid = (props?: Partial<CheckboxGridProps>) =>
render(<CheckboxGrid {...defaultProps} {...props} />);
it('renders without error', () => {
wrapper = mount(<CheckboxGrid {...defaultProps} />);
expect(wrapper.find(CheckboxGrid).length).toEqual(1);
expect(() => {
renderCheckboxGrid();
}).not.toThrow();
});
it('renders N number of checkboxes based on the options', () => {
wrapper = mount(<CheckboxGrid {...defaultProps} />);
const { container } = renderCheckboxGrid();
expect(wrapper.find(Checkbox).length).toEqual(defaultOptions.length);
expect(container.querySelectorAll('.defaultCheckbox')?.length).toEqual(
defaultOptions.length
);
});
it('sorts the checkboxes based on the options array', () => {
wrapper = mount(<CheckboxGrid {...defaultProps} />);
const firstGridContainer = wrapper.find('.checkboxGridContainer').first();
const { container } = renderCheckboxGrid();
const firstGridContainer = container.querySelector(
'.checkboxGridContainer'
);
const labels: string[] = [];
Object.values(defaultOptions).forEach((element) => {
labels.push(element.label);
......@@ -79,27 +87,32 @@ describe('<CheckboxGrid />', () => {
const firstLabel = labels.shift();
const lastLabel = labels.pop();
const firstCheckbox = firstGridContainer.find(Checkbox).first();
expect(firstCheckbox.prop('label')).toEqual(firstLabel);
const lastCheckbox = firstGridContainer.find(Checkbox).last();
expect(lastCheckbox.prop('label')).toEqual(lastLabel);
const allCheckboxes = (firstGridContainer as HTMLElement).querySelectorAll(
'.defaultCheckbox'
);
const firstCheckbox = allCheckboxes[0];
expect(firstCheckbox.nextSibling?.textContent).toEqual(firstLabel);
const lastCheckbox = allCheckboxes[allCheckboxes.length - 1];
expect(lastCheckbox.nextSibling?.textContent).toEqual(lastLabel);
});
it('calls the checkboxOnChange when a checkbox is checked/unchecked', async () => {
wrapper = mount(<CheckboxGrid {...defaultProps} />);
const firstCheckbox = wrapper.find(Checkbox).first();
const { container } = renderCheckboxGrid();
const firstCheckbox = container.querySelector(
'.defaultCheckbox'
) as HTMLElement;
firstCheckbox.find('.defaultCheckbox').simulate('click');
userEvent.click(firstCheckbox);
const checkedStatus = firstCheckbox.prop('checked');
const checkedStatus = defaultOptions[0].isChecked;
const firstCheckboxID = defaultOptions[0].id;
expect(onChange).toBeCalledWith(!checkedStatus, firstCheckboxID);
});
it('hides the unchecked checkboxes when hideUnchecked is true', () => {
wrapper = mount(<CheckboxGrid {...defaultProps} hideUnchecked={true} />);
const { container } = renderCheckboxGrid({ hideUnchecked: true });
let totalCheckedCheckboxes = 0;
......@@ -109,26 +122,33 @@ describe('<CheckboxGrid />', () => {
}
});
expect(wrapper.find(Checkbox).length).toBe(totalCheckedCheckboxes);
expect(container.querySelectorAll('.defaultCheckbox').length).toBe(
totalCheckedCheckboxes
);
});
it('hides the title when hideTitles is true', () => {
wrapper = mount(<CheckboxGrid {...defaultProps} hideLabel={true} />);
it('hides the grid label when hideLabel is true', () => {
const { container } = renderCheckboxGrid({ hideLabel: true });
expect(wrapper.find('.checkboxGridTitle').length).toBe(0);
expect(container.querySelector('.checkboxGridTitle')).toBeFalsy();
});
it('draws 3 columns by default', () => {
wrapper = mount(<CheckboxGrid {...defaultProps} />);
const firstGridContainer = wrapper.find('.checkboxGridContainer').first();
expect(firstGridContainer.children().length).toBe(3);
const { container } = renderCheckboxGrid();
const firstGridContainer = container.querySelector(
'.checkboxGridContainer'
) as HTMLElement;
expect(firstGridContainer.children.length).toBe(3);
});
it('draws N number of columns based on the `column` parameter', () => {
const columns = 4;
wrapper = mount(<CheckboxGrid {...defaultProps} columns={columns} />);
const firstGridContainer = wrapper.find('.checkboxGridContainer').first();
expect(firstGridContainer.children().length).toBe(columns);
const { container } = renderCheckboxGrid({ columns });
const firstGridContainer = container.querySelector(
'.checkboxGridContainer'
) as HTMLElement;
expect(firstGridContainer.children.length).toBe(columns);
});
});
......@@ -15,13 +15,15 @@
*/
import React from 'react';
import { mount } from 'enzyme';
import CheckboxWithRadios from './CheckboxWithRadios';
import Checkbox from 'src/shared/components/checkbox/Checkbox';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import faker from 'faker';
import times from 'lodash/times';
import CheckboxWithRadios, {
CheckboxWithRadiosProps
} from './CheckboxWithRadios';
const onChange = jest.fn();
const createOption = () => ({
......@@ -34,7 +36,6 @@ describe('<CheckboxWithRadios />', () => {
jest.resetAllMocks();
});
let wrapper: any;
const defaultProps = {
onChange: onChange,
label: 'foo',
......@@ -42,39 +43,57 @@ describe('<CheckboxWithRadios />', () => {
options: times(5, () => createOption())
};
const renderCheckboxWithRadios = (props?: Partial<CheckboxWithRadiosProps>) =>
render(<CheckboxWithRadios {...defaultProps} {...props} />);
it('renders without error', () => {
wrapper = mount(<CheckboxWithRadios {...defaultProps} />);
expect(wrapper.find(CheckboxWithRadios).length).toEqual(1);
expect(() => {
renderCheckboxWithRadios();
}).not.toThrow();
});
it('does not check the checkbox when there are no options selected', () => {
wrapper = mount(<CheckboxWithRadios {...defaultProps} />);
const { container } = renderCheckboxWithRadios();
expect(wrapper.find(Checkbox).prop('checked')).toBe(false);
expect(
(container.querySelector('.checkboxHolder input') as HTMLInputElement)
.checked
).toBeFalsy();
});
it('does not display any radios when the checkbox is unchecked', () => {
wrapper = mount(<CheckboxWithRadios {...defaultProps} />);
const { container } = renderCheckboxWithRadios();
expect(
(container.querySelector('.checkboxHolder input') as HTMLInputElement)
.checked
).toBeFalsy();
expect(wrapper.find(Checkbox).prop('checked')).toBe(false);
expect(wrapper.find('input[type="radio"]').length).toBe(0);
expect(container.querySelector('.radio')).toBeFalsy();
});
it('displays all the radios when the checkbox is checked', () => {
wrapper = mount(<CheckboxWithRadios {...defaultProps} />);
const { container } = renderCheckboxWithRadios();
wrapper.find(Checkbox).find('.defaultCheckbox').simulate('click');
expect(wrapper.find('input[type="radio"]').length).toBe(
const checkboxElement = container.querySelector('.defaultCheckbox');
userEvent.click(checkboxElement as HTMLElement);
expect(container.querySelectorAll('.radio').length).toBe(
defaultProps.options.length
);
});
it('calls the onChange when the radio is changed with the selected option', () => {
wrapper = mount(<CheckboxWithRadios {...defaultProps} />);
const { container } = renderCheckboxWithRadios();
const checkboxElement = container.querySelector('.defaultCheckbox');
userEvent.click(checkboxElement as HTMLInputElement);
wrapper.find(Checkbox).find('.defaultCheckbox').simulate('click');
const firstRadioInput = container.querySelector('.radio');
wrapper.find('input[type="radio"]').first().simulate('change');
userEvent.click(firstRadioInput as HTMLInputElement);
expect(onChange).toHaveBeenCalledWith(defaultProps.options[0].value);
});
......
......@@ -15,14 +15,15 @@
*/
import React from 'react';
import { mount } from 'enzyme';
import CheckboxWithSelects from './CheckboxWithSelects';
import Checkbox from 'src/shared/components/checkbox/Checkbox';
import Select from 'src/shared/components/select/Select';
import ImageButton from 'src/shared/components/image-button/ImageButton';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import faker from 'faker';
import times from 'lodash/times';
import CheckboxWithSelects, {
CheckboxWithSelectsProps
} from './CheckboxWithSelects';
const createOption = (isSelected = false) => ({
value: faker.random.uuid(),
label: faker.random.words(5),
......@@ -31,107 +32,145 @@ const createOption = (isSelected = false) => ({
const onChange = jest.fn();
const defaultProps = {
onChange: onChange,
label: 'foo',
selectedOptions: [],
options: times(5, () => createOption())
};
describe('<CheckboxWithSelects />', () => {
const renderCheckboxWithSelects = (
props?: Partial<CheckboxWithSelectsProps>
) => render(<CheckboxWithSelects {...defaultProps} {...props} />);
afterEach(() => {
jest.resetAllMocks();
});
let wrapper: any;
const defaultProps = {
onChange: onChange,
label: 'foo',
selectedOptions: [],
options: times(5, () => createOption())
};
it('renders without error', () => {
wrapper = mount(<CheckboxWithSelects {...defaultProps} />);
expect(wrapper.find(CheckboxWithSelects).length).toEqual(1);
expect(() => {
renderCheckboxWithSelects();
}).not.toThrow();
});
it('does not check the checkbox when there are no options selected', () => {
wrapper = mount(<CheckboxWithSelects {...defaultProps} />);
const { container } = renderCheckboxWithSelects();
expect(wrapper.find(Checkbox).prop('checked')).toBe(false);
expect(
(container.querySelector('.checkboxHolder input') as HTMLInputElement)
.checked
).toBeFalsy();
});
it('displays one Select when the checkbox is unchecked', () => {
wrapper = mount(<CheckboxWithSelects {...defaultProps} />);
const { container } = renderCheckboxWithSelects();
expect(
(container.querySelector('.checkboxHolder input') as HTMLInputElement)
.checked
).toBeFalsy();
expect(wrapper.find(Checkbox).prop('checked')).toBe(false);
expect(wrapper.find(Select).length).toBe(1);
expect(container.querySelectorAll('.select').length).toBe(1);
});
it('displays one Select when the checkbox is checked', () => {
wrapper = mount(<CheckboxWithSelects {...defaultProps} />);
const { container } = renderCheckboxWithSelects();
const checkboxElement = container.querySelector('.defaultCheckbox');
wrapper.find(Checkbox).find('.defaultCheckbox').simulate('click');
expect(wrapper.find(Select).length).toBe(1);
userEvent.click(checkboxElement as HTMLElement);
expect(container.querySelectorAll('.select').length).toBe(1);
});
it('automatically checks the checkbox if at least one option is selected', () => {
wrapper = mount(
<CheckboxWithSelects {...defaultProps} selectedOptions={['one']} />
);
const { container } = renderCheckboxWithSelects({
selectedOptions: [defaultProps.options[0].value]
});
expect(wrapper.find(Checkbox).prop('checked')).toBe(true);
expect(
(container.querySelector('.checkboxHolder input') as HTMLInputElement)
.checked
).toBeTruthy();
});
it('does not display the remove button next to the Select if no option is selected ', () => {
wrapper = mount(<CheckboxWithSelects {...defaultProps} />);
const { container } = renderCheckboxWithSelects();
const checkboxElement = container.querySelector('.defaultCheckbox');
userEvent.click(checkboxElement as HTMLElement);
wrapper.find(Checkbox).find('.defaultCheckbox').simulate('click');
expect(wrapper.find(Select).length).toBe(1);
expect(wrapper.find('.removeIconHolder').length).toBe(0);
expect(container.querySelectorAll('.select').length).toBe(1);
expect(container.querySelector('.removeIconHolder')).toBeFalsy();
});
it('displays the remove button next to the Select if an option is selected', () => {
wrapper = mount(
<CheckboxWithSelects
{...defaultProps}
selectedOptions={[defaultProps.options[0].value]}
/>
);
const { container } = renderCheckboxWithSelects({
selectedOptions: [defaultProps.options[0].value]
});
expect(wrapper.find('.removeIconHolder').length).toBe(1);
expect(container.querySelectorAll('.removeIconHolder').length).toBe(1);
});
it('displays the Plus button when one option is selected', () => {
wrapper = mount(
<CheckboxWithSelects
{...defaultProps}
selectedOptions={[defaultProps.options[0].value]}
/>
);
const { container } = renderCheckboxWithSelects({
selectedOptions: [defaultProps.options[0].value]
});
expect(wrapper.find('.addIconHolder').length).toBe(1);
expect(container.querySelectorAll('.addIconHolder').length).toBe(1);
});
it('displays another select when the plus button is clicked', () => {
wrapper = mount(
<CheckboxWithSelects
{...defaultProps}
selectedOptions={[defaultProps.options[0].value]}
/>
);
const { container } = renderCheckboxWithSelects({
selectedOptions: [defaultProps.options[0].value]
});
expect(container.querySelectorAll('.select').length).toBe(1);
expect(wrapper.find(Select)).toHaveLength(1);
const addIcon = container.querySelector('.addIconHolder .imageButton');
wrapper.find('.addIconHolder').find(ImageButton).simulate('click');
userEvent.click(addIcon as HTMLElement);
expect(wrapper.find(Select)).toHaveLength(2);
expect(container.querySelectorAll('.select').length).toBe(2);
});
it('hides the options that are already selected within the new Select', () => {
wrapper = mount(
<CheckboxWithSelects
{...defaultProps}
selectedOptions={[defaultProps.options[0].value]}
/>
it('displays all the options when no options are selected', () => {
const { container } = renderCheckboxWithSelects();
const selectElement = container.querySelector(
'.select'
) as HTMLInputElement;
const selectControl = selectElement.querySelector('.selectControl');
userEvent.click(selectControl as HTMLElement);
expect(selectElement.querySelectorAll('.option')).toHaveLength(
defaultProps.options.length
);
});
it('hides the options that are already selected within the new Select', () => {
const { container } = renderCheckboxWithSelects({
selectedOptions: [defaultProps.options[0].value]
});
wrapper.find('.addIconHolder').find(ImageButton).simulate('click');
expect(wrapper.find(Select).last().prop('options')).toHaveLength(4);
const addIcon = container.querySelector('.addIconHolder .imageButton');
userEvent.click(addIcon as HTMLElement);
const allSelects = container.querySelectorAll('.select');
const lastSelect = allSelects[allSelects.length - 1];
const lastSelectControl = lastSelect.querySelector('.selectControl');
userEvent.click(lastSelectControl as HTMLElement);
expect(lastSelect.querySelectorAll('.option')).toHaveLength(
defaultProps.options.length - 1
);
});
it('does not display the Plus button when all the options are selected', () => {
......@@ -140,39 +179,31 @@ describe('<CheckboxWithSelects />', () => {
optionValues.push(option.value);
});
wrapper = mount(
<CheckboxWithSelects {...defaultProps} selectedOptions={optionValues} />
);
expect(wrapper.find('.addIconHolder').length).toBe(0);
const { container } = renderCheckboxWithSelects({
selectedOptions: optionValues
});
expect(container.querySelector('.addIconHolder')).toBeFalsy();
});
it('calls the onChange function when an option is selected', () => {
wrapper = mount(
<CheckboxWithSelects
{...defaultProps}
selectedOptions={[defaultProps.options[0].value]}
/>
);
const { container } = renderCheckboxWithSelects({
selectedOptions: [defaultProps.options[0].value]
});
const addIcon = container.querySelector('.addIconHolder .imageButton');
wrapper.find('.addIconHolder').find(ImageButton).simulate('click');
userEvent.click(addIcon as HTMLElement);
const mockedClickEvent = {
stopPropagation: jest.fn(),
nativeEvent: {
stopImmediatePropagation: jest.fn()
}
};
const allSelects = container.querySelectorAll('.select');
const lastSelect = allSelects[allSelects.length - 1];
const lastSelectControl = lastSelect.querySelector('.selectControl');
wrapper.find(Select).last().find('.selectControl').simulate('click');
userEvent.click(lastSelectControl as HTMLElement);
wrapper.update();
wrapper
.find('.optionsPanel')
.last()
.find('li')
.first()
.simulate('click', mockedClickEvent);
const lastSelectOptionsPanel = lastSelect.querySelector('.optionsPanel');
const targetOption = lastSelectOptionsPanel?.querySelector('li');
userEvent.click(targetOption as HTMLElement);
expect(onChange).toHaveBeenCalledWith([
defaultProps.options[0].value,
......@@ -185,17 +216,14 @@ describe('<CheckboxWithSelects />', () => {
defaultProps.options[0].value,
defaultProps.options[1].value
];
wrapper = mount(
<CheckboxWithSelects
{...defaultProps}
selectedOptions={selectedOptions}
/>
);
wrapper
.find('.removeIconHolder')
.last()