Merge pull request reactstrap#2661 from illiteratewriter/migrate-to-r…

…tl-6 Migrate to rtl 6
illiteratewriter · Feb 3, 2023 · 806639c · 806639c
2 parents c15a12d + 5cab68b
commit 806639c
Show file tree

Hide file tree

Showing 8 changed files with 652 additions and 955 deletions.
diff --git a/__mocks__/.eslintrc b/__mocks__/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}
diff --git a/__mocks__/react-popper.js b/__mocks__/react-popper.js
@@ -3,9 +3,13 @@ export function Manager({ children }) {
   return (children);
 }
 
-export function Popper({ children, placement }) {
-  return children({ ref: () => {}, placement, style: {}, arrowProps: { ref: () => {}, style: {} } });
-}
+export const Popper = jest.fn(({ children, placement }) => {
+  return children({ 
+    ref: () => {}, 
+    placement, 
+    style: {}, 
+    arrowProps: { ref: () => {}, style: {} } });
+})
 
 export function Reference({ children }) {
   return children({ ref: () => {} });

diff --git a/src/__tests__/DropdownItem.spec.js b/src/__tests__/DropdownItem.spec.js
@@ -1,62 +1,35 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import user from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { DropdownItem } from '..';
-import { DropdownContext } from '../DropdownContext';
+import {
+  testForChildrenInComponent,
+  testForDefaultTag,
+  customDropdownRender,
+} from '../testUtils';
 
 describe('DropdownItem', () => {
-  let isOpen;
-  let toggle;
-
-  beforeEach(() => {
-    isOpen = false;
-    toggle = () => {
-      isOpen = !isOpen;
-    };
-  });
-
   it('should render a single child', () => {
-    const wrapper = mount(<DropdownItem>Ello world</DropdownItem>);
-
-    expect(wrapper.text()).toBe('Ello world');
-    expect(wrapper.find('button').hostNodes().hasClass('dropdown-item')).toBe(
-      true,
-    );
-    expect(wrapper.find('button').hostNodes().length).toBe(1);
+    testForChildrenInComponent(DropdownItem);
   });
 
-  it('should render type as "button" by default when tag is "button"', () => {
-    const wrapper = mount(<DropdownItem>Home</DropdownItem>);
-
-    expect(wrapper.find('button').hostNodes().prop('type')).toBe('button');
-    expect(wrapper.text()).toBe('Home');
+  it('should render type as "button" by default', () => {
+    testForDefaultTag(DropdownItem, 'button');
   });
 
-  it('should render type as undefined by default when tag is "button" and toggle is false', () => {
-    const wrapper = mount(<DropdownItem toggle={false}>Home</DropdownItem>);
-
-    expect(wrapper.find('button').hostNodes().prop('type')).toBe(undefined);
-    expect(wrapper.text()).toBe('Home');
-  });
-
-  it('should render type as "button" by default when tag is "button" and onClick is provided', () => {
-    const wrapper = mount(<DropdownItem onClick={() => {}}>Home</DropdownItem>);
-
-    expect(wrapper.find('button').hostNodes().prop('type')).toBe('button');
-    expect(wrapper.text()).toBe('Home');
+  it('should not render type when tag is "button" and toggle is false', () => {
+    render(<DropdownItem toggle={false}>Home</DropdownItem>);
+    expect(screen.getByText('Home')).not.toHaveAttribute('type');
   });
 
   it('should render type as user defined when defined by the user', () => {
-    const wrapper = mount(<DropdownItem type="submit">Home</DropdownItem>);
-
-    expect(wrapper.find('button').hostNodes().prop('type')).toBe('submit');
-    expect(wrapper.text()).toBe('Home');
+    render(<DropdownItem type="submit">Home</DropdownItem>);
+    expect(screen.getByText('Home')).toHaveAttribute('type', 'submit');
   });
 
   it('should not render type by default when the type is not defined and the tag is not "button"', () => {
-    const wrapper = mount(<DropdownItem tag="a">Home</DropdownItem>);
-
-    expect(wrapper.find('a').hostNodes().prop('type')).toBe(undefined);
-    expect(wrapper.text()).toBe('Home');
+    render(<DropdownItem tag="a">Home</DropdownItem>);
+    expect(screen.getByText('Home')).not.toHaveAttribute('type');
   });
 
   it('should render custom element', () => {
@@ -67,128 +40,102 @@ describe('DropdownItem', () => {
         </a>
       );
     }
-    const wrapper = mount(<DropdownItem tag={Link}>Home</DropdownItem>);
-
-    expect(wrapper.find('a').hostNodes().length).toBe(1);
-    expect(wrapper.find('a').hostNodes().hasClass('dropdown-item')).toBe(true);
-    expect(wrapper.text()).toBe('Home');
+    render(<DropdownItem tag={Link}>Home</DropdownItem>);
+    expect(screen.getByText('Home')).toHaveAttribute('href', '/home');
+    expect(screen.getByText('Home').tagName.toLowerCase()).toMatch('a');
   });
 
   it('should render dropdown item text', () => {
-    const wrapper = mount(<DropdownItem text>text</DropdownItem>);
-
-    expect(wrapper.find('span').hostNodes().length).toBe(1);
-    expect(
-      wrapper.find('span').hostNodes().hasClass('dropdown-item-text'),
-    ).toBe(true);
-    expect(wrapper.text()).toBe('text');
+    render(<DropdownItem text>text</DropdownItem>);
+    expect(screen.getByText('text')).toHaveClass('dropdown-item-text');
+    expect(screen.getByText('text').tagName.toLowerCase()).toMatch('span');
   });
 
   describe('header', () => {
     it('should render h6 tag heading', () => {
-      const wrapper = mount(<DropdownItem header>Heading</DropdownItem>);
-
-      expect(wrapper.find('h6').hostNodes().length).toBe(1);
-      expect(wrapper.find('h6').hostNodes().hasClass('dropdown-header')).toBe(
-        true,
-      );
-      expect(wrapper.text()).toBe('Heading');
+      render(<DropdownItem header>Heading</DropdownItem>);
+      expect(screen.getByText('Heading')).toHaveClass('dropdown-header');
+      expect(screen.getByText('Heading').tagName.toLowerCase()).toMatch('h6');
     });
   });
 
   describe('active', () => {
     it('should render an active class', () => {
-      const wrapper = mount(<DropdownItem active />);
-
-      expect(wrapper.find('.active').hostNodes().length).toBe(1);
+      render(<DropdownItem active data-testid="divider" />);
+      expect(screen.getByTestId('divider')).toHaveClass('active');
     });
   });
 
   describe('divider', () => {
     it('should render a divider element', () => {
-      const wrapper = mount(<DropdownItem divider />);
-
-      expect(wrapper.find('.dropdown-divider').hostNodes().length).toBe(1);
+      render(<DropdownItem divider data-testid="divider" />);
+      expect(screen.getByTestId('divider')).toHaveClass('dropdown-divider');
     });
   });
 
   describe('link (with href)', () => {
     it('should render an anchor tag', () => {
-      const wrapper = mount(<DropdownItem href="#">GO!</DropdownItem>);
-
-      expect(wrapper.find('a').hostNodes().length).toBe(1);
-      expect(wrapper.find('a').hostNodes().hasClass('dropdown-item')).toBe(
-        true,
-      );
-      expect(wrapper.text()).toBe('GO!');
+      render(<DropdownItem href="#">GO!</DropdownItem>);
+      expect(screen.getByText('GO!')).toHaveClass('dropdown-item');
+      expect(screen.getByText('GO!').tagName.toLowerCase()).toMatch('a');
     });
   });
 
   describe('onClick', () => {
     it('should not be called when disabled', () => {
-      const e = { preventDefault: jest.fn() };
-      const wrapper = mount(<DropdownItem disabled>Item</DropdownItem>);
-      const instance = wrapper.instance();
-
-      instance.onClick(e);
-      expect(e.preventDefault).toHaveBeenCalled();
+      const onClick = jest.fn();
+      render(
+        <DropdownItem disabled onClick={onClick}>
+          Item
+        </DropdownItem>,
+      );
+      user.click(screen.getByText('Item'));
+      expect(onClick).not.toHaveBeenCalled();
     });
 
     it('should not be called when divider is set', () => {
-      const e = { preventDefault: jest.fn() };
-      const wrapper = mount(<DropdownItem divider />);
-      const instance = wrapper.instance();
-
-      instance.onClick(e);
-      expect(e.preventDefault).toHaveBeenCalled();
+      const onClick = jest.fn();
+      render(
+        <DropdownItem divider onClick={onClick}>
+          Item
+        </DropdownItem>,
+      );
+      user.click(screen.getByText('Item'));
+      expect(onClick).not.toHaveBeenCalled();
     });
 
     it('should not be called when header item', () => {
-      const e = { preventDefault: jest.fn() };
-      const wrapper = mount(<DropdownItem header>Header</DropdownItem>);
-      const instance = wrapper.instance();
-
-      instance.onClick(e);
-      expect(e.preventDefault).toHaveBeenCalled();
-    });
-
-    it('should be called when not disabled, heading, or divider', () => {
-      const e = { preventDefault: jest.fn() };
       const onClick = jest.fn();
-      const wrapper = mount(
-        <DropdownContext.Provider value={{ toggle: toggle }}>
-          <DropdownItem onClick={() => onClick()}>Click me</DropdownItem>
-        </DropdownContext.Provider>,
+      render(
+        <DropdownItem header onClick={onClick}>
+          Item
+        </DropdownItem>,
       );
-      const instance = wrapper.instance();
-
-      instance.onClick(e);
-      expect(onClick).toHaveBeenCalled();
+      user.click(screen.getByText('Item'));
+      expect(onClick).not.toHaveBeenCalled();
     });
 
-    it('should call onClick prop', () => {
-      toggle = jest.fn();
-      const clickHandler = jest.fn();
-      const wrapper = mount(
-        <DropdownContext.Provider value={{ toggle: toggle }}>
-          <DropdownItem onClick={clickHandler}>Click me</DropdownItem>
-        </DropdownContext.Provider>,
+    it('should be called when not disabled, heading, or divider', () => {
+      const onClick = jest.fn();
+      customDropdownRender(
+        <DropdownItem onClick={onClick}>Item</DropdownItem>,
+        {
+          toggle: () => {},
+        },
       );
-
-      wrapper.simulate('click');
-      expect(clickHandler).toHaveBeenCalled();
-      expect(toggle).toHaveBeenCalled();
+      user.click(screen.getByText(/item/i));
+      expect(onClick).toBeCalled();
     });
 
     it('should call toggle', () => {
-      toggle = jest.fn();
-      const wrapper = mount(
-        <DropdownContext.Provider value={{ toggle: toggle }}>
-          <DropdownItem>Click me</DropdownItem>
-        </DropdownContext.Provider>,
+      const toggle = jest.fn();
+      customDropdownRender(
+        <DropdownItem onClick={() => {}}>Item</DropdownItem>,
+        {
+          toggle,
+        },
       );
-
-      wrapper.simulate('click');
+      user.click(screen.getByText(/item/i));
       expect(toggle).toHaveBeenCalled();
     });
   });