clear mocks, fix test, replace fireEvent with userEvent

Author: severo

src/components/File/File.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
 import { act } from 'react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Config, ConfigProvider } from '../../hooks/useConfig.js'
 import { getHttpSource, getHyperparamSource } from '../../lib/sources/index.js'
 import File from './File.js'
@@ -21,6 +21,10 @@ const headers = { get: vi.fn() }
 globalThis.fetch = vi.fn(() => Promise.resolve({ text, headers } as unknown as Response))
 
 describe('File Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('renders a local file path', async () => {
     text.mockResolvedValueOnce('test content')
     const source = getHyperparamSource('folder/subfolder/test.txt', { endpoint })

src/components/Folder/Folder.test.tsx

@@ -1,7 +1,7 @@
-import { fireEvent, render, waitFor } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import { strict as assert } from 'assert'
 import { act } from 'react'
-import { describe, expect, it, test, vi } from 'vitest'
+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'
@@ -22,6 +22,10 @@ const config: Config = {
 globalThis.fetch = vi.fn()
 
 describe('Folder Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   test.for([
     '',
     'subfolder/',
@@ -100,19 +104,16 @@ describe('Folder Component', () => {
 
     // Type a search query
     const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
-    act(() => {
-      fireEvent.keyUp(searchInput, { target: { value: 'file1' } })
-    })
+    const user = userEvent.setup()
+    await user.type(searchInput, 'file1')
 
     // Only matching files are displayed
     await findByText('file1.txt')
     expect(queryByText('folder1/')).toBeNull()
     expect(queryByText('report.pdf')).toBeNull()
 
     // Clear search with escape key
-    act(() => {
-      fireEvent.keyUp(searchInput, { key: 'Escape' })
-    })
+    await user.type(searchInput, '{Escape}')
 
     await findByText('report.pdf')
     getByText('folder1/')
@@ -149,13 +150,16 @@ describe('Folder Component', () => {
     expect(location.href).toBe('/files?key=file1.txt')
   })
 
-  it('jumps to search box when user types /', async () => {
+  it('jumps to search box when user types / while the body is focused', async () => {
     const dirSource: DirSource = {
       sourceId: 'test-source',
       sourceParts: [{ text: 'test-source', sourceId: 'test-source' }],
       kind: 'directory',
       prefix: '',
-      listFiles: () => Promise.resolve([]),
+      listFiles: async () => {
+        await fetch('something') // to ensure we wait for loading
+        return []
+      },
     }
     const { getByPlaceholderText } = render(<Folder source={dirSource} />)
 
@@ -165,30 +169,33 @@ describe('Folder Component', () => {
     })
 
     const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
+    const user = userEvent.setup()
 
-    // Typing / should focus the search box
-    act(() => {
-      fireEvent.keyDown(document.body, { key: '/' })
-    })
+    // By default, the search box is already focused in this test
     expect(document.activeElement).toBe(searchInput)
 
     // Typing inside the search box should work including /
-    act(() => {
-      fireEvent.keyUp(searchInput, { target: { value: 'file1/' } })
-    })
+    await user.type(searchInput, 'file1/')
     expect(searchInput.value).toBe('file1/')
 
     // Unfocus and re-focus should select all text in search box
     act(() => {
       searchInput.blur()
     })
     expect(document.activeElement).not.toBe(searchInput)
+    expect(document.activeElement).toBe(document.body)
 
-    act(() => {
-      fireEvent.keyDown(document.body, { key: '/' })
-    })
+    await user.keyboard('/')
     expect(document.activeElement).toBe(searchInput)
     expect(searchInput.selectionStart).toBe(0)
     expect(searchInput.selectionEnd).toBe(searchInput.value.length)
+
+    // Focus another element and try again: it does not focus the search box
+    await user.tab()
+    expect(document.activeElement).not.toBe(searchInput)
+    expect(document.activeElement).not.toBe(document.body)
+
+    await user.keyboard('/')
+    expect(document.activeElement).not.toBe(searchInput)
   })
 })

src/components/ImageView/ImageView.test.tsx

@@ -1,12 +1,17 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getHyperparamSource } from '../../lib/sources/index.js'
 import ImageView from './ImageView.js'
 
 globalThis.fetch = vi.fn()
 
 describe('ImageView Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // unnecessary for now because it has only one test, but safer for future tests
+  })
+
   it('renders the image correctly', async () => {
     const body = new ArrayBuffer(8)
     vi.mocked(fetch).mockResolvedValueOnce({

src/components/JsonView/JsonView.test.tsx

@@ -1,5 +1,5 @@
 import { render, waitFor } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { FileSource } from '../../lib/sources/types.js'
 import JsonView from './JsonView.js'
 
@@ -11,6 +11,10 @@ vi.mock('../../../src/lib/utils.js', async () => {
 globalThis.fetch = vi.fn()
 
 describe('JsonView Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   const encoder = new TextEncoder()
 
   it('renders json content as nested tree items (if not collapsed)', async () => {

src/components/MarkdownView/MarkdownView.test.tsx

@@ -1,12 +1,17 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getHyperparamSource } from '../../lib/sources/index.js'
 import MarkdownView from './MarkdownView.js'
 
 globalThis.fetch = vi.fn()
 
 describe('MarkdownView Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // unnecessary for now because it has only one test, but safer for future tests
+  })
+
   it('renders markdown correctly', async () => {
     const text = '# Markdown\n\nThis is a test of the markdown viewer.'
     vi.mocked(fetch).mockResolvedValueOnce({

src/components/Welcome/Welcome.test.tsx

@@ -1,11 +1,16 @@
 import { fireEvent, render } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ConfigProvider } from '../../hooks/useConfig.js'
 import Welcome from './Welcome.js'
 
+const onClose = vi.fn()
+
 describe('Welcome Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('renders welcome content', () => {
-    const onClose = vi.fn()
     const { getByRole, getByText } = render(<Welcome onClose={onClose} />)
 
     getByText('npx hyperparam')
@@ -15,15 +20,13 @@ describe('Welcome Component', () => {
   })
 
   it('calls onClose when button is clicked', () => {
-    const onClose = vi.fn()
     const { getByRole } = render(<Welcome onClose={onClose} />)
 
     fireEvent.click(getByRole('button'))
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
   it('calls onClose when clicking outside the popup', () => {
-    const onClose = vi.fn()
     const { getByRole } = render(<Welcome onClose={onClose} />)
 
     // Find the backdrop element
@@ -34,7 +37,6 @@ describe('Welcome Component', () => {
   })
 
   it('does not call onClose when clicking inside the popup', () => {
-    const onClose = vi.fn()
     const { getByText } = render(<Welcome onClose={onClose} />)
 
     // Find and click on an element inside the popup content
@@ -45,7 +47,6 @@ describe('Welcome Component', () => {
   })
 
   it('calls onClose when pressing Escape key', () => {
-    const onClose = vi.fn()
     render(<Welcome onClose={onClose} />)
 
     // Simulate pressing the Escape key
@@ -54,7 +55,6 @@ describe('Welcome Component', () => {
   })
 
   it('does not call onClose when pressing other keys', () => {
-    const onClose = vi.fn()
     render(<Welcome onClose={onClose} />)
 
     // Simulate pressing a different key
@@ -63,7 +63,6 @@ describe('Welcome Component', () => {
   })
 
   it('renders custom content and button text', () => {
-    const onClose = vi.fn()
     const customContent = <p>Custom welcome message</p>
     const customButtonText = 'Custom Got it'
     const { getByText } = render(

test/lib/sources/httpSource.test.ts

@@ -1,9 +1,13 @@
-import { describe, expect, it, test, vi } from 'vitest'
+import { beforeEach, describe, expect, it, test, vi } from 'vitest'
 import { getHttpSource } from '../../../src/lib/sources/httpSource.js'
 
 globalThis.fetch = vi.fn()
 
 describe('getHttpSource', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   test.for([
     'http://example.com/test.txt',
     'https://example.com/test.txt',

test/lib/sources/hyperparamSource.test.ts

@@ -1,9 +1,13 @@
-import { assert, describe, expect, it, test, vi } from 'vitest'
+import { assert, beforeEach, describe, expect, it, test, vi } from 'vitest'
 import { HyperparamFileMetadata, getHyperparamSource } from '../../../src/lib/sources/hyperparamSource.js'
 
 globalThis.fetch = vi.fn()
 
 describe('getHyperparamSource', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   const endpoint = 'http://localhost:3000'
 
   it('recognizes local files', () => {