Merge pull request reactstrap#2696 from theinfiltrator7/migrate-navba…

…r-to-rtl

Chore (Navbar): migrate to RTL

src/__tests__/Navbar.spec.js

@@ -1,117 +1,109 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Navbar } from '..';
+import { testForCustomTag } from '../testUtils';
 
 describe('Navbar', () => {
   it('should render .navbar markup', () => {
-    const wrapper = shallow(<Navbar />);
-
-    expect(wrapper.html()).toBe(
-      '<nav class="navbar"><div class="container-fluid"></div></nav>',
+    let { container } = render(<Navbar />);
+    expect(container).toContainHTML(
+      '<nav class="navbar" ><div class="container-fluid" /></nav>',
     );
   });
 
   it('should render default .navbar-expand class', () => {
-    const wrapper = shallow(<Navbar expand />);
-
-    expect(wrapper.html()).toBe(
-      '<nav class="navbar navbar-expand"><div class="container-fluid"></div></nav>',
-    );
+    render(<Navbar data-testid="navBar" expand />);
+    expect(screen.getByTestId('navBar')).toHaveClass('navbar-expand');
   });
 
   it('should render size based .navbar-expand-* classes', () => {
-    const wrapper = shallow(<Navbar expand="md" />);
-
-    expect(wrapper.html()).toBe(
-      '<nav class="navbar navbar-expand-md"><div class="container-fluid"></div></nav>',
-    );
+    render(<Navbar data-testid="navBar" expand="md" />);
+    expect(screen.getByTestId('navBar')).toHaveClass('navbar-expand-md');
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<Navbar tag="div" />);
-
-    expect(wrapper.html()).toBe(
-      '<div class="navbar"><div class="container-fluid"></div></div>',
-    );
+    testForCustomTag(Navbar, {}, 'div');
   });
 
   it('should render role', () => {
-    const wrapper = shallow(<Navbar role="navigation" />);
-
-    expect(wrapper.html()).toBe(
+    let { container } = render(<Navbar role="navigation" />);
+    expect(container).toContainHTML(
       '<nav role="navigation" class="navbar"><div class="container-fluid"></div></nav>',
     );
   });
 
   it('should support container options', () => {
-    let wrapper = shallow(<Navbar container={false} />);
-    expect(wrapper.html()).toBe('<nav class="navbar"></nav>');
+    const { rerender, container } = render(<Navbar container={false} />);
+
+    expect(container).toContainHTML('<nav class="navbar"></nav>');
 
-    wrapper = shallow(<Navbar container />);
-    expect(wrapper.html()).toBe(
+    rerender(<Navbar container />);
+    expect(container).toContainHTML(
       '<nav class="navbar"><div class="container"></div></nav>',
     );
 
-    wrapper = shallow(<Navbar container="xs" />);
-    expect(wrapper.html()).toBe(
+    rerender(<Navbar container="xs" />);
+    expect(container).toContainHTML(
       '<nav class="navbar"><div class="container-xs"></div></nav>',
     );
 
-    wrapper = shallow(<Navbar container="sm" />);
-    expect(wrapper.html()).toBe(
+    rerender(<Navbar container="sm" />);
+    expect(container).toContainHTML(
       '<nav class="navbar"><div class="container-sm"></div></nav>',
     );
 
-    wrapper = shallow(<Navbar container="md" />);
-    expect(wrapper.html()).toBe(
+    rerender(<Navbar container="md" />);
+    expect(container).toContainHTML(
       '<nav class="navbar"><div class="container-md"></div></nav>',
     );
 
-    wrapper = shallow(<Navbar container="lg" />);
-    expect(wrapper.html()).toBe(
+    rerender(
+      <div data-testid="navBarLg">
+        <Navbar container="lg" />
+      </div>,
+    );
+    expect(container).toContainHTML(
       '<nav class="navbar"><div class="container-lg"></div></nav>',
     );
 
-    wrapper = shallow(<Navbar container="xl" />);
-    expect(wrapper.html()).toBe(
+    rerender(<Navbar container="xl" />);
+    expect(container).toContainHTML(
       '<nav class="navbar"><div class="container-xl"></div></nav>',
     );
   });
 
   it('should render children', () => {
-    const wrapper = shallow(<Navbar>Children</Navbar>);
-
-    expect(wrapper.html()).toBe(
+    let { container } = render(<Navbar>Children</Navbar>);
+    expect(container).toContainHTML(
       '<nav class="navbar"><div class="container-fluid">Children</div></nav>',
     );
   });
 
   it('should pass additional classNames', () => {
-    const wrapper = shallow(<Navbar className="extra" />);
-
-    expect(wrapper.hasClass('extra')).toBe(true);
-    expect(wrapper.hasClass('navbar')).toBe(true);
+    render(<Navbar data-testid="navBar" className="extra" />);
+    expect(screen.getByTestId('navBar')).toHaveClass('extra navbar');
   });
 
   it('should render prop based classes', () => {
-    const wrapper = shallow(
+    render(
       <Navbar
+        data-testid="navBar"
         light
         dark
         expand="sm"
         color="success"
-        full
         sticky="top"
         fixed="top"
       />,
     );
-
-    expect(wrapper.hasClass('bg-success')).toBe(true);
-    expect(wrapper.hasClass('navbar')).toBe(true);
-    expect(wrapper.hasClass('navbar-expand-sm')).toBe(true);
-    expect(wrapper.hasClass('navbar-light')).toBe(true);
-    expect(wrapper.hasClass('navbar-dark')).toBe(true);
-    expect(wrapper.hasClass('fixed-top')).toBe(true);
-    expect(wrapper.hasClass('sticky-top')).toBe(true);
+    const node = screen.getByTestId('navBar');
+    expect(node).toHaveClass('bg-success');
+    expect(node).toHaveClass('navbar');
+    expect(node).toHaveClass('navbar-expand-sm');
+    expect(node).toHaveClass('navbar-light');
+    expect(node).toHaveClass('navbar-dark');
+    expect(node).toHaveClass('fixed-top');
+    expect(node).toHaveClass('sticky-top');
   });
 });