Chore (Offcanvas) migrate to RTL

-migrate OffcanvasHeader
-migrate OffcanvasBody

src/__tests__/OffcanvasBody.spec.js

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

src/__tests__/OffcanvasHeader.spec.js

@@ -1,50 +1,35 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { OffcanvasHeader } from '..';
+import { testForCustomClass, testForDefaultClass } from '../testUtils';
 
 describe('OffcanvasHeader', () => {
   it('should render with "offcanvas-header" class', () => {
-    const wrapper = shallow(<OffcanvasHeader>Yo!</OffcanvasHeader>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('offcanvas-header')).toBe(true);
+    testForDefaultClass(OffcanvasHeader, 'offcanvas-header');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(
-      <OffcanvasHeader className="other">Yo!</OffcanvasHeader>,
-    );
-
-    expect(wrapper.hasClass('other')).toBe(true);
-    expect(wrapper.hasClass('offcanvas-header')).toBe(true);
+    testForCustomClass(OffcanvasHeader);
   });
 
   it('should render close button', () => {
-    const wrapper = shallow(
-      <OffcanvasHeader toggle={() => {}} className="other">
+    render(
+      <OffcanvasHeader toggle={() => {}} data-testid="test" className="other">
         Yo!
       </OffcanvasHeader>,
     );
-
-    expect(wrapper.hasClass('other')).toBe(true);
-    expect(wrapper.hasClass('offcanvas-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(
-      <OffcanvasHeader tag="p">Yo!</OffcanvasHeader>,
-    ).childAt(0);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.type()).toBe('p');
+    render(<OffcanvasHeader tag="h1">Yo!</OffcanvasHeader>);
+    expect(screen.getByText(/yo!/i).tagName.toLowerCase()).toMatch('h1');
   });
 
   it('should render custom wrapping tag', () => {
-    const wrapper = shallow(
-      <OffcanvasHeader wrapTag="main">Yo!</OffcanvasHeader>,
-    );
-
-    expect(wrapper.type()).toBe('main');
+    render(<OffcanvasHeader wrapTag="main">Yo!</OffcanvasHeader>);
+    expect(screen.getByText(/yo/i).parentElement.tagName).toMatch(/main/i);
   });
 });