Skip to content

Commit 03b0236

Browse files
werdnanoslenwerdnanoslen
authored
Merge branch 'main' into dateFormat
2 parents 68763b5 + eecbac1 commit 03b0236

File tree

9 files changed

+1540
-672
lines changed

9 files changed

+1540
-672
lines changed

‎__mocks__/tabbable.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const lib = jest.requireActual('tabbable');
2+
3+
const tabbable = {
4+
...lib,
5+
tabbable: (node, options) => lib.tabbable(node, { ...options, displayCheck: 'none' }),
6+
focusable: (node, options) => lib.focusable(node, { ...options, displayCheck: 'none' }),
7+
isFocusable: (node, options) => lib.isFocusable(node, { ...options, displayCheck: 'none' }),
8+
isTabbable: (node, options) => lib.isTabbable(node, { ...options, displayCheck: 'none' }),
9+
};
10+
11+
module.exports = tabbable;

‎package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,13 @@
6666
"@svgr/webpack": "^8.0.1",
6767
"@testing-library/dom": "^9.0.0",
6868
"@testing-library/jest-dom": "^6.2.0",
69-
"@testing-library/react": "^12.1.0",
70-
"@testing-library/react-hooks": "^8.0.1",
69+
"@testing-library/react": "^14.1.2",
7170
"@testing-library/user-event": "^14.0.4",
7271
"@types/classnames": "^2.2.9",
73-
"@types/jest": "^27.0.1",
74-
"@types/react": "^17.0.0",
75-
"@types/react-dom": "^17.0.0",
76-
"@types/react-test-renderer": "^18.0.0",
72+
"@types/jest": "^29.5.11",
73+
"@types/react": "^18.2.48",
74+
"@types/react-dom": "^18.2.18",
75+
"@types/react-test-renderer": "^18.0.7",
7776
"@typescript-eslint/eslint-plugin": "^6.2.0",
7877
"@typescript-eslint/parser": "^6.2.0",
7978
"@uswds/uswds": "3.7.1",
@@ -93,17 +92,17 @@
9392
"eslint-plugin-react": "^7.31.10",
9493
"eslint-plugin-react-hooks": "^4.6.0",
9594
"eslint-plugin-security": "^2.1.0",
96-
"focus-trap-react": "^8.8.1",
95+
"focus-trap-react": "^10.2.3",
9796
"fork-ts-checker-webpack-plugin": "^9.0.0",
9897
"happo-plugin-storybook": "^3.3.0",
9998
"happo.io": "^8.3.1",
10099
"jest": "^29.6.1",
101100
"jest-environment-jsdom": "^29.6.1",
102101
"mini-css-extract-plugin": "^2.6.1",
103102
"prettier": "^2.7.1",
104-
"react": "^17.0.1",
105-
"react-dom": "^17.0.1",
106-
"react-test-renderer": "^17.0.1",
103+
"react": "^18.2.0",
104+
"react-dom": "^18.2.0",
105+
"react-test-renderer": "^18.2.0",
107106
"sass": "^1.26.0",
108107
"sass-loader": "^13.0.0",
109108
"sass-resources-loader": "^2.0.1",
@@ -129,6 +128,7 @@
129128
"json-schema": "0.4.0",
130129
"glob-parent": "5.1.2",
131130
"trim": "0.0.3",
132-
"trim-newlines": "3.0.1"
131+
"trim-newlines": "3.0.1",
132+
"@types/react": "18.2.48"
133133
}
134134
}

‎src/components/Footer/SocialLinks/SocialLinks.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react'
33
import classnames from 'classnames'
44
import { Icon } from '../../Icon/Icons'
5+
import { IconProps } from '../../Icon/Icon'
56

