Merge branch 'main' into dateFormat

trussworks · Feb 8, 2024 · 03b0236 · 03b0236
2 parents 68763b5 + eecbac1
commit 03b0236
Show file tree

Hide file tree

Showing 9 changed files with 1,540 additions and 672 deletions.
diff --git a/__mocks__/tabbable.js b/__mocks__/tabbable.js
@@ -0,0 +1,11 @@
+const lib = jest.requireActual('tabbable');
+
+const tabbable = {
+   ...lib,
+   tabbable: (node, options) => lib.tabbable(node, { ...options, displayCheck: 'none' }),
+   focusable: (node, options) => lib.focusable(node, { ...options, displayCheck: 'none' }),
+   isFocusable: (node, options) => lib.isFocusable(node, { ...options, displayCheck: 'none' }),
+   isTabbable: (node, options) => lib.isTabbable(node, { ...options, displayCheck: 'none' }),
+};
+
+module.exports = tabbable;
diff --git a/package.json b/package.json
@@ -66,14 +66,13 @@
     "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.0.4",
     "@types/classnames": "^2.2.9",
-    "@types/jest": "^27.0.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "@uswds/uswds": "3.7.1",
@@ -93,17 +92,17 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^2.1.0",
-    "focus-trap-react": "^8.8.1",
+    "focus-trap-react": "^10.2.3",
     "fork-ts-checker-webpack-plugin": "^9.0.0",
     "happo-plugin-storybook": "^3.3.0",
     "happo.io": "^8.3.1",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^2.7.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "sass": "^1.26.0",
     "sass-loader": "^13.0.0",
     "sass-resources-loader": "^2.0.1",
@@ -129,6 +128,7 @@
     "json-schema": "0.4.0",
     "glob-parent": "5.1.2",
     "trim": "0.0.3",
-    "trim-newlines": "3.0.1"
+    "trim-newlines": "3.0.1",
+    "@types/react": "18.2.48"
   }
 }
