Finish migration to RTS

jest.config.js

@@ -23,7 +23,7 @@ module.exports = {
  // collectCoverageFrom: undefined,
 
  // The directory where Jest should output its coverage files
- coverageDirectory: "coverage",
+ coverageDirectory: 'coverage',
 
  // An array of regexp pattern strings used to skip coverage collection
  // coveragePathIgnorePatterns: [
@@ -132,7 +132,7 @@ module.exports = {
  // runner: "jest-runner",
 
  // The paths to modules that run some code to configure or set up the testing environment before each test
- setupFiles: ['./src/setupTests.js'],
+ setupFiles: [],
 
  // A list of paths to modules that run some code to configure or set up the testing framework before each test
  // setupFilesAfterEnv: [],
@@ -144,7 +144,7 @@ module.exports = {
  // snapshotSerializers: [],
 
  // The test environment that will be used for testing
- testEnvironment: "jsdom",
+ testEnvironment: 'jsdom',
 
  // Options that will be passed to the testEnvironment
  // testEnvironmentOptions: {},

package.json

@@ -19,7 +19,7 @@
  "clean": "rm -rf esm lib",
  "prepublishOnly": "npm run build",
  "create-release": "npm run cover && sh ./scripts/release",
- "lint": "eslint src stories",
+ "lint": "eslint src stories --fix",
  "dtslint": "dtslint types --expectOnly",
  "prettier": "prettier --write src stories",
  "version": "node_modules/.bin/conventional-changelog -i CHANGELOG.md -o CHANGELOG.md -p angular && git add -A CHANGELOG.md"
@@ -301,8 +301,6 @@
  "customize-cra": "^0.9.1",
  "dtslint": "^4.0.4",
  "ejs": "^2.5.9",
- "enzyme": "^3.11.0",
- "enzyme-adapter-react-16": "^1.15.6",
  "eslint": "^8.17.0",
  "eslint-config-airbnb": "^19.0.4",
  "eslint-config-prettier": "^8.5.0",

src/Dropdown.js

@@ -98,7 +98,7 @@ class Dropdown extends React.Component {
  const menu = this.getMenu();
  const toggle = this.getToggle();
 
- // Add a conditional check to avoid using toggle 
+ // Add a conditional check to avoid using toggle
  // if there is no toggle component in the dropdown
  if (!toggle) {
  return;
@@ -127,7 +127,6 @@ class Dropdown extends React.Component {
  this.toggle(e);
  }
 
-
  handleKeyDown(e) {
  const isTargetMenuItem =
  e.target.getAttribute('role') === 'menuitem' ||

src/DropdownMenu.js

@@ -102,7 +102,11 @@ class DropdownMenu extends React.Component {
  strategy={strategy}
  >
  {({ ref, style, placement, update }) => {
- let combinedStyle = { ...this.props.style, ...persistStyles, ...style };
+ let combinedStyle = {
+ ...this.props.style,
+ ...persistStyles,
+ ...style,
+ };
 
  const handleRef = (tagRef) => {
  // Send the ref to `react-popper`

src/DropdownToggle.js

@@ -118,25 +118,15 @@ class DropdownToggle extends React.Component {
  children={children}
  />
  );
- }
+ };
 
  // No Reference component if the component is in Navbar
  if (this.context.inNavbar) {
- return (
- <>
- {returnFunction({ ref: this.context.onToggleRef })}
- </>
- );
+ return <>{returnFunction({ ref: this.context.onToggleRef })}</>;
  }
 
  // Normal rendering if component not in NavBar
- return (
-
- <Reference innerRef={innerRef} >
- {returnFunction}
- </Reference>
- );
-
+ return <Reference innerRef={innerRef}>{returnFunction}</Reference>;
  }
 }
 

src/PlaceholderButton.js

@@ -17,7 +17,7 @@ const propTypes = {
 function PlaceholderButton(props) {
  let { cssModule, className, tag: Tag = Button, ...attributes } = props;
 
- let { attributes: modifiedAttributes, colClasses } = getColumnClasses(
+ let { modifiedAttributes, colClasses } = getColumnClasses(
  { color: 'primary', ...attributes },
  cssModule,
  );

src/__tests__/Modal.spec.js

@@ -517,7 +517,7 @@ describe('Modal', () => {
 
  it('should not call toggle when escape key pressed and backdrop is "static" and keyboard=false', () => {
  const toggle = jest.fn();
- const { debug } = render(
+ render(
  <Modal isOpen toggle={toggle} backdrop="static" keyboard={false}>
  Yo!
  </Modal>,
@@ -600,7 +600,7 @@ describe('Modal', () => {
  });
 
  it('should destroy this._element', () => {
- const { rerender, debug } = render(
+ const { rerender } = render(
  <Modal isOpen toggle={toggle} wrapClassName="weird-class">
  <button id="clicker">Does Nothing</button>
  </Modal>,
@@ -620,7 +620,7 @@ describe('Modal', () => {
  });
 
  it('should destroy this._element when unmountOnClose prop set to true', () => {
- const { rerender, debug } = render(
+ const { rerender } = render(
  <Modal isOpen toggle={toggle} unmountOnClose wrapClassName="weird-class">
  <button id="clicker">Does Nothing</button>
  </Modal>,
@@ -776,7 +776,7 @@ describe('Modal', () => {
  });
 
  it('should update element z index when prop changes', () => {
- const { debug, rerender } = render(
+ const { rerender } = render(
  <Modal isOpen zIndex={0} wrapClassName="sandman">
  Yo!
  </Modal>,

src/__tests__/NavBrand.spec.js

@@ -1,30 +1,27 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { NavbarBrand } from '..';
+import {
+ testForChildrenInComponent,
+ testForCustomClass,
+ testForDefaultClass,
+ testForDefaultTag,
+} from '../testUtils';
 
 describe('NavbarBrand', () => {
  it('should render .navbar-brand markup', () => {
- const wrapper = shallow(<NavbarBrand />);
-
- expect(wrapper.html()).toBe('<a class="navbar-brand"></a>');
+ testForDefaultClass(NavbarBrand, 'navbar-brand');
  });
 
  it('should render custom tag', () => {
- const wrapper = shallow(<NavbarBrand tag="div" />);
-
- expect(wrapper.html()).toBe('<div class="navbar-brand"></div>');
+ testForDefaultTag(NavbarBrand, 'a');
  });
 
  it('sholid render children', () => {
- const wrapper = shallow(<NavbarBrand>Children</NavbarBrand>);
-
- expect(wrapper.html()).toBe('<a class="navbar-brand">Children</a>');
+ testForChildrenInComponent(NavbarBrand);
  });
 
  it('should pass additional classNames', () => {
- const wrapper = shallow(<NavbarBrand className="extra" />);
-
- expect(wrapper.hasClass('extra')).toBe(true);
- expect(wrapper.hasClass('navbar-brand')).toBe(true);
+ testForCustomClass(NavbarBrand);
  });
 });

src/__tests__/NavLink.spec.js

@@ -1,78 +1,76 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
 import { NavLink } from '..';
+import {
+ testForChildrenInComponent,
+ testForCustomClass,
+ testForCustomTag,
+ testForDefaultClass,
+} from '../testUtils';
 
 describe('NavLink', () => {
  it('should render .nav-link markup', () => {
- const wrapper = shallow(<NavLink />);
-
- expect(wrapper.html()).toBe('<a class="nav-link"></a>');
+ testForDefaultClass(NavLink, 'nav-link');
  });
 
  it('should render custom tag', () => {
- const wrapper = shallow(<NavLink tag="div" />);
-
- expect(wrapper.html()).toBe('<div class="nav-link"></div>');
+ testForCustomTag(NavLink);
  });
 
  it('should render children', () => {
- const wrapper = shallow(<NavLink>Children</NavLink>);
-
- expect(wrapper.html()).toBe('<a class="nav-link">Children</a>');
+ testForChildrenInComponent(NavLink);
  });
 
  it('should pass additional classNames', () => {
- const wrapper = shallow(<NavLink className="extra" />);
-
- expect(wrapper.hasClass('extra')).toBe(true);
- expect(wrapper.hasClass('nav-link')).toBe(true);
+ testForCustomClass(NavLink);
  });
 
  it('should render active class', () => {
- const wrapper = shallow(<NavLink active />);
-
- expect(wrapper.hasClass('active')).toBe(true);
+ render(<NavLink active>Yo!</NavLink>);
+ expect(screen.getByText('Yo!')).toHaveClass('active');
  });
 
  it('should render disabled markup', () => {
- const wrapper = shallow(<NavLink disabled />);
-
- expect(wrapper.hasClass('disabled')).toBe(true);
+ render(<NavLink disabled>Yo!</NavLink>);
+ expect(screen.getByText('Yo!')).toHaveAttribute('disabled');
  });
 
  it('handles onClick prop', () => {
  const onClick = jest.fn();
- const e = createSpyObj('e', ['preventDefault']);
- const wrapper = shallow(<NavLink onClick={onClick} />);
+ render(<NavLink onClick={onClick}>testing click</NavLink>);
 
- wrapper.find('a').simulate('click', e);
+ user.click(screen.getByText(/testing click/i));
  expect(onClick).toHaveBeenCalled();
- expect(e.preventDefault).not.toHaveBeenCalled();
  });
 
  it('handles onClick events', () => {
- const e = createSpyObj('e', ['preventDefault']);
- const wrapper = shallow(<NavLink />);
+ render(<NavLink>hello</NavLink>);
+ const node = screen.getByText(/hello/i);
+ const click = createEvent.click(node);
+ fireEvent(node, click);
 
- wrapper.find('a').simulate('click', e);
- expect(e.preventDefault).not.toHaveBeenCalled();
+ expect(click.defaultPrevented).toBeFalsy();
  });
 
  it('prevents link clicks via onClick for dropdown nav-items', () => {
- const e = createSpyObj('e', ['preventDefault']);
- const wrapper = shallow(<NavLink href="#" />);
+ render(<NavLink href="#">hello</NavLink>);
+ const node = screen.getByText(/hello/i);
+ const click = createEvent.click(node);
+ fireEvent(node, click);
 
- wrapper.find('a').simulate('click', e);
- expect(e.preventDefault).toHaveBeenCalled();
+ expect(click.defaultPrevented).toBeTruthy();
  });
 
  it('is not called when disabled', () => {
  const onClick = jest.fn();
- const e = createSpyObj('e', ['preventDefault']);
- const wrapper = shallow(<NavLink disabled onClick={onClick} />);
+ render(
+ <NavLink onClick={onClick} disabled>
+ testing click
+ </NavLink>,
+ );
 
- wrapper.find('a').simulate('click', e);
- expect(e.preventDefault).toHaveBeenCalled();
+ user.click(screen.getByText(/testing click/i));
  expect(onClick).not.toHaveBeenCalled();
  });
 });

src/__tests__/Pagination.spec.js

@@ -1,43 +1,47 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
 import { Pagination } from '..';
+import { testForChildrenInComponent } from '../testUtils';
 
 describe('Pagination', () => {
  it('should render "nav" tag by default', () => {
- const wrapper = mount(<Pagination />);
-
- expect(wrapper.find('nav').hostNodes().length).toBe(1);
+ render(<Pagination data-testid="test" />);
+ const node = screen.getByLabelText('pagination');
+ expect(node.tagName.toLowerCase()).toMatch('nav');
  });
 
  it('should render default list tag', () => {
- const wrapper = mount(<Pagination />);
-
- expect(wrapper.children().find('ul').hostNodes().length).toBe(1);
+ render(<Pagination />);
+ expect(
+ screen.getByLabelText('pagination').querySelector('ul'),
+ ).toBeInTheDocument();
  });
 
  it('should render custom tag', () => {
- const wrapper = mount(<Pagination tag="main" />);
-
- expect(wrapper.find('main').hostNodes().length).toBe(1);
+ render(<Pagination tag="main" />);
+ expect(screen.getByLabelText('pagination').tagName.toLowerCase()).toBe(
+ 'main',
+ );
  });
 
  it('should render with "pagination" class', () => {
- const wrapper = shallow(<Pagination />);
-
- expect(wrapper.children().hasClass('pagination')).toBe(true);
+ render(<Pagination data-testid="pagination" />);
+ expect(screen.getByTestId('pagination')).toHaveClass('pagination');
  });
 
  it('should render children', () => {
- const wrapper = shallow(<Pagination>Ello world</Pagination>);
-
- expect(wrapper.text()).toBe('Ello world');
+ testForChildrenInComponent(Pagination);
  });
 
- it('should render pagination at different sizes', () => {
- const small = shallow(<Pagination size="sm" />);
- const large = shallow(<Pagination size="lg" />);
+ describe('should render pagination at different sizes', () => {
+ it('should render with sm', () => {
+ render(<Pagination size="sm" data-testid="pagination" />);
+ expect(screen.getByTestId('pagination')).toHaveClass('pagination-sm');
+ });
 
- expect(small.children().hasClass('pagination-sm')).toBe(true);
- expect(large.children().hasClass('pagination-lg')).toBe(true);
+ it('should render lg', () => {
+ render(<Pagination size="lg" data-testid="pagination" />);
+ expect(screen.getByTestId('pagination')).toHaveClass('pagination-lg');
+ });
  });
 });