67
type SocialLinksProps = {
78
links: React.ReactNode[]
@@ -34,28 +35,30 @@ export const SocialLink = ({
3435
name,
3536
...props
3637
}: SocialLinkProps & JSX.IntrinsicElements['a']): React.ReactElement => {
37-
let icon: Icon
38+
let IconComponent: React.ComponentType<IconProps>
3839
switch (name) {
3940
case 'Facebook':
40-
icon = <Icon.Facebook className="usa-social-link__icon" name={name} />
41+
IconComponent = Icon.Facebook
4142
break
4243
case 'Twitter':
43-
icon = <Icon.Twitter className="usa-social-link__icon" name={name} />
44+
IconComponent = Icon.Twitter
4445
break
4546
case 'YouTube':
46-
icon = <Icon.Youtube className="usa-social-link__icon" name={name} />
47+
IconComponent = Icon.Youtube
4748
break
4849
case 'Instagram':
49-
icon = <Icon.Instagram className="usa-social-link__icon" name={name} />
50+
IconComponent = Icon.Instagram
5051
break
5152
case 'RSS':
52-
icon = <Icon.RssFeed className="usa-social-link__icon" name={name} />
53+
IconComponent = Icon.RssFeed
5354
break
5455
}
5556

5657
return (
5758
<a className="usa-social-link" {...props} title={name}>
58-
{icon}
59+
{IconComponent && (
60+
<IconComponent className="usa-social-link__icon" name={name} />
61+
)}
5962
</a>
6063
)
6164
}

‎src/components/InPageNavigation/InPageNavigation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const InPageNavigation = ({
2828
title = 'On this page',
2929
...divProps
3030
}: InPageNavigationProps &
31-
JSX.IntrinsicElements['div']): React.ReactElement => {
31+
Omit<JSX.IntrinsicElements['div'], 'content'>): React.ReactElement => {
3232
const classes = classnames('usa-in-page-nav', styles.target, className)
3333
const { className: navClassName, ...remainingNavProps } = navProps || {}
3434
const navClasses = classnames('usa-in-page-nav__nav', navClassName)

‎src/components/Modal/Modal.test.tsx

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ jest.mock('./utils', () => {
2626
}
2727
})
2828

29+
/*
30+
* Modal relies on focus-trap-react, which cannot be reliably tested
31+
* in JSDom. A __mocks__/tabbable.js file ensures that a displayCheck setting
32+
* for the library is set so that tests do not fail due to this
33+
* incompatibility. See: https://github.com/focus-trap/tabbable#testing-in-jsdom
34+
*/
2935
const renderWithModalRoot = (
3036
ui: React.ReactElement,
3137
options: RenderOptions = {}
@@ -344,12 +350,16 @@ describe('Modal component', () => {
344350

345351
await waitFor(() => handleOpen())
346352

347-
expect(baseElement).toHaveClass('usa-js-modal--active')
353+
await waitFor(() =>
354+
expect(baseElement).toHaveClass('usa-js-modal--active')
355+
)
348356
expect(baseElement).toHaveStyle('padding-right: 15px')
349357

350358
await waitFor(() => handleClose())
351359

352-
expect(baseElement).not.toHaveClass('usa-js-modal--active')
360+
await waitFor(() =>
361+
expect(baseElement).not.toHaveClass('usa-js-modal--active')
362+
)
353363
expect(baseElement).toHaveStyle('padding-right: 0px')
354364
})
355365

@@ -370,12 +380,16 @@ describe('Modal component', () => {
370380

371381
await waitFor(() => handleOpen())
372382

373-
expect(baseElement).toHaveClass('usa-js-modal--active')
383+
await waitFor(() =>
384+
expect(baseElement).toHaveClass('usa-js-modal--active')
385+
)
374386
expect(baseElement).toHaveStyle('padding-right: 35px')
375387

376388
await waitFor(() => handleClose())
377389

378-
expect(baseElement).not.toHaveClass('usa-js-modal--active')
390+
await waitFor(() =>
391+
expect(baseElement).not.toHaveClass('usa-js-modal--active')
392+
)
379393
expect(baseElement).toHaveStyle('padding-right: 20px')
380394
})
381395

@@ -411,15 +425,21 @@ describe('Modal component', () => {
411425

412426
await waitFor(() => handleOpen())
413427

414-
expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
428+
await waitFor(() =>
429+
expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
430+
)
415431
expect(screen.getByTestId('nonhidden')).toHaveAttribute(
416432
'data-modal-hidden'
417433
)
418434
expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
419435

420436
await waitFor(() => handleClose())
421437

422-
expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
438+
await waitFor(() =>
439+
expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
440+
'aria-hidden'
441+
)
442+
)
423443
expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
424444
'data-modal-hidden'
425445
)
@@ -462,15 +482,21 @@ describe('Modal component', () => {
462482

463483
await waitFor(() => handleOpen())
464484

465-
expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
485+
await waitFor(() =>
486+
expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
487+
)
466488
expect(screen.getByTestId('nonhidden')).toHaveAttribute(
467489
'data-modal-hidden'
468490
)
469491
expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
470492

471493
await waitFor(() => handleClose())
472494

473-
expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
495+
await waitFor(() =>
496+
expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
497+
'aria-hidden'
498+
)
499+
)
474500
expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
475501
'data-modal-hidden'
476502
)
@@ -636,7 +662,9 @@ describe('Modal component', () => {
636662

637663
await waitFor(() => handleClose())
638664

639-
expect(baseElement).not.toHaveClass('usa-js-no-click')
665+
await waitFor(() =>
666+
expect(baseElement).not.toHaveClass('usa-js-no-click')
667+
)
640668
})
641669

642670
it('cannot click on the overlay to close', async () => {
@@ -652,7 +680,7 @@ describe('Modal component', () => {
652680
)
653681

654682
await waitFor(() => handleOpen())
655-
expect(modalRef.current?.modalIsOpen).toBe(true)
683+
await waitFor(() => expect(modalRef.current?.modalIsOpen).toBe(true))
656684

657685
const overlay = screen.getByTestId('modalOverlay')
658686
userEvent.click(overlay)
@@ -699,12 +727,16 @@ describe('Modal component', () => {
699727

700728
await waitFor(() => handleOpen())
701729

702-
expect(baseElement).toHaveClass('usa-js-modal--active')
730+
await waitFor(() =>
731+
expect(baseElement).toHaveClass('usa-js-modal--active')
732+
)
703733
expect(baseElement).toHaveStyle('padding-right: 15px')
704734

705735
await waitFor(() => unmount())
706736

707-
expect(baseElement).not.toHaveClass('usa-js-modal--active')
737+
await waitFor(() =>
738+
expect(baseElement).not.toHaveClass('usa-js-modal--active')
739+
)
708740
expect(baseElement).toHaveStyle('padding-right: 0px')
709741
})
710742

@@ -731,12 +763,16 @@ describe('Modal component', () => {
731763

732764
await waitFor(() => handleClose())
733765

734-
expect(baseElement).not.toHaveClass('usa-js-modal--active')
766+
await waitFor(() =>
767+
expect(baseElement).not.toHaveClass('usa-js-modal--active')
768+
)
735769
expect(baseElement).toHaveStyle('padding-right: 0px')
736770

737771
await waitFor(() => unmount())
738772

739-
expect(baseElement).not.toHaveClass('usa-js-modal--active')
773+
await waitFor(() =>
774+
expect(baseElement).not.toHaveClass('usa-js-modal--active')
775+
)
740776
expect(baseElement).toHaveStyle('padding-right: 0px')
741777
})
742778
})

‎src/components/Modal/utils.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook, act } from '@testing-library/react-hooks'
1+
import { renderHook, act } from '@testing-library/react'
22

33
import { useModal } from './utils'
44

‎src/components/forms/DatePicker/DatePicker.test.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,9 @@ describe('DatePicker component', () => {
239239
await userEvent.click(getByTestId('date-picker-button'))
240240
expect(getByTestId('date-picker-calendar')).toBeVisible()
241241
getByTestId('test-external-element').focus()
242-
expect(getByTestId('date-picker-calendar')).not.toBeVisible()
242+
await waitFor(() =>
243+
expect(getByTestId('date-picker-calendar')).not.toBeVisible()
244+
)
243245
expect(mockOnBlur).toHaveBeenCalled()
244246
})
245247
})

‎src/components/forms/DatePicker/utils.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -499,7 +499,7 @@ export const isDateInvalid = (
499499
export const listToTable = (
500500
list: React.ReactNode[],
501501
rowSize: number
502-
): React.ReactFragment => {
502+
): React.ReactNode => {
503503
const rows = []
504504
let i = 0
505505

0 commit comments

Comments
 (0)