replace fireEvent with userEvent

Author: severo

src/components/Dropdown/Dropdown.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import Dropdown from './Dropdown'
 import styles from './Dropdown.module.css'
@@ -14,7 +15,7 @@ describe('Dropdown Component', () => {
     expect(div?.classList).toContain(styles.dropdownLeft)
   })
 
-  it('toggles dropdown content on button click', () => {
+  it('toggles dropdown content on button click', async () => {
     const { container: { children: [ div ] }, getByRole } = render(
       <Dropdown label='go'>
         <div>Child 1</div>
@@ -24,15 +25,16 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu with click
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // click again to close
-    fireEvent.click(dropdownButton)
+    await user.click(dropdownButton)
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
-  it('closes dropdown when clicking outside', () => {
+  it('closes dropdown when clicking outside', async () => {
     const { container: { children: [ div ] }, getByRole } = render(
       <Dropdown>
         <div>Child 1</div>
@@ -41,15 +43,16 @@ describe('Dropdown Component', () => {
     )
 
     const dropdownButton = getByRole('button')
-    fireEvent.click(dropdownButton) // open dropdown
+    const user = userEvent.setup()
+    await user.click(dropdownButton) // open dropdown
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // Simulate a click outside
-    fireEvent.mouseDown(document)
+    await user.click(document.body)
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
-  it('does not close dropdown when clicking inside', () => {
+  it('close dropdown when clicking inside', async () => {
     const { container: { children: [ div ] }, getByRole, getByText } = render(
       <Dropdown>
         <div>Child 1</div>
@@ -58,16 +61,17 @@ describe('Dropdown Component', () => {
     )
 
     const dropdownButton = getByRole('button')
-    fireEvent.click(dropdownButton) // open dropdown
+    const user = userEvent.setup()
+    await user.click(dropdownButton) // open dropdown
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     const dropdownContent = getByText('Child 1').parentElement
     if (!dropdownContent) throw new Error('Dropdown content not found')
-    fireEvent.mouseDown(dropdownContent)
-    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
+    await user.click(dropdownContent)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
-  it('closes dropdown on escape key press', () => {
+  it('closes dropdown on escape key press', async () => {
     const { container: { children: [ div ] }, getByRole } = render(
       <Dropdown>
         <div>Child 1</div>
@@ -76,11 +80,12 @@ describe('Dropdown Component', () => {
     )
 
     const dropdownButton = getByRole('button')
-    fireEvent.click(dropdownButton) // open dropdown
+    const user = userEvent.setup()
+    await user.click(dropdownButton) // open dropdown
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // Press escape key
-    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+    await user.keyboard('{Escape}')
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
@@ -107,7 +112,7 @@ describe('Dropdown Component', () => {
   })
 
   // Keyboard navigation tests
-  it('opens dropdown and focuses first item on ArrowDown when closed', () => {
+  it('opens dropdown and focuses first item on ArrowDown when closed', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -120,15 +125,20 @@ describe('Dropdown Component', () => {
     // initially closed
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('false')
 
+    // focus the button
+    act(() => {
+      dropdownButton.focus()
+    })
     // down arrow to open menu
-    fireEvent.keyDown(dropdownButton, { key: 'ArrowDown', code: 'ArrowDown' })
+    const user = userEvent.setup()
+    await user.keyboard('{ArrowDown}')
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('true')
 
     // first menu item should be focused
     expect(document.activeElement).toBe(menuItems[0])
   })
 
-  it('focuses the next item on ArrowDown and wraps to first item if at the end', () => {
+  it('focuses the next item on ArrowDown and wraps to first item if at the end', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -139,19 +149,20 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // second item should be focused
-    fireEvent.keyDown(menuItems[0], { key: 'ArrowDown', code: 'ArrowDown' })
+    await user.keyboard('{ArrowDown}')
     expect(document.activeElement).toBe(menuItems[1])
 
     // wrap back to first item
-    fireEvent.keyDown(menuItems[1], { key: 'ArrowDown', code: 'ArrowDown' })
+    await user.keyboard('{ArrowDown}')
     expect(document.activeElement).toBe(menuItems[0])
   })
 
-  it('focuses the previous item on ArrowUp and wraps to the last item if at the top', () => {
+  it('focuses the previous item on ArrowUp and wraps to the last item if at the top', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -162,15 +173,16 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // ArrowUp -> should wrap to last item
-    fireEvent.keyDown(menuItems[0], { key: 'ArrowUp', code: 'ArrowUp' })
+    await user.keyboard('{ArrowUp}')
     expect(document.activeElement).toBe(menuItems[1])
   })
 
-  it('focuses first item on Home key press', () => {
+  it('focuses first item on Home key press', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -182,19 +194,20 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // move to the second item
-    fireEvent.keyDown(menuItems[0], { key: 'ArrowDown', code: 'ArrowDown' })
+    await user.keyboard('{ArrowDown}')
     expect(document.activeElement).toBe(menuItems[1])
 
     // Home key should focus first item
-    fireEvent.keyDown(menuItems[1], { key: 'Home', code: 'Home' })
+    await user.keyboard('{Home}')
     expect(document.activeElement).toBe(menuItems[0])
   })
 
-  it('focuses last item on End key press', () => {
+  it('focuses last item on End key press', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -206,15 +219,16 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // End key should focus the last item
-    fireEvent.keyDown(menuItems[0], { key: 'End', code: 'End' })
+    await user.keyboard('{End}')
     expect(document.activeElement).toBe(menuItems[2])
   })
 
-  it('closes the menu and puts focus back on the button on Escape', () => {
+  it('closes the menu and puts focus back on the button on Escape', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -225,12 +239,13 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('true')
 
     // escape closes menu
-    fireEvent.keyDown(menuItems[0], { key: 'Escape', code: 'Escape' })
+    await user.keyboard('{Escape}')
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('false')
 
     // focus returns to the button

src/components/Folder/Folder.test.tsx

@@ -1,11 +1,11 @@
 import { render, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { strict as assert } from 'assert'
 import { act } from 'react'
 import { beforeEach, describe, expect, it, test, vi } from 'vitest'
 import { Config, ConfigProvider } from '../../hooks/useConfig.js'
 import { DirSource, FileMetadata, HyperparamFileMetadata, getHyperparamSource } from '../../lib/sources/index.js'
 import Folder from './Folder.js'
-import { userEvent } from '@testing-library/user-event'
 
 const endpoint = 'http://localhost:3000'
 const mockFiles: HyperparamFileMetadata[] = [

src/components/Json/Json.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { describe, expect, it } from 'vitest'
 import Json from './Json.js'
 import { isPrimitive, shouldObjectCollapse } from './helpers.js'
@@ -89,13 +90,14 @@ describe('Json Component', () => {
   it.for([
     { obj: [314, null] },
     { obj: { nested: true } },
-  ])('hides the content and append number of entries when objects with non-primitive values are collapsed', (obj) => {
+  ])('hides the content and append number of entries when objects with non-primitive values are collapsed', async (obj) => {
     const { getAllByRole, getByText } = render(<Json json={obj} />)
     const root = getAllByRole('treeitem')[0]
     if (!root) { /* type assertion, getAllByRole would already have thrown */
       throw new Error('No root element found')
     }
-    fireEvent.click(root)
+    const user = userEvent.setup()
+    await user.click(root)
     expect(root.getAttribute('aria-expanded')).toBe('false')
     getByText('...')
     getByText(/entries/)
@@ -119,25 +121,27 @@ describe('Json Component', () => {
     getByText(/entries/)
   })
 
-  it('toggles array collapse state', () => {
+  it('toggles array collapse state', async () => {
     const longArray = Array.from({ length: 101 }, (_, i) => i)
     const { getByRole, getByText, queryByText } = render(<Json json={longArray} />)
     const treeItem = getByRole('treeitem')
     getByText('...')
-    fireEvent.click(treeItem)
+    const user = userEvent.setup()
+    await user.click(treeItem)
     expect(queryByText('...')).toBeNull()
-    fireEvent.click(treeItem)
+    await user.click(treeItem)
     getByText('...')
   })
 
-  it('toggles object collapse state', () => {
+  it('toggles object collapse state', async () => {
     const longObject = Object.fromEntries(Array.from({ length: 101 }, (_, i) => [`key${i}`, { nested: true }]))
     const { getByRole, getByText, queryByText } = render(<Json json={longObject} />)
     const treeItem = getByRole('treeitem') // only one treeitem because the inner objects are collapsed and not represented as treeitems
     getByText('...')
-    fireEvent.click(treeItem)
+    const user = userEvent.setup()
+    await user.click(treeItem)
     expect(queryByText('...')).toBeNull()
-    fireEvent.click(treeItem)
+    await user.click(treeItem)
     getByText('...')
   })
 })

src/components/SlidePanel/SlidePanel.test.tsx

@@ -1,5 +1,6 @@
 
-import { act, fireEvent, render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ConfigProvider } from '../../hooks/useConfig.js'
 import SlidePanel from './SlidePanel.js'
@@ -86,7 +87,7 @@ describe('SlidePanel', () => {
     expect(panel.style.width).toBe('400px')
   })
 
-  it('respects minWidth from config', () => {
+  it('respects minWidth from config', async () => {
     const { getByRole } = render(
       <ConfigProvider value={{ slidePanel: { minWidth: 300 } }}>
         <SlidePanel
@@ -100,22 +101,20 @@ describe('SlidePanel', () => {
     const panel = getByRole('complementary')
     expect(panel.style.width).toBe('400px')
 
-    // Simulate mousedown on resizer with clientX 800
-    act(() => {
-      fireEvent.mouseDown(resizer, { clientX: 800 })
-    })
-
-    // Simulate mousemove on document with clientX such that new width is less than minWidth
-    act(() => {
-      fireEvent.mouseMove(document, { clientX: 950 })
-      fireEvent.mouseUp(document)
-    })
+    const user = userEvent.setup()
+    await user.pointer([
+      // Simulate mousedown on resizer with clientX 800
+      { keys: '[MouseLeft>]', target: resizer, coords: { x: 800, y: 0 } },
+      // Simulate mousemove on document with clientX such that new width is less than minWidth
+      { coords: { x: 950, y: 0 } },
+      { keys: '[/MouseLeft]' },
+    ])
 
     // resizingClientX was set to 800 + 400 = 1200 so new width = max(300, 1200 - 950) = 300
     expect(panel.style.width).toBe('300px')
   })
 
-  it('handles dragging to resize', () => {
+  it('handles dragging to resize', async () => {
     const { getByRole } = render(
       <SlidePanel
         mainContent={<div>Main</div>}
@@ -130,20 +129,12 @@ describe('SlidePanel', () => {
     // Mock panel's offsetWidth to be 400px
     Object.defineProperty(panel, 'offsetWidth', { value: 400, configurable: true })
 
-    // Simulate mousedown
-    act(() => {
-      fireEvent.mouseDown(resizer, { clientX: 800 })
-    })
-
-    // Simulate dragging
-    act(() => {
-      fireEvent.mouseMove(document, { clientX: 750 })
-    })
-
-    // End dragging
-    act(() => {
-      fireEvent.mouseUp(document)
-    })
+    const user = userEvent.setup()
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: resizer, coords: { x: 800, y: 0 } },
+      { coords: { x: 750, y: 0 } },
+      { keys: '[/MouseLeft]' },
+    ])
 
     // Expected new width = 1200 - 750 = 450
     expect(panel.style.width).toBe('450px')