54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
import { render, screen, within } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
|
|
import MaterialTypeSelect from '@/components/upload/MaterialTypeSelect'
|
|
|
|
const options = ['3D场景', '音乐', '直播切片', '任务-其他']
|
|
|
|
function renderSelect(counts: Record<string, number> = {}) {
|
|
const onChange = jest.fn()
|
|
render(
|
|
<>
|
|
<span id="upload-material-type-label">素材类型 *</span>
|
|
<MaterialTypeSelect id="upload-material-type" value="3D场景" options={options} counts={counts} onChange={onChange} />
|
|
</>,
|
|
)
|
|
return onChange
|
|
}
|
|
|
|
test('按首页数量降序排列可选类型，同数量保持原顺序，选择后关闭', async () => {
|
|
const user = userEvent.setup()
|
|
const onChange = renderSelect({ '3D场景': 2, '音乐': 12, '直播切片': 12, '任务-其他': 0 })
|
|
|
|
await user.click(screen.getByRole('button', { name: '素材类型 *' }))
|
|
const list = screen.getByRole('listbox', { name: '素材类型 *' })
|
|
expect(within(list).getAllByRole('option').map((option) => option.getAttribute('aria-label')))
|
|
.toEqual(['音乐', '直播切片', '3D场景', '任务-其他'])
|
|
expect(within(list).getByText('按素材数量排序')).toBeInTheDocument()
|
|
|
|
await user.click(within(list).getByRole('option', { name: '直播切片' }))
|
|
expect(onChange).toHaveBeenCalledWith('直播切片')
|
|
expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
|
|
})
|
|
|
|
test('无数量时保留原顺序，键盘可操作并用 Escape 关闭', async () => {
|
|
const user = userEvent.setup()
|
|
const onChange = renderSelect()
|
|
const trigger = screen.getByRole('button', { name: '素材类型 *' })
|
|
|
|
trigger.focus()
|
|
await user.keyboard('{ArrowDown}')
|
|
const list = screen.getByRole('listbox')
|
|
expect(within(list).getAllByRole('option').map((option) => option.getAttribute('aria-label'))).toEqual(options)
|
|
expect(within(list).queryByText('按素材数量排序')).not.toBeInTheDocument()
|
|
|
|
await user.keyboard('{End}{Enter}')
|
|
expect(onChange).toHaveBeenCalledWith('任务-其他')
|
|
expect(trigger).toHaveFocus()
|
|
|
|
await user.click(trigger)
|
|
await user.keyboard('{Escape}')
|
|
expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
|
|
expect(trigger).toHaveFocus()
|
|
})
|