refactor: rewrite tests using react testing library

openedx · Aug 30, 2023 · 52c0990 · 52c0990
1 parent f41ecf9
commit 52c0990
Show file tree

Hide file tree

Showing 95 changed files with 2,309 additions and 2,001 deletions.
diff --git a/src/Button/deprecated/Button.test.jsx b/src/Button/deprecated/Button.test.jsx
@@ -1,39 +1,35 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
 import Button from './index';
 
 const defaultProps = {
   label: 'Click me!',
 };
 
 describe('<Button />', () => {
-  let wrapper;
-  let button;
-
-  beforeEach(() => {
-    const app = document.createElement('div');
-    document.body.appendChild(app);
-    wrapper = mount(<Button
-      {...defaultProps}
-    />, { attachTo: app });
-
-    button = wrapper.find('button');
-  });
   it('renders', () => {
-    expect(button).toHaveLength(1);
+    const { getByText } = render(<Button {...defaultProps} />);
+    const button = getByText(defaultProps.label);
+    expect(button).toBeInTheDocument();
   });
+
   it('puts focus on button on click', () => {
-    expect(button.matchesElement(document.activeElement)).toEqual(false);
-    button.simulate('click');
-    button = wrapper.find('button');
-    expect(button.at(0).html()).toEqual(document.activeElement.outerHTML);
+    const { getByText } = render(<Button {...defaultProps} />);
+    const button = getByText(defaultProps.label);
+
+    expect(button).not.toHaveFocus();
+    userEvent.click(button);
+    expect(button).toHaveFocus();
   });
+
   it('calls onClick prop on click', () => {
     const onClickSpy = jest.fn();
-    wrapper.setProps({ onClick: onClickSpy });
+    const { getByText } = render(<Button {...defaultProps} onClick={onClickSpy} />);
+    const button = getByText(defaultProps.label);
 
-    expect(onClickSpy).toHaveBeenCalledTimes(0);
-    button.simulate('click');
+    userEvent.click(button);
     expect(onClickSpy).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/CheckBox/CheckBox.test.jsx b/src/CheckBox/CheckBox.test.jsx
@@ -1,78 +1,64 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import CheckBox from './index';
 
 describe('<CheckBox />', () => {
   it('attributes are set correctly', () => {
-    const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
-
-    expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true);
-    expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true);
-    expect(wrapper.find('[checked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    const { getByLabelText } = render(<CheckBox name="checkbox" label="check me out!" />);
+    const checkbox = getByLabelText('check me out!');
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).toHaveAttribute('type', 'checkbox');
+    expect(checkbox).not.toBeChecked();
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
   });
 
   it('aria-label changes after click', () => {
-    const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
-
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
-
-    wrapper.find('[type="checkbox"]').simulate('change');
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(false);
-    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
-
-    wrapper.find('[type="checkbox"]').simulate('change');
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(false);
+    const { getByLabelText } = render(<CheckBox name="checkbox" label="check me out!" />);
+    const checkbox = getByLabelText('check me out!');
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    fireEvent.click(checkbox);
+    expect(checkbox).toHaveAttribute('aria-checked', 'true');
+    fireEvent.click(checkbox);
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
   });
 
   it('check that callback function is triggered when clicked', () => {
-    const spy = jest.fn();
-    const wrapper = mount(<CheckBox name="checkbox" label="check me out!" onChange={spy} />);
-
-    expect(spy).toHaveBeenCalledTimes(0);
-    // check
-    wrapper.find('input').simulate('change', { target: { checked: true, type: 'checkbox' } });
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenLastCalledWith(true, 'checkbox');
-    // uncheck
-    wrapper.find('input').simulate('change', { target: { checked: false, type: 'checkbox' } });
-    expect(spy).toHaveBeenCalledTimes(2);
-    expect(spy).toHaveBeenLastCalledWith(false, 'checkbox');
+    const onChangeSpy = jest.fn();
+    const { getByLabelText } = render(<CheckBox name="checkbox" label="check me out!" onChange={onChangeSpy} />);
+    const checkbox = getByLabelText('check me out!');
+    expect(onChangeSpy).toHaveBeenCalledTimes(0);
+    fireEvent.click(checkbox);
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(true, 'checkbox');
+    fireEvent.click(checkbox);
+    expect(onChangeSpy).toHaveBeenCalledTimes(2);
+    expect(onChangeSpy).toHaveBeenCalledWith(false, 'checkbox');
   });
 
   it('checks if start state can be set to checked', () => {
-    const wrapper = mount(<CheckBox name="checkbox" label="I start checked" checked />);
-
-    expect(wrapper.find('[checked=true]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
-
-    wrapper.find('input').simulate('change');
-    expect(wrapper.find('[checked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    const { getByLabelText } = render(<CheckBox name="checkbox" label="I start checked" checked />);
+    const checkbox = getByLabelText('I start checked');
+    expect(checkbox).toBeChecked();
+    expect(checkbox).toHaveAttribute('aria-checked', 'true');
+    fireEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
   });
 
   it('checkbox can be disabled', () => {
-    const wrapper = mount(<CheckBox name="checkbox" label="I am disabled" disabled />);
-
-    expect(wrapper.props().disabled).toEqual(true);
-
-    wrapper.find('input').simulate('change');
-    expect(wrapper.props().disabled).toEqual(true);
+    const { getByLabelText } = render(<CheckBox name="checkbox" label="I am disabled" disabled />);
+    const checkbox = getByLabelText('I am disabled');
+    expect(checkbox).toBeDisabled();
+    fireEvent.click(checkbox);
+    expect(checkbox).toBeDisabled();
   });
 
   it('overrides state value when props value changes', () => {
-    const wrapper = mount(<CheckBox name="checkbox" label="I start checked" checked />);
-    expect(wrapper.find('[checked=true]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
-
-    wrapper.setProps({
-      checked: false,
-    });
-
-    wrapper.update();
-
-    expect(wrapper.find('[checked=true]').exists()).toEqual(false);
-    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(false);
+    const { getByLabelText, rerender } = render(<CheckBox name="checkbox" label="I start checked" checked />);
+    const checkbox = getByLabelText('I start checked');
+    expect(checkbox).toBeChecked();
+    rerender(<CheckBox name="checkbox" label="I start checked" checked={false} />);
+    expect(checkbox).not.toBeChecked();
   });
 });
diff --git a/src/CheckBoxGroup/CheckBoxGroup.test.jsx b/src/CheckBoxGroup/CheckBoxGroup.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import CheckBoxGroup from './index';
 import CheckBox from '../CheckBox';
 
@@ -24,10 +25,10 @@ describe('<CheckBoxGroup />', () => {
         />
       </CheckBoxGroup>
     );
-    const wrapper = mount(checkBoxGroup);
+    const { getByLabelText } = render(checkBoxGroup);
 
-    expect(wrapper.find('[id="checkbox1"]').exists()).toEqual(true);
-    expect(wrapper.find('[id="checkbox2"]').exists()).toEqual(true);
-    expect(wrapper.find('[id="checkbox3"]').exists()).toEqual(true);
+    expect(getByLabelText('CheckBox 1')).toBeInTheDocument();
+    expect(getByLabelText('CheckBox 2')).toBeInTheDocument();
+    expect(getByLabelText('CheckBox 3')).toBeInTheDocument();
   });
 });
diff --git a/src/Chip/Chip.test.jsx b/src/Chip/Chip.test.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { Close } from '../../icons';
 import Chip from './index';
@@ -43,28 +45,38 @@ describe('<Chip />', () => {
 
   describe('correct rendering', () => {
     it('renders with correct class when variant is added', () => {
-      const wrapper = mount(<TestChip variant="dark" />);
-      const chip = wrapper.find('.pgn__chip');
-      expect(chip.hasClass('pgn__chip-dark')).toEqual(true);
+      const { getByTestId } = render(<TestChip variant="dark" data-testid="chip" />);
+      const chip = getByTestId('chip');
+      expect(chip).toHaveClass('pgn__chip pgn__chip-dark');
     });
     it('renders with active class when disabled prop is added', () => {
-      const wrapper = mount(<TestChip disabled />);
-      const chip = wrapper.find('.pgn__chip');
-      expect(chip.hasClass('disabled')).toEqual(true);
+      const { getByTestId } = render(<TestChip disabled data-testid="chip" />);
+      const chip = getByTestId('chip');
+      expect(chip).toHaveClass('pgn__chip disabled');
     });
     it('renders with the client\'s className', () => {
       const className = 'testClassName';
-      const wrapper = mount(<TestChip className={className} />);
-      const chip = wrapper.find('.pgn__chip');
-      expect(chip.hasClass(className)).toEqual(true);
+      const { getByTestId } = render(<TestChip className={className} data-testid="chip" />);
+      const chip = getByTestId('chip');
+      expect(chip).toHaveClass(className);
     });
-    it('onIconAfterClick is triggered', () => {
+    it('onIconAfterClick is triggered', async () => {
       const func = jest.fn();
-      const wrapper = mount(<TestChip iconAfter={Close} onIconAfterClick={func} />);
-      const iconAfter = wrapper.find('.pgn__chip__icon-after');
-      iconAfter.simulate('click');
-      iconAfter.simulate('keypress');
-      expect(func).toHaveBeenCalledTimes(2);
+      const { getByTestId } = render(
+        <TestChip iconAfter={Close} onIconAfterClick={func} />,
+      );
+      const iconAfter = getByTestId('icon-after');
+      userEvent.click(iconAfter);
+      expect(func).toHaveBeenCalled();
+    });
+    it('onIconAfterKeyDown is triggered', async () => {
+      const func = jest.fn();
+      const { getByTestId } = render(
+        <TestChip iconAfter={Close} onIconAfterClick={func} />,
+      );
+      const iconAfter = getByTestId('icon-after');
+      userEvent.type(iconAfter, '{enter}');
+      expect(func).toHaveBeenCalled();
     });
   });
 });
diff --git a/src/Chip/__snapshots__/Chip.test.jsx.snap b/src/Chip/__snapshots__/Chip.test.jsx.snap
@@ -11,6 +11,7 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
+    data-testid="icon-after"
     role="button"
     tabIndex={0}
   >
@@ -106,6 +107,7 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
+    data-testid="icon-after"
     role="button"
     tabIndex={0}
   >

diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
@@ -65,6 +65,7 @@ const Chip = React.forwardRef(({
         onClick={onIconAfterClick}
         onKeyPress={onIconAfterClick}
         tabIndex={disabled ? -1 : 0}
+        data-testid="icon-after"
       >
         <Icon src={iconAfter} />
       </div>