Update custom downloads tests (#481)

src/ensembl/src/content/app/custom-download/components/checkbox-grid/CheckboxGrid.test.tsx

@@ -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);
   });
 });

src/ensembl/src/content/app/custom-download/components/checkbox-with-radios/CheckboxWithRadios.test.tsx

@@ -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);
   });

src/ensembl/src/content/app/custom-download/components/checkbox-with-selects/CheckboxWithSelects.test.tsx

@@ -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}
-      />
-    );