Migrate to rtl 2 (#2620)

* test(CloseButton): migrate tests to RTL

* test(Col): migrate tests to RTL

* test(Collapse): migrate tests to RTL

* test(Container): migrate tests to RTL

* test(Modal): migrate to rtl

* fix(Offcanvas): remove offcanvas from focusableElements

stop offcanvas from focusing on body while tabbing through
focusable elements

* chore: run prettier

* test(Offcanvas): migrate offcanvas to rtl

src/__tests__/CloseButton.spec.js

@@ -1,41 +1,45 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 import CloseButton from '../CloseButton';
 
 describe('CloseButton', () => {
   it('should render a close button', () => {
-    const wrapper = shallow(<CloseButton />);
-    expect(wrapper.hasClass('btn-close')).toBe(true);
+    render(<CloseButton data-testid="close-btn" />);
+    expect(screen.getByTestId('close-btn')).toHaveClass('btn-close');
   });
 
   it('should render white variant', () => {
-    const wrapper = shallow(<CloseButton variant="white" />);
-    expect(wrapper.hasClass('btn-close-white')).toBe(true);
+    render(<CloseButton variant="white" data-testid="close-btn" />);
+    expect(screen.getByTestId('close-btn')).toHaveClass('btn-close-white');
   });
 
   describe('onClick', () => {
     it('calls props.onClick if it exists', () => {
       const onClick = jest.fn();
-      const wrapper = mount(<CloseButton onClick={onClick} />);
+      render(<CloseButton onClick={onClick} data-testid="btn-close" />);
 
-      wrapper.find('button').hostNodes().simulate('click');
+      user.click(screen.getByTestId('btn-close'));
       expect(onClick).toHaveBeenCalled();
     });
 
     it('returns the value returned by props.onClick', () => {
       const onClick = jest.fn(() => 1234);
-      const wrapper = mount(<CloseButton onClick={onClick} />);
+      render(<CloseButton onClick={onClick} data-testid="btn-close" />);
 
-      const result = wrapper.find('button').props().onClick();
-      expect(onClick).toHaveBeenCalled();
-      expect(result).toEqual(1234);
+      user.click(screen.getByTestId('btn-close'));
+
+      expect(onClick.mock.results[0].value).toBe(1234);
     });
 
     it('is not called when disabled', () => {
       const onClick = jest.fn();
-      const wrapper = mount(<CloseButton onClick={onClick} disabled />);
+      render(
+        <CloseButton onClick={onClick} disabled data-testid="btn-close" />,
+      );
+      user.click(screen.getByTestId('btn-close'));
 
-      wrapper.find('button').hostNodes().simulate('click');
       expect(onClick).not.toHaveBeenCalled();
     });
   });

src/__tests__/Col.spec.js

@@ -1,103 +1,102 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Col } from '..';
 
 describe('Col', () => {
   it('should render default .col markup', () => {
-    const wrapper = shallow(<Col />);
+    render(<Col data-testid="col" />);
 
-    expect(wrapper.html()).toBe('<div class="col"></div>');
+    expect(screen.getByTestId('col')).toHaveClass('col');
   });
 
   it('should render children', () => {
-    const wrapper = shallow(<Col>Children</Col>);
+    render(<Col data-testid="col">Children</Col>);
 
-    expect(wrapper.text()).toBe('Children');
+    expect(screen.getByText(/children/i)).toBeInTheDocument();
   });
 
   it('should pass additional classNames', () => {
-    const wrapper = shallow(<Col className="extra" />);
+    render(<Col className="extra" data-testid="col" />);
 
-    expect(wrapper.hasClass('extra')).toBe(true);
-    expect(wrapper.hasClass('col')).toBe(true);
+    expect(screen.getByTestId('col')).toHaveClass('extra');
   });
 
   it('should allow custom columns to be defined', () => {
-    const wrapper = shallow(
-      <Col widths={['base', 'jumbo']} base="4" jumbo="6" />,
+    render(
+      <Col widths={['base', 'jumbo']} base="4" jumbo="6" data-testid="col" />,
     );
 
-    expect(wrapper.hasClass('col-4')).toBe(true);
-    expect(wrapper.hasClass('col-jumbo-6')).toBe(true);
-    expect(wrapper.hasClass('col')).toBe(false);
+    expect(screen.getByTestId('col')).toHaveClass('col-4');
+    expect(screen.getByTestId('col')).toHaveClass('col-jumbo-6');
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
   });
 
   it('should allow custom columns to be defined with objects', () => {
-    const wrapper = shallow(
+    render(
       <Col
-        widths={['base', 'jumbo', 'wtf']}
-        wtf={{ size: 1, order: 2, offset: 4 }}
+        widths={['base', 'jumbo', 'spaceship']}
+        spaceship={{ size: 1, order: 2, offset: 4 }}
+        data-testid="col"
       />,
     );
 
-    expect(wrapper.hasClass('col-wtf-1')).toBe(true);
-    expect(wrapper.hasClass('order-wtf-2')).toBe(true);
-    expect(wrapper.hasClass('offset-wtf-4')).toBe(true);
-    expect(wrapper.hasClass('col')).toBe(false);
+    expect(screen.getByTestId('col')).toHaveClass('col-spaceship-1');
+    expect(screen.getByTestId('col')).toHaveClass('order-spaceship-2');
+    expect(screen.getByTestId('col')).toHaveClass('offset-spaceship-4');
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
   });
 
   it('should pass col size specific classes as Strings', () => {
-    const wrapper = shallow(<Col sm="6" />);
+    render(<Col sm="6" data-testid="col" />);
 
-    expect(wrapper.hasClass('col-sm-6')).toBe(true);
-    expect(wrapper.hasClass('col')).toBe(false);
+    expect(screen.getByTestId('col')).toHaveClass('col-sm-6');
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
   });
 
   it('should pass col size specific classes as Numbers', () => {
-    const wrapper = shallow(<Col sm={6} />);
+    render(<Col sm={6} data-testid="col" />);
 
-    expect(wrapper.hasClass('col-sm-6')).toBe(true);
-    expect(wrapper.hasClass('col')).toBe(false);
+    expect(screen.getByTestId('col')).toHaveClass('col-sm-6');
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
   });
 
   it('should pass col size as flex with values "auto" or without value', () => {
-    const wrapper = shallow(<Col xs="auto" sm />);
+    render(<Col xs="auto" sm data-testid="col" />);
 
-    expect(wrapper.hasClass('col')).toBe(false);
-    expect(wrapper.hasClass('col-auto')).toBe(true);
-    expect(wrapper.hasClass('col-sm')).toBe(true);
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
+    expect(screen.getByTestId('col')).toHaveClass('col-auto');
+    expect(screen.getByTestId('col')).toHaveClass('col-sm');
   });
 
   it('should pass col size specific classes via Objects', () => {
-    const wrapper = shallow(<Col sm={{ size: 6, order: 2, offset: 2 }} />);
+    render(<Col sm={{ size: 6, order: 2, offset: 2 }} data-testid="col" />);
 
-    expect(wrapper.hasClass('col-sm-6')).toBe(true);
-    expect(wrapper.hasClass('col')).toBe(false);
-    expect(wrapper.hasClass('order-sm-2')).toBe(true);
-    expect(wrapper.hasClass('offset-sm-2')).toBe(true);
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
+    expect(screen.getByTestId('col')).toHaveClass('col-sm-6');
+    expect(screen.getByTestId('col')).toHaveClass('order-sm-2');
+    expect(screen.getByTestId('col')).toHaveClass('offset-sm-2');
   });
 
   it('should pass col size specific classes via Objects including 0', () => {
-    const wrapper = shallow(<Col sm={{ size: 6, order: 0, offset: 0 }} />);
+    render(<Col sm={{ size: 6, order: 0, offset: 0 }} data-testid="col" />);
 
-    expect(wrapper.hasClass('col-sm-6')).toBe(true);
-    expect(wrapper.hasClass('col')).toBe(false);
-    expect(wrapper.hasClass('order-sm-0')).toBe(true);
-    expect(wrapper.hasClass('offset-sm-0')).toBe(true);
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
+    expect(screen.getByTestId('col')).toHaveClass('col-sm-6');
+    expect(screen.getByTestId('col')).toHaveClass('order-sm-0');
+    expect(screen.getByTestId('col')).toHaveClass('offset-sm-0');
   });
 
   it('should pass col size when passing via object with size "auto"', () => {
-    const wrapper = shallow(<Col sm={{ size: 'auto', offset: 2 }} />);
+    render(<Col sm={{ size: 'auto', offset: 2 }} data-testid="col" />);
 
-    expect(wrapper.hasClass('col')).toBe(false);
-    expect(wrapper.hasClass('col-sm-auto')).toBe(true);
+    expect(screen.getByTestId('col')).toHaveClass('col-sm-auto');
+    expect(screen.getByTestId('col')).not.toHaveClass('col');
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<Col tag="main">Yo!</Col>);
+    render(<Col tag="main">Yo!</Col>);
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.type()).toBe('main');
-    expect(wrapper.hasClass('col')).toBe(true);
+    expect(screen.getByText(/yo!/i).tagName.toLowerCase()).toBe('main');
   });
 });

src/__tests__/Collapse.spec.js

@@ -1,86 +1,76 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Collapse } from '..';
 
 describe('Collapse', () => {
-  let isOpen;
-  let wrapper;
-  const toggle = () => {
-    isOpen = !isOpen;
-    if (wrapper != null) {
-      wrapper.setProps({ isOpen });
-    }
-  };
-
   beforeEach(() => {
-    isOpen = false;
     jest.useFakeTimers();
   });
 
   afterEach(() => {
-    // fast forward time for collapse to fade out
-    jest.runTimersToTime(400);
     jest.clearAllTimers();
   });
 
   it('should render children', () => {
-    wrapper = mount(
-      <Collapse>
-        <p>hello</p>
-      </Collapse>,
-    );
-    expect(wrapper.find('p').text()).toBe('hello');
+    render(<Collapse>Hello</Collapse>);
+    expect(screen.getByText(/hello/i)).toBeInTheDocument();
   });
 
   it('works with strict mode', () => {
     const spy = jest.spyOn(console, 'error');
-    wrapper = mount(
+    render(
       <React.StrictMode>
         <Collapse />
       </React.StrictMode>,
     );
-    expect(wrapper.instance()).toBeTruthy();
     expect(spy).not.toHaveBeenCalled();
   });
 
-  it('should have default isOpen value', () => {
-    wrapper = shallow(<Collapse />);
-    expect(wrapper.instance().props.isOpen).toEqual(false);
+  it('should have default isOpen value as false', () => {
+    render(<Collapse>Hello</Collapse>);
+    expect(screen.getByText(/hello/i)).not.toHaveClass('show');
   });
 
   it('should render with class "collapse"', () => {
-    wrapper = mount(<Collapse />);
-    expect(wrapper.find('div').hasClass('collapse')).toEqual(true);
+    render(<Collapse>Hello</Collapse>);
+    expect(screen.getByText(/hello/i)).toHaveClass('collapse');
   });
 
   it('should render with class "collapse-horizontal" if it has prop horizontal', () => {
-    wrapper = mount(<Collapse horizontal />);
-    expect(wrapper.find('div').hasClass('collapse-horizontal')).toEqual(true);
+    render(<Collapse horizontal>Hello</Collapse>);
+    expect(screen.getByText(/hello/i)).toHaveClass('collapse-horizontal');
   });
 
   it('should render with class "navbar-collapse" if it has prop navbar', () => {
-    wrapper = mount(<Collapse navbar />);
-    expect(wrapper.find('div').hasClass('navbar-collapse')).toEqual(true);
+    render(<Collapse navbar>Hello</Collapse>);
+    expect(screen.getByText(/hello/i)).toHaveClass('navbar-collapse');
   });
 
   it('should render with class "show" when isOpen is true', () => {
-    wrapper = mount(<Collapse isOpen />);
-    expect(wrapper.find('div').hasClass('show')).toEqual(true);
+    render(<Collapse isOpen>Hello</Collapse>);
+    expect(screen.getByText(/hello/i)).toHaveClass('show');
   });
 
   it('should set height to null when isOpen is true', () => {
-    wrapper = shallow(<Collapse isOpen />);
-    expect(wrapper.state('dimension')).toBe(null);
+    render(<Collapse isOpen data-testid="collapse" />);
+    expect(screen.getByTestId('collapse').style.height).toBe('');
   });
 
   it('should not set height when isOpen is false', () => {
-    wrapper = shallow(<Collapse isOpen={false} />);
-    expect(wrapper.state('dimension')).toBe(null);
+    render(<Collapse isOpen={false} data-testid="collapse" />);
+    expect(screen.getByTestId('collapse').style.height).toBe('');
   });
 
   it('should forward all styles', () => {
-    wrapper = mount(<Collapse isOpen style={{ backgroundColor: 'black' }} />);
-    expect(wrapper.find('div').prop('style').backgroundColor).toBe('black');
+    render(
+      <Collapse
+        isOpen={false}
+        data-testid="collapse"
+        style={{ backgroundColor: 'black' }}
+      />,
+    );
+    expect(screen.getByTestId('collapse').style.backgroundColor).toBe('black');
   });
 
   it('should forward all callbacks', () => {
@@ -92,56 +82,43 @@ describe('Collapse', () => {
       onExiting: jest.fn(),
       onExited: jest.fn(),
     };
-    wrapper = mount(<Collapse isOpen={isOpen} {...callbacks} />);
-    toggle();
+    const { rerender } = render(<Collapse isOpen={false} {...callbacks} />);
+    rerender(<Collapse isOpen {...callbacks} />);
     expect(callbacks.onEnter).toHaveBeenCalled();
     expect(callbacks.onEntering).toHaveBeenCalled();
     expect(callbacks.onEntered).not.toHaveBeenCalled();
     jest.runTimersToTime(350);
     expect(callbacks.onEntered).toHaveBeenCalled();
     expect(callbacks.onExit).not.toHaveBeenCalled();
-
-    toggle();
+    rerender(<Collapse isOpen={false} {...callbacks} />);
     expect(callbacks.onExit).toHaveBeenCalled();
     expect(callbacks.onExiting).toHaveBeenCalled();
     expect(callbacks.onExited).not.toHaveBeenCalled();
     jest.runTimersToTime(350);
     expect(callbacks.onExiting).toHaveBeenCalled();
     expect(callbacks.onExited).toHaveBeenCalled();
-
-    wrapper.unmount();
   });
 
   it('should apply correct bootstrap classes', () => {
-    wrapper = mount(<Collapse isOpen={isOpen} />);
-    toggle();
-    expect(wrapper.update().find('div').prop('className')).toBe('collapsing');
-    jest.runTimersToTime(350);
-    expect(wrapper.update().find('div').prop('className')).toBe(
-      'collapse show',
+    const { rerender } = render(
+      <Collapse isOpen={false} data-testid="collapse" />,
     );
-
-    toggle();
-    expect(wrapper.update().find('div').prop('className')).toBe('collapsing');
+    rerender(<Collapse isOpen data-testid="collapse" />);
+    expect(screen.getByTestId('collapse')).toHaveClass('collapsing');
     jest.runTimersToTime(350);
-    expect(wrapper.update().find('div').prop('className')).toBe('collapse');
+    expect(screen.getByTestId('collapse')).toHaveClass('collapse show');
 
-    wrapper.unmount();
-  });
-
-  it('should set inline style to 0 when isOpen change to false', () => {
-    isOpen = true;
-    wrapper = mount(<Collapse isOpen={isOpen} />);
-    toggle();
-    expect(wrapper.state('dimension')).toBe(0);
-    wrapper.unmount();
+    rerender(<Collapse isOpen={false} data-testid="collapse" />);
+    expect(screen.getByTestId('collapse')).toHaveClass('collapsing');
+    jest.runTimersToTime(350);
+    expect(screen.getByTestId('collapse')).toHaveClass('collapse');
   });
 
-  it('should remove inline style when isOpen change to true after transition', () => {
-    wrapper = mount(<Collapse isOpen={isOpen} />);
-    toggle();
+  it('should set inline style to 0 when isOpen change to false and remove after transition', () => {
+    const { rerender } = render(<Collapse isOpen data-testid="collapse" />);
+    rerender(<Collapse isOpen={false} data-testid="collapse" />);
+    expect(screen.getByTestId('collapse').style.height).toBe('0px');
     jest.runTimersToTime(380);
-    expect(wrapper.state('dimension')).toBe(null);
-    wrapper.unmount();
+    expect(screen.getByTestId('collapse').style.height).toBe('');
   });
 });