diff --git a/src/components/Footer/SocialLinks/SocialLinks.tsx b/src/components/Footer/SocialLinks/SocialLinks.tsx
@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Icon } from '../../Icon/Icons'
+import { IconProps } from '../../Icon/Icon'
 
 type SocialLinksProps = {
   links: React.ReactNode[]
@@ -34,28 +35,30 @@ export const SocialLink = ({
   name,
   ...props
 }: SocialLinkProps & JSX.IntrinsicElements['a']): React.ReactElement => {
-  let icon: Icon
+  let IconComponent: React.ComponentType<IconProps>
   switch (name) {
     case 'Facebook':
-      icon = <Icon.Facebook className="usa-social-link__icon" name={name} />
+      IconComponent = Icon.Facebook
       break
     case 'Twitter':
-      icon = <Icon.Twitter className="usa-social-link__icon" name={name} />
+      IconComponent = Icon.Twitter
       break
     case 'YouTube':
-      icon = <Icon.Youtube className="usa-social-link__icon" name={name} />
+      IconComponent = Icon.Youtube
       break
     case 'Instagram':
-      icon = <Icon.Instagram className="usa-social-link__icon" name={name} />
+      IconComponent = Icon.Instagram
       break
     case 'RSS':
-      icon = <Icon.RssFeed className="usa-social-link__icon" name={name} />
+      IconComponent = Icon.RssFeed
       break
   }
 
   return (
     <a className="usa-social-link" {...props} title={name}>
-      {icon}
+      {IconComponent && (
+        <IconComponent className="usa-social-link__icon" name={name} />
+      )}
     </a>
   )
 }
diff --git a/src/components/InPageNavigation/InPageNavigation.tsx b/src/components/InPageNavigation/InPageNavigation.tsx
@@ -28,7 +28,7 @@ export const InPageNavigation = ({
   title = 'On this page',
   ...divProps
 }: InPageNavigationProps &
-  JSX.IntrinsicElements['div']): React.ReactElement => {
+  Omit<JSX.IntrinsicElements['div'], 'content'>): React.ReactElement => {
   const classes = classnames('usa-in-page-nav', styles.target, className)
   const { className: navClassName, ...remainingNavProps } = navProps || {}
   const navClasses = classnames('usa-in-page-nav__nav', navClassName)

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
@@ -26,6 +26,12 @@ jest.mock('./utils', () => {
   }
 })
 
+/*
+ * Modal relies on focus-trap-react, which cannot be reliably tested
+ * in JSDom. A __mocks__/tabbable.js file ensures that a displayCheck setting
+ * for the library is set so that tests do not fail due to this
+ * incompatibility. See: https://github.com/focus-trap/tabbable#testing-in-jsdom
+ */
 const renderWithModalRoot = (
   ui: React.ReactElement,
   options: RenderOptions = {}
@@ -344,12 +350,16 @@ describe('Modal component', () => {
 
       await waitFor(() => handleOpen())
 
-      expect(baseElement).toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 15px')
 
       await waitFor(() => handleClose())
 
-      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 0px')
     })
 
@@ -370,12 +380,16 @@ describe('Modal component', () => {
 
       await waitFor(() => handleOpen())
 
-      expect(baseElement).toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 35px')
 
       await waitFor(() => handleClose())
 
-      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 20px')
     })
 
@@ -411,15 +425,21 @@ describe('Modal component', () => {
 
       await waitFor(() => handleOpen())
 
-      expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
+      await waitFor(() =>
+        expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
+      )
       expect(screen.getByTestId('nonhidden')).toHaveAttribute(
         'data-modal-hidden'
       )
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
 
       await waitFor(() => handleClose())
 
-      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
+      await waitFor(() =>
+        expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
+          'aria-hidden'
+        )
+      )
       expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
         'data-modal-hidden'
       )
@@ -462,15 +482,21 @@ describe('Modal component', () => {
 
       await waitFor(() => handleOpen())
 
-      expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
+      await waitFor(() =>
+        expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
+      )
       expect(screen.getByTestId('nonhidden')).toHaveAttribute(
         'data-modal-hidden'
       )
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
 
       await waitFor(() => handleClose())
 
-      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
+      await waitFor(() =>
+        expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
+          'aria-hidden'
+        )
+      )
       expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
         'data-modal-hidden'
       )
@@ -636,7 +662,9 @@ describe('Modal component', () => {
 
         await waitFor(() => handleClose())
 
-        expect(baseElement).not.toHaveClass('usa-js-no-click')
+        await waitFor(() =>
+          expect(baseElement).not.toHaveClass('usa-js-no-click')
+        )
       })
 
       it('cannot click on the overlay to close', async () => {
@@ -652,7 +680,7 @@ describe('Modal component', () => {
         )
 
         await waitFor(() => handleOpen())
-        expect(modalRef.current?.modalIsOpen).toBe(true)
+        await waitFor(() => expect(modalRef.current?.modalIsOpen).toBe(true))
 
         const overlay = screen.getByTestId('modalOverlay')
         userEvent.click(overlay)
@@ -699,12 +727,16 @@ describe('Modal component', () => {
 
       await waitFor(() => handleOpen())
 
-      expect(baseElement).toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 15px')
 
       await waitFor(() => unmount())
 
-      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 0px')
     })
 
@@ -731,12 +763,16 @@ describe('Modal component', () => {
 
       await waitFor(() => handleClose())
 
-      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 0px')
 
       await waitFor(() => unmount())
 
-      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      await waitFor(() =>
+        expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      )
       expect(baseElement).toHaveStyle('padding-right: 0px')
     })
   })

diff --git a/src/components/Modal/utils.test.ts b/src/components/Modal/utils.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { useModal } from './utils'
 

diff --git a/src/components/forms/DatePicker/DatePicker.test.tsx b/src/components/forms/DatePicker/DatePicker.test.tsx
@@ -239,7 +239,9 @@ describe('DatePicker component', () => {
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
       getByTestId('test-external-element').focus()
-      expect(getByTestId('date-picker-calendar')).not.toBeVisible()
+      await waitFor(() =>
+        expect(getByTestId('date-picker-calendar')).not.toBeVisible()
+      )
       expect(mockOnBlur).toHaveBeenCalled()
     })
   })

diff --git a/src/components/forms/DatePicker/utils.tsx b/src/components/forms/DatePicker/utils.tsx
@@ -499,7 +499,7 @@ export const isDateInvalid = (
 export const listToTable = (
   list: React.ReactNode[],
   rowSize: number
-): React.ReactFragment => {
+): React.ReactNode => {
   const rows = []
   let i = 0