Folder.test.tsx

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 { 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'

const endpoint = 'http://localhost:3000'
const mockFiles: HyperparamFileMetadata[] = [
  { key: 'folder1/', lastModified: '2022-01-01T12:00:00Z' },
  { key: 'file1.txt', fileSize: 8196, lastModified: '2023-01-01T12:00:00Z' },
]

const config: Config = {
  routes: {
    getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,
  },
}

globalThis.fetch = vi.fn()
globalThis.console.error = vi.fn()

describe('Folder Component', () => {
  test.for([
    '',
    'subfolder/',
  ])('fetches file data and displays files on mount', async (path) => {
    vi.mocked(fetch).mockResolvedValueOnce({
      json: () => Promise.resolve(mockFiles),
      ok: true,
    } as Response)

    const source = getHyperparamSource(path, { endpoint })
    assert(source?.kind === 'directory')

    const { findByText, getByText } = render(
      <ConfigProvider value={config}>
        <Folder source={source} />
      </ConfigProvider>)

    const folderLink = await findByText('folder1/')
    expect(folderLink.closest('a')?.getAttribute('href')).toBe(`/files?key=${path}folder1/`)

    getByText('/')

    const fileLink = getByText('file1.txt')
    expect(fileLink.closest('a')?.getAttribute('href')).toBe(`/files?key=${path}file1.txt`)
    getByText('8.0 kb')
    getByText('1/1/2023')
  })

  it('displays the spinner while loading', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      // resolve in 50ms
      json: () => new Promise(resolve => setTimeout(() => { resolve([]) }, 50)),
      ok: true,
    } as Response)

    const source = getHyperparamSource('', { endpoint })
    assert(source?.kind === 'directory')

    const { getByText } = await act(() => render(<Folder source={source} />))
    getByText('Loading...')
  })

  it('handles file listing errors', async () => {
    const errorMessage = 'Failed to fetch'
    vi.mocked(fetch).mockResolvedValueOnce({
      text: () => Promise.resolve(errorMessage),
      ok: false,
    } as Response)

    const source = getHyperparamSource('test-prefix/', { endpoint })
    assert(source?.kind === 'directory')

    const { findByText, queryByText } = render(<Folder source={source} />)

    await waitFor(() => { expect(fetch).toHaveBeenCalled() })

    await findByText('Error: ' + errorMessage)
    expect(queryByText('file1.txt')).toBeNull()
    expect(queryByText('folder1/')).toBeNull()
    expect(console.error).toHaveBeenCalledWith(new Error(errorMessage))
  })

  it('filters files based on search query', async () => {
    const mockFiles: FileMetadata[] = [
      { sourceId: 'folder1', name: 'folder1/', kind: 'directory', lastModified: '2023-01-01T00:00:00Z' },
      { sourceId: 'file1.txt', name: 'file1.txt', kind: 'file', fileSize: 8196, lastModified: '2023-01-01T00:00:00Z' },
      { sourceId: 'report.pdf', name: 'report.pdf', kind: 'file', fileSize: 10240, lastModified: '2023-01-02T00:00:00Z' },
    ]
    const dirSource: DirSource = {
      sourceId: 'test-source',
      sourceParts: [{ text: 'test-source', sourceId: 'test-source' }],
      kind: 'directory',
      listFiles: () => Promise.resolve(mockFiles),
    }
    const { getByPlaceholderText, findByText, getByText, queryByText } = render(<Folder source={dirSource} />)

    // Type a search query
    const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
    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
    await user.type(searchInput, '{Escape}')

    await findByText('report.pdf')
    getByText('folder1/')
    getByText('file1.txt')
  })

  it('hitting enter on single search result navigates to file', async () => {
    // Mock location.href
    const location = { href: '' }
    Object.defineProperty(window, 'location', {
      writable: true,
      value: location,
    })
    const mockFiles: FileMetadata[] = [
      { sourceId: 'file1.txt', name: 'file1.txt', kind: 'file', fileSize: 8196, lastModified: '2023-01-01T00:00:00Z' },
      { sourceId: 'file2.txt', name: 'file2.txt', kind: 'file', fileSize: 4096, lastModified: '2023-02-02T00:00:00Z' },
    ]
    const dirSource: DirSource = {
      sourceId: 'test-source',
      sourceParts: [{ text: 'test-source', sourceId: 'test-source' }],
      kind: 'directory',
      listFiles: () => Promise.resolve(mockFiles),
    }
    const { getByPlaceholderText, findByText } = render(<Folder source={dirSource} />)

    // Type a search query and hit enter
    const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
    const user = userEvent.setup()
    await user.type(searchInput, 'file1')
    await findByText('file1.txt')

    await user.type(searchInput, '{Enter}')
    expect(location.href).toBe('/files?key=file1.txt')
  })

  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',
      listFiles: async () => {
        await fetch('something') // to ensure we wait for loading
        return []
      },
    }
    const { getByPlaceholderText } = render(<Folder source={dirSource} />)

    // Wait for component to settle
    await waitFor(() => {
      expect(fetch).toHaveBeenCalled()
    })

    const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
    const user = userEvent.setup()

    // By default, the search box is already focused in this test
    expect(document.activeElement).toBe(searchInput)

    // Typing inside the search box should work including /
    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)

    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)
  })
})