File size: 3,140 Bytes
fbf73ff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { server } from '../../mocks/server'
import { errorHandlers } from '../../mocks/handlers'
import { CaseSelector } from '../CaseSelector'
describe('CaseSelector', () => {
const mockOnSelectCase = vi.fn()
beforeEach(() => {
mockOnSelectCase.mockClear()
})
it('shows loading state initially', () => {
render(
<CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />
)
expect(screen.getByText(/loading/i)).toBeInTheDocument()
})
it('renders select after loading', async () => {
render(
<CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />
)
await waitFor(() => {
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
})
it('displays all cases as options', async () => {
render(
<CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />
)
await waitFor(() => {
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
expect(screen.getByRole('option', { name: /sub-stroke0001/i })).toBeInTheDocument()
expect(screen.getByRole('option', { name: /sub-stroke0002/i })).toBeInTheDocument()
expect(screen.getByRole('option', { name: /sub-stroke0003/i })).toBeInTheDocument()
})
it('has placeholder option', async () => {
render(
<CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />
)
await waitFor(() => {
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
expect(screen.getByRole('option', { name: /choose a case/i })).toBeInTheDocument()
})
it('calls onSelectCase when case selected', async () => {
const user = userEvent.setup()
render(
<CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />
)
await waitFor(() => {
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
await user.selectOptions(screen.getByRole('combobox'), 'sub-stroke0001')
expect(mockOnSelectCase).toHaveBeenCalledWith('sub-stroke0001')
})
it('shows selected case value', async () => {
render(
<CaseSelector
selectedCase="sub-stroke0002"
onSelectCase={mockOnSelectCase}
/>
)
await waitFor(() => {
expect(screen.getByRole('combobox')).toHaveValue('sub-stroke0002')
})
})
it('shows error state on API failure', async () => {
server.use(errorHandlers.casesServerError)
render(
<CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />
)
await waitFor(() => {
expect(screen.getByText(/failed to load/i)).toBeInTheDocument()
})
})
it('applies correct styling', async () => {
render(
<CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />
)
await waitFor(() => {
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
const container = screen.getByRole('combobox').closest('div')
expect(container).toHaveClass('bg-gray-800')
})
})
|