chore: migrate to rtl (#2709)

- migrate ModalHeader
- migrate ModalFooter
- migrate ModalBody

Co-authored-by: illiteratewriter <manukoshyabraham@gmail.com>

src/__tests__/ModalBody.spec.js

@@ -1,27 +1,20 @@
-import React from 'react';
-import { shallow } from 'enzyme';
 import { ModalBody } from '..';
+import {
+  testForCustomClass,
+  testForCustomTag,
+  testForDefaultClass,
+} from '../testUtils';
 
 describe('ModalBody', () => {
   it('should render with "modal-body" class', () => {
-    const wrapper = shallow(<ModalBody>Yo!</ModalBody>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('modal-body')).toBe(true);
+    testForDefaultClass(ModalBody, 'modal-body');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(<ModalBody className="other">Yo!</ModalBody>);
-
-    expect(wrapper.hasClass('other')).toBe(true);
-    expect(wrapper.hasClass('modal-body')).toBe(true);
+    testForCustomClass(ModalBody, {});
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<ModalBody tag="main">Yo!</ModalBody>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('modal-body')).toBe(true);
-    expect(wrapper.type()).toBe('main');
+    testForCustomTag(ModalBody);
   });
 });

src/__tests__/ModalFooter.spec.js

@@ -1,27 +1,20 @@
-import React from 'react';
-import { shallow } from 'enzyme';
 import { ModalFooter } from '..';
+import {
+  testForCustomClass,
+  testForCustomTag,
+  testForDefaultClass,
+} from '../testUtils';
 
 describe('ModalFooter', () => {
   it('should render with "modal-footer" class', () => {
-    const wrapper = shallow(<ModalFooter>Yo!</ModalFooter>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('modal-footer')).toBe(true);
+    testForDefaultClass(ModalFooter, 'modal-footer');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(<ModalFooter className="other">Yo!</ModalFooter>);
-
-    expect(wrapper.hasClass('modal-footer')).toBe(true);
-    expect(wrapper.hasClass('other')).toBe(true);
+    testForCustomClass(ModalFooter);
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<ModalFooter tag="main">Yo!</ModalFooter>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('modal-footer')).toBe(true);
-    expect(wrapper.type()).toBe('main');
+    testForCustomTag(ModalFooter);
   });
 });

src/__tests__/ModalHeader.spec.js

@@ -1,44 +1,36 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { ModalHeader } from '..';
+import { testForCustomClass, testForDefaultClass } from '../testUtils';
 
 describe('ModalHeader', () => {
   it('should render with "modal-header" class', () => {
-    const wrapper = shallow(<ModalHeader>Yo!</ModalHeader>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('modal-header')).toBe(true);
+    testForDefaultClass(ModalHeader, 'modal-header');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(<ModalHeader className="other">Yo!</ModalHeader>);
-
-    expect(wrapper.hasClass('other')).toBe(true);
-    expect(wrapper.hasClass('modal-header')).toBe(true);
+    testForCustomClass(ModalHeader);
   });
 
   it('should render close button', () => {
-    const wrapper = shallow(
-      <ModalHeader toggle={() => {}} className="other">
+    render(
+      <ModalHeader toggle={() => {}} data-testid="test" className="other">
         Yo!
       </ModalHeader>,
     );
-
-    expect(wrapper.hasClass('other')).toBe(true);
-    expect(wrapper.hasClass('modal-header')).toBe(true);
-    expect(wrapper.find('button.btn-close').length).toBe(1);
+    const node = screen.getByTestId('test').querySelector('button');
+    expect(node.tagName.toLowerCase()).toBe('button');
+    expect(node).toHaveClass('btn-close');
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<ModalHeader tag="p">Yo!</ModalHeader>).childAt(0);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.type()).toBe('p');
+    render(<ModalHeader tag="main">hello</ModalHeader>);
+    expect(screen.getByText(/hello/i).tagName.toLowerCase()).toBe('main');
   });
 
   it('should render custom wrapping tag', () => {
-    const wrapper = shallow(<ModalHeader wrapTag="main">Yo!</ModalHeader>);
-
-    expect(wrapper.type()).toBe('main');
+    render(<ModalHeader data-testid="test" wrapTag="main" />);
+    expect(screen.getByTestId('test').tagName.toLowerCase()).toMatch('main');
   });
 });