Skip to content

Commit d9dde66

Browse files
joshblackCopilot
joshblack
and
Copilot
committed
Fix async console warnings in tests
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 884842d commit d9dde66

9 files changed

Lines changed: 111 additions & 97 deletions

File tree

‎.changeset/fix-anchored-overlay-popover-target.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
AnchoredOverlay: Render the popover target attribute correctly for popover anchors

‎packages/react/src/ActionMenu/ActionMenu.test.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -353,9 +353,7 @@ describe('ActionMenu', () => {
353353
const button = component.getByRole('button')
354354

355355
const user = userEvent.setup()
356-
await act(async () => {
357-
await user.click(button)
358-
})
356+
await user.click(button)
359357

360358
expect(component.queryByRole('menu')).toBeInTheDocument()
361359
const menuItems = component.getAllByRole('menuitem')
@@ -368,13 +366,11 @@ describe('ActionMenu', () => {
368366
await user.keyboard('{ArrowDown}')
369367
expect(menuItems[1]).toEqual(document.activeElement)
370368

371-
await act(async () => {
372-
// TODO: Removed one ArrowDown to account for the focus trap starting at the second element
373-
// await user.keyboard('{ArrowDown}')
374-
await user.keyboard('{ArrowDown}')
375-
await user.keyboard('{ArrowDown}')
376-
await user.keyboard('{ArrowDown}')
377-
})
369+
// TODO: Removed one ArrowDown to account for the focus trap starting at the second element
370+
// await user.keyboard('{ArrowDown}')
371+
await user.keyboard('{ArrowDown}')
372+
await user.keyboard('{ArrowDown}')
373+
await user.keyboard('{ArrowDown}')
378374
expect(menuItems[menuItems.length - 1]).toEqual(document.activeElement) // last elememt
379375

380376
await user.keyboard('{ArrowDown}')

‎packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {act, createRef, useCallback, useRef, useState} from 'react'
1+
import {createRef, useCallback, useRef, useState} from 'react'
22
import {describe, expect, it, vi} from 'vitest'
3-
import {render} from '@testing-library/react'
4-
import {userEvent} from 'vitest/browser'
3+
import {act, fireEvent, render} from '@testing-library/react'
4+
import userEvent from '@testing-library/user-event'
55
import {AnchoredOverlay} from '../AnchoredOverlay'
66
import {Button} from '../Button'
77
import BaseStyles from '../BaseStyles'
@@ -105,9 +105,7 @@ describe.each([true, false])(
105105
/>,
106106
)
107107
const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
108-
await act(async () => {
109-
await userEvent.click(anchor)
110-
})
108+
await userEvent.click(anchor)
111109

112110
expect(mockOpenCallback).toHaveBeenCalledTimes(1)
113111
expect(mockOpenCallback).toHaveBeenCalledWith('anchor-click')
@@ -125,9 +123,7 @@ describe.each([true, false])(
125123
/>,
126124
)
127125
const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
128-
await act(async () => {
129-
await userEvent.type(anchor, '{Space}')
130-
})
126+
fireEvent.keyDown(anchor, {key: ' '})
131127

132128
expect(mockOpenCallback).toHaveBeenCalledTimes(1)
133129
expect(mockOpenCallback).toHaveBeenCalledWith('anchor-key-press')
@@ -145,9 +141,7 @@ describe.each([true, false])(
145141
withCSSAnchorPositioningFeatureFlag={withCSSAnchorPositioningFeatureFlag}
146142
/>,
147143
)
148-
await act(async () => {
149-
await userEvent.click(anchoredOverlay.baseElement)
150-
})
144+
await userEvent.click(anchoredOverlay.baseElement)
151145

152146
expect(mockOpenCallback).toHaveBeenCalledTimes(0)
153147
expect(mockCloseCallback).toHaveBeenCalledTimes(1)
@@ -167,9 +161,7 @@ describe.each([true, false])(
167161
/>,
168162
)
169163

170-
await act(async () => {
171-
await userEvent.keyboard('{Escape}')
172-
})
164+
await userEvent.keyboard('{Escape}')
173165

174166
expect(mockOpenCallback).toHaveBeenCalledTimes(0)
175167
expect(mockCloseCallback).toHaveBeenCalledTimes(1)
@@ -186,9 +178,7 @@ describe.each([true, false])(
186178
/>,
187179
)
188180

189-
await act(async () => {
190-
await userEvent.keyboard('{Escape}')
191-
})
181+
await userEvent.keyboard('{Escape}')
192182

193183
expect(mockPositionChangeCallback).toHaveBeenCalled()
194184
expect(mockPositionChangeCallback).toHaveBeenCalledWith({

‎packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -406,7 +406,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
406406
tabIndex: 0,
407407
onClick: onAnchorClick,
408408
onKeyDown: onAnchorKeyDown,
409-
...(shouldRenderAsPopover ? {popoverTarget: popoverId} : {}),
409+
...(shouldRenderAsPopover ? {popovertarget: popoverId} : {}),
410410
})}
411411
{open ? (
412412
<Overlay

‎packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx‎

Lines changed: 50 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Breadcrumbs from '..'
2-
import {render as HTMLRender, screen, waitFor, within} from '@testing-library/react'
2+
import {act, fireEvent, render as HTMLRender, screen, waitFor, within} from '@testing-library/react'
33
import {describe, expect, it, vi} from 'vitest'
44
import userEvent from '@testing-library/user-event'
55
import {FeatureFlags} from '../../FeatureFlags'
@@ -155,8 +155,6 @@ describe('Breadcrumbs', () => {
155155
})
156156

157157
it('includes root item in overflow menu when overflow is menu-with-root', async () => {
158-
const user = userEvent.setup()
159-
160158
renderWithTheme(
161159
<Breadcrumbs overflow="menu-with-root">
162160
<Breadcrumbs.Item href="/home">Home</Breadcrumbs.Item>
@@ -176,7 +174,7 @@ describe('Breadcrumbs', () => {
176174
expect(menuButton).toBeInTheDocument()
177175

178176
// Open the overflow menu
179-
await user.click(menuButton)
177+
fireEvent.click(menuButton)
180178

181179
// Find the <details> element that contains the overflow menu
182180
const detailsEl = menuButton.closest('details') as HTMLElement | null
@@ -249,23 +247,29 @@ describe('Breadcrumbs', () => {
249247

250248
// Simulate a wide container resize
251249
if (resizeCallback) {
252-
resizeCallback([
253-
{
254-
contentRect: {width: 800, height: 40},
255-
} as ResizeObserverEntry,
256-
])
250+
const callback = resizeCallback
251+
act(() => {
252+
callback([
253+
{
254+
contentRect: {width: 800, height: 40},
255+
} as ResizeObserverEntry,
256+
])
257+
})
257258
}
258259

259260
// Should still have overflow menu for 6 items (>5 rule)
260261
expect(screen.getByRole('button', {name: /more breadcrumb items/i})).toBeInTheDocument()
261262

262263
// Simulate a narrow container resize
263264
if (resizeCallback) {
264-
resizeCallback([
265-
{
266-
contentRect: {width: 250, height: 40},
267-
} as ResizeObserverEntry,
268-
])
265+
const callback = resizeCallback
266+
act(() => {
267+
callback([
268+
{
269+
contentRect: {width: 250, height: 40},
270+
} as ResizeObserverEntry,
271+
])
272+
})
269273
}
270274

271275
// Should maintain overflow menu for narrow container
@@ -309,7 +313,7 @@ describe('Breadcrumbs', () => {
309313
expect(menuButton).toBeInTheDocument()
310314

311315
// Open the overflow menu
312-
await user.click(menuButton)
316+
fireEvent.click(menuButton)
313317

314318
// Verify menu items are present (first 3 items should be in overflow for 7 total items)
315319
await waitFor(() => {
@@ -327,28 +331,34 @@ describe('Breadcrumbs', () => {
327331
// Close menu by clicking outside
328332
await user.click(document.body)
329333
await waitFor(() => {
330-
expect
334+
expect(menuButton).toHaveAttribute('aria-expanded', 'false')
331335
})
332336

333337
// Simulate a very narrow container resize that would affect overflow calculation
334338
if (resizeCallback) {
335-
resizeCallback([
336-
{
337-
contentRect: {width: 200, height: 40},
338-
} as ResizeObserverEntry,
339-
])
339+
const callback = resizeCallback
340+
act(() => {
341+
callback([
342+
{
343+
contentRect: {width: 200, height: 40},
344+
} as ResizeObserverEntry,
345+
])
346+
})
340347
}
341348

342349
// Menu button should still be present
343350
expect(screen.getByRole('button', {name: /more breadcrumb items/i})).toBeInTheDocument()
344351

345352
// Simulate a very wide container resize
346353
if (resizeCallback) {
347-
resizeCallback([
348-
{
349-
contentRect: {width: 1200, height: 40},
350-
} as ResizeObserverEntry,
351-
])
354+
const callback = resizeCallback
355+
act(() => {
356+
callback([
357+
{
358+
contentRect: {width: 1200, height: 40},
359+
} as ResizeObserverEntry,
360+
])
361+
})
352362
}
353363

354364
// Menu button should still be present (7 items > 5)
@@ -392,15 +402,17 @@ describe('Breadcrumbs', () => {
392402
const menuButton = screen.getByRole('button', {name: /more breadcrumb items/i})
393403
// Initially collapsed
394404
expect(menuButton).toHaveAttribute('aria-expanded', 'false')
395-
await user.click(menuButton)
405+
fireEvent.click(menuButton)
396406

397407
// Verify menu is open
398408
await waitFor(() => {
399409
expect(menuButton).toHaveAttribute('aria-expanded', 'true')
400410
})
401411

402412
// Press Escape key
403-
await user.keyboard('{Escape}') // sometimes tooltip swallows this escape
413+
await act(async () => {
414+
await user.keyboard('{Escape}') // sometimes tooltip swallows this escape
415+
})
404416

405417
// Verify menu is closed
406418
await waitFor(() => {
@@ -431,7 +443,7 @@ describe('Breadcrumbs', () => {
431443

432444
// Open the overflow menu
433445
const menuButton = screen.getByRole('button', {name: /more breadcrumb items/i})
434-
await user.click(menuButton)
446+
fireEvent.click(menuButton)
435447

436448
// Verify menu is open
437449
await waitFor(() => {
@@ -466,7 +478,7 @@ describe('Breadcrumbs', () => {
466478

467479
// Open the overflow menu
468480
const menuButton = screen.getByRole('button', {name: /more breadcrumb items/i})
469-
await user.click(menuButton)
481+
fireEvent.click(menuButton)
470482

471483
// Verify menu is open
472484
await waitFor(() => {
@@ -506,7 +518,10 @@ describe('Breadcrumbs', () => {
506518
const menuButton = screen.getByRole('button', {name: /more breadcrumb items/i})
507519

508520
// Focus the menu button
509-
menuButton.focus()
521+
await act(async () => {
522+
menuButton.focus()
523+
await Promise.resolve()
524+
})
510525
expect(menuButton).toHaveFocus()
511526

512527
// Open menu with Enter key
@@ -518,7 +533,9 @@ describe('Breadcrumbs', () => {
518533
})
519534

520535
// Close with Escape
521-
await user.keyboard('{Escape}')
536+
await act(async () => {
537+
await user.keyboard('{Escape}')
538+
})
522539

523540
// Verify focus returns to button
524541
expect(menuButton).toHaveFocus()
@@ -584,8 +601,6 @@ describe('Breadcrumbs', () => {
584601
})
585602

586603
it('passes through additional props to the element specified by as in overflow menu', async () => {
587-
const user = userEvent.setup()
588-
589604
renderWithTheme(
590605
<Breadcrumbs overflow="menu">
591606
<Breadcrumbs.Item as={Link} href="/home" data-testid="home-link" inline>
@@ -603,7 +618,7 @@ describe('Breadcrumbs', () => {
603618

604619
// Open the overflow menu
605620
const menuButton = screen.getByRole('button', {name: /more breadcrumb items/i})
606-
await user.click(menuButton)
621+
fireEvent.click(menuButton)
607622

608623
// Verify the custom link in the overflow menu has the correct href
609624
await waitFor(() => {

‎packages/react/src/DataTable/__tests__/Pagination.test.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {page} from 'vitest/browser'
22
import {beforeEach, describe, expect, it, vi} from 'vitest'
33
import {Pagination} from '../Pagination'
4-
import {render, screen} from '@testing-library/react'
4+
import {act, render, screen} from '@testing-library/react'
55
import userEvent from '@testing-library/user-event'
66

77
describe('Table.Pagination', () => {
@@ -100,9 +100,12 @@ describe('Table.Pagination', () => {
100100
expect(getCurrentPage()).toEqual(getPage(0))
101101
expect(getPageRange()).toEqual('1 through 25 of 25')
102102

103-
rerender(
104-
<Pagination onChange={onChange} aria-label="Test label" defaultPageIndex={2} pageSize={5} totalCount={300} />,
105-
)
103+
await act(async () => {
104+
rerender(
105+
<Pagination onChange={onChange} aria-label="Test label" defaultPageIndex={2} pageSize={5} totalCount={300} />,
106+
)
107+
await Promise.resolve()
108+
})
106109
expect(getPageRange()).toEqual('11 through 15 of 300')
107110
expect(getCurrentPage()).toEqual(getPage(2))
108111
expect(getInvalidPages()).toHaveLength(0)
@@ -293,9 +296,12 @@ describe('Table.Pagination', () => {
293296
expect(getCurrentPage()).toEqual(getPage(1))
294297
expect(getPageRange()).toEqual('26 through 50 of 50')
295298

296-
rerender(
297-
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={0} pageSize={5} totalCount={300} />,
298-
)
299+
await act(async () => {
300+
rerender(
301+
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={0} pageSize={5} totalCount={300} />,
302+
)
303+
await Promise.resolve()
304+
})
299305
expect(getPageRange()).toEqual('1 through 5 of 300')
300306
expect(getCurrentPage()).toEqual(getPage(0))
301307
expect(getInvalidPages()).toHaveLength(0)
@@ -358,9 +364,12 @@ describe('Table.Pagination', () => {
358364
expect(getCurrentPage()).toEqual(getPage(1))
359365
expect(getPageRange()).toEqual('11 through 20 of 1000')
360366

361-
rerender(
362-
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={0} pageSize={5} totalCount={300} />,
363-
)
367+
await act(async () => {
368+
rerender(
369+
<Pagination aria-label="Test label" onChange={onChange} defaultPageIndex={0} pageSize={5} totalCount={300} />,
370+
)
371+
await Promise.resolve()
372+
})
364373
expect(getPageRange()).toEqual('1 through 5 of 300')
365374
expect(getFirstPage()).toEqual(getCurrentPage())
366375
expect(getInvalidPages()).toHaveLength(0)

0 commit comments

Comments
 (0)