Migrate enzyme to testing library

.eslintrc.js

@@ -6,4 +6,7 @@ module.exports = {
     node: false,
     'shared-node-browser': true,
   },
+  globals: {
+    File: true,
+  },
 }

docs.md

@@ -1700,12 +1700,12 @@ Returns **[String][142]** String with namespace removed
 ### Parameters
 
 *   `fn` **[Function][143]** The function to trigger
-*   `keyCodes` **([Number][145] | [String][142] | [Array][146]<([Number][145] | [String][142])>)** Number, String, or Array of key codes
+*   `keys` **([String][142] | [Array][146]<[String][142]>)** String or Array of keys
 
 ### Examples
 
 ```javascript
-const triggerOnEnter = triggerOnKeys(() => console.log('Hi'), [13])
+const triggerOnEnter = triggerOnKeys(() => console.log('Hi'), ['Enter'])
 function MyExample () { return <Example onKeyPress={triggerOnEnter} /> }
 ```
 

jest.config.js

@@ -1,9 +1,5 @@
 module.exports = {
   testEnvironment: 'jsdom',
-  'setupFiles': [
-    './test/setup.js',
-  ],
-  "watchPathIgnorePatterns": [
-    "<rootDir>/node_modules",
-  ]
-}
+  setupFilesAfterEnv: ['./test/setup.js'],
+  watchPathIgnorePatterns: ['<rootDir>/node_modules'],
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "engines": {
     "node": "^18.12"
   },
@@ -70,14 +70,16 @@
     "@storybook/builder-webpack5": "^6.5.14",
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.4.22",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "babel-loader": "^9.1.0",
     "bourbon": "^7.2.0",
     "bourbon-neat": "^4.0.0",
     "core-js": "^3.21.1",
     "css-loader": "^6.7.2",
     "documentation": "^14.0.2",
-    "enzyme": "^3.2.0",
     "eslint": "^8.46.0",
     "husky": "^8.0.3",
     "jest": "^29.6.2",

src/controls/color-picker.js

@@ -80,7 +80,7 @@ function ColorPicker({
           }}
         />
         {isExpanded && (
-          <div className="popover">
+          <div className="popover" role="dialog">
             <ChromePicker
               color={value}
               onChange={({ hex }) => onChange(hex)}

src/controls/paginator/page-link.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { noop, triggerOnKeys } from '../../utils'
 import classnames from 'classnames'
 
-const ENTER_KEY_CODE = 13
+const ENTER_KEY = 'Enter'
 
 const propTypes = {
   className: PropTypes.string,
@@ -24,7 +24,7 @@ function PageLink({ className, active, onClick, children, ...rest }) {
       <a
         role="link"
         onClick={onClick}
-        onKeyDown={triggerOnKeys(onClick, ENTER_KEY_CODE)} // keyboard interaction requirement
+        onKeyDown={triggerOnKeys(onClick, ENTER_KEY)} // keyboard interaction requirement
         aria-current={active ? 'page' : false}
         tabIndex="0" // add back to natural tab order (automatically removed without an href)
         {...rest}

src/forms/inputs/icon-input.js

@@ -48,7 +48,7 @@ function IconInput(props) {
         className: classnames('icon-label', className),
       }}
     >
-      <i className={`${icon}-icon`} />
+      <i className={`${icon}-icon`} data-testid="icon" />
     </Input>
   )
 }

src/indicators/flash-message-container.js

@@ -47,7 +47,6 @@ function FlashMessageContainer({ messages, limit, onDismiss, ...rest }) {
         return (
           <FlashMessage
             key={message.id}
-            message={message}
             isError={message.isError}
             {...rest}
             {...message.props}

src/indicators/spinner.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { filterInvalidDOMProps } from '../utils'
 import classnames from 'classnames'
+import { filterInvalidDOMProps } from '../utils'
 
 /**
  *
@@ -38,6 +38,7 @@ const defaultProps = {
 function Spinner({ className, ...rest }) {
   return (
     <div
+      role="progressbar"
       className={classnames('spinner', className)}
       {...filterInvalidDOMProps(rest)}
     />

src/tables/helpers/get-column-data.js

@@ -1,7 +1,7 @@
 import { castArray, has } from '../../utils'
 
 // Get column info from children via props
-function getColumnData(children = [], doDisable) {
+function getColumnData(children, doDisable) {
   const childrenArray = castArray(children)
   return childrenArray
     .filter((child) => has(child, 'props'))

src/utils/local/trigger-on-keys.js

@@ -2,12 +2,12 @@
  * @name triggerOnKeys
  * @type Function
  * @param {Function} fn - The function to trigger
- * @param {Number|String|Array<Number|String>} keyCodes - Number, String, or Array of key codes
+ * @param {String|Array<String>} keys - String or Array of keys
  * @returns {Function} - Returns a function that takes an event and watches for keys
  *
  * @example
  *
- * const triggerOnEnter = triggerOnKeys(() => console.log('Hi'), [13])
+ * const triggerOnEnter = triggerOnKeys(() => console.log('Hi'), ['Enter'])
  * function MyExample () { return <Example onKeyPress={triggerOnEnter} /> }
  */
 
@@ -16,7 +16,7 @@ import { castArray, compact } from 'lodash'
 function triggerOnKeys(fn, keyCodes) {
   const codes = compact(castArray(keyCodes))
   return function (e) {
-    const key = e.which || e.keyCode
+    const key = e.key || e.code
     if (!codes.some((keyCode) => keyCode == key)) return
 
     return fn(e)

test/controls/color-picker.test.js

@@ -1,19 +1,24 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { ColorPicker } from '../../src/'
 
-test('ColorPicker toggles expanded when swatch is clicked', () => {
-  const wrapper = mount(<ColorPicker />)
-  expect(wrapper.find('.popover').exists()).toBe(false)
-  wrapper.find('.swatch').simulate('click')
-  expect(wrapper.find('.popover').exists()).toBe(true)
-  wrapper.find('.swatch').simulate('click')
-  expect(wrapper.find('.popover').exists()).toBe(false)
+test('ColorPicker toggles expanded when swatch is clicked', async () => {
+  const user = userEvent.setup()
+  render(<ColorPicker />)
+  const swatchControl = screen.getByRole('button')
+
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  await user.click(swatchControl)
+  expect(screen.queryByRole('dialog')).toBeInTheDocument()
+  await user.click(swatchControl)
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 })
 
 test('ColorPicker can be externally controlled', () => {
-  const wrapper = mount(<ColorPicker active={true} />)
-  expect(wrapper.find('.popover').exists()).toBe(true)
-  wrapper.setProps({ active: false })
-  expect(wrapper.find('.popover').exists()).toBe(false)
+  const { rerender } = render(<ColorPicker active={true} />)
+
+  expect(screen.queryByRole('dialog')).toBeInTheDocument()
+  rerender(<ColorPicker active={false} />)
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 })

test/controls/paginator/paginator.test.js

@@ -1,99 +1,107 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { Paginator } from '../../../src/'
 
-test('Previous button renders unless value is min', () => {
-  const wrapper = mount(<Paginator value={5} min={1} max={10} />)
-  expect(wrapper.find('.prev').exists()).toBe(true)
-  wrapper.setProps({ value: 1 })
-  expect(wrapper.find('.prev').exists()).toBe(false)
+test('Previous control renders unless value is min', () => {
+  const { rerender } = render(<Paginator value={5} min={1} max={10} />)
+  expect(screen.getByRole('link', { name: /previous page/i })).toBeInTheDocument()
+  rerender(<Paginator value={1} min={1} max={10} />)
+  expect(screen.queryByRole('link', { name: /previous page/i })).not.toBeInTheDocument()
 })
 
-test('Next button renders unless value is max', () => {
-  const wrapper = mount(<Paginator value={5} min={1} max={10} />)
-  expect(wrapper.find('.next').exists()).toBe(true)
-  wrapper.setProps({ value: 10 })
-  expect(wrapper.find('.next').exists()).toBe(false)
+test('Next control renders unless value is max', () => {
+  const { rerender } = render(<Paginator value={5} min={1} max={10} />)
+  expect(screen.getByRole('link', { name: /next page/i })).toBeInTheDocument()
+  rerender(<Paginator value={10} min={1} max={10} />)
+  expect(screen.queryByRole('link', { name: /next page/i })).not.toBeInTheDocument()
 })
 
-test('Button with current value is marked as active', () => {
-  const wrapper = mount(<Paginator value={5} min={1} max={10} />)
-  expect(wrapper.find('.active').text()).toBe('5')
+test('Control with current value is marked as active', () => {
+  render(<Paginator value={5} min={1} max={10} />)
+  expect(screen.getByText(5).parentElement).toHaveClass('active')
 })
 
-test('Button click sets value', () => {
+test('Control click sets value', async () => {
   const onChange = jest.fn()
-  const wrapper = mount(
+  const user = userEvent.setup()
+
+  render(
     <Paginator value={5} min={1} max={10} onChange={onChange} />
   )
-  wrapper.find('li > a').at(2).simulate('click')
+  await user.click(screen.getAllByRole('link').at(2))
   expect(onChange).toHaveBeenCalledWith(4)
 })
 
-test('Previous button decrements value', () => {
+test('Previous control decrements value', async () => {
   const onChange = jest.fn()
-  const wrapper = mount(
-    <Paginator value={5} min={1} max={10} onChange={onChange} />
+  const user = userEvent.setup()
+  const currentValue = 5
+  render(
+    <Paginator value={currentValue} min={1} max={10} onChange={onChange} />
   )
-  wrapper.find('li > a').first().simulate('click')
-  expect(onChange).toHaveBeenCalledWith(4)
+  await user.click(screen.getByRole('link', { name: /previous page/i }))
+  expect(onChange).toHaveBeenCalledWith(currentValue - 1)
 })
 
-test('Next button increments value', () => {
+test('Next control increments value', async () => {
   const onChange = jest.fn()
-  const wrapper = mount(
-    <Paginator value={5} min={1} max={10} onChange={onChange} />
+  const user = userEvent.setup()
+  const currentValue = 5
+  render(
+    <Paginator value={currentValue} min={1} max={10} onChange={onChange} />
   )
-  wrapper.find('li > a').last().simulate('click')
-  expect(onChange).toHaveBeenCalledWith(6)
+  await user.click(screen.getByRole('link', { name: /next page/i }))
+  expect(onChange).toHaveBeenCalledWith(currentValue + 1)
 })
 
-test('Min button sets value to min', () => {
+test('Min control sets value to min', async () => {
   const onChange = jest.fn()
-  const wrapper = mount(
+  const user = userEvent.setup()
+  render(
     <Paginator value={5} min={1} max={10} onChange={onChange} />
   )
-  wrapper.find('li > a').at(1).simulate('click')
+  await user.click(screen.getByRole('link', { name: /page 1$/ }))
   expect(onChange).toHaveBeenCalledWith(1)
 })
 
-test('Max button sets value to max', () => {
+test('Max control sets value to max', async () => {
   const onChange = jest.fn()
-  const wrapper = mount(
+  const user = userEvent.setup()
+  render(
     <Paginator value={5} min={1} max={10} onChange={onChange} />
   )
-  wrapper.find('li > a').at(5).simulate('click')
+  await user.click(screen.getByRole('link', { name: /page 10$/ }))
   expect(onChange).toHaveBeenCalledWith(10)
 })
 
 test('Current page is indicated via aria-current', () => {
-  const wrapper = mount(<Paginator value={5} min={1} max={10} />)
-  expect(wrapper.find('.active > a').prop('aria-current')).toBe('page')
-  expect(wrapper.find('a').not('.active').first().prop('aria-current')).toBe(
-    false
-  )
+  render(<Paginator value={5} min={1} max={10} />)
+  expect(screen.getByText(5)).toHaveAttribute('aria-current', 'page')
+  expect(screen.getByText(1)).toHaveAttribute('aria-current', 'false')
 })
 
 test('Destination is indicated via aria-label', () => {
-  const wrapper = mount(<Paginator value={5} min={1} max={10} />)
-  expect(wrapper.find('.active > a').prop('aria-label')).toBe('Go to page 5')
+  render(<Paginator value={5} min={1} max={10} />)
+  expect(screen.getByLabelText('Go to page 5')).toBeInTheDocument()
 })
 
-test('Page button is triggered via click or enter', () => {
+test('Page control is triggered via click or enter', async () => {
   const onChange = jest.fn()
-  const wrapper = mount(
+  const user = userEvent.setup()
+  render(
     <Paginator value={5} min={1} max={10} onChange={onChange} />
   )
-  const link = wrapper.find('li > a').at(2)
-  link.simulate('click')
-  link.simulate('keydown', { keyCode: 13 })
 
-  expect(onChange).toHaveBeenCalledTimes(2)
+  await user.click(screen.getByLabelText('Go to page 1'))
+  await user.keyboard('{Enter}')
+  expect(onChange).toHaveBeenNthCalledWith(1, 1)
+  expect(onChange).toHaveBeenNthCalledWith(2, 1)
 })
 
 test('Can accept custom delimiter', () => {
-  const wrapper = mount(
+  render(
     <Paginator value={1} min={1} max={10} delimiter="foo" />
   )
-  expect(wrapper.find('.delimiter').contains('foo')).toBe(true)
+  expect(screen.getByText('foo')).toBeInTheDocument()
 })