44 lines
3.1 KiB
TypeScript
44 lines
3.1 KiB
TypeScript
import { render, screen, within } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import FilterPanel from './FilterPanel'
|
|
|
|
const props = {
|
|
selectedMaterialType: '', setSelectedMaterialType: jest.fn(), selectedCategory: '', setSelectedCategory: jest.fn(),
|
|
selectedScene: '', setSelectedScene: jest.fn(), selectedPlatform: '', setSelectedPlatform: jest.fn(),
|
|
selectedLivePlatform: '', setSelectedLivePlatform: jest.fn(), liveDateFrom: '', setLiveDateFrom: jest.fn(), liveDateTo: '', setLiveDateTo: jest.fn(),
|
|
selectedProductCategory: '', setSelectedProductCategory: jest.fn(), selectedMonth: '', setSelectedMonth: jest.fn(),
|
|
sortBy: 'createdAt', setSortBy: jest.fn(), sortOrder: 'desc' as const, setSortOrder: jest.fn(),
|
|
materialTypes: [{ value: '任务-详情', label: '任务-详情', count: 30 }],
|
|
categories: Array.from({ length: 14 }, (_, index) => ({ id: String(index), name: `店铺${index}`, count: 30 - index })),
|
|
scenes: [], platforms: [], productCategories: [], months: [{ value: '2026-09', label: '2026年9月', count: 20 }],
|
|
totalMaterialsCount: 30, materialsCount: 30, isFilterCollapsed: false, setIsFilterCollapsed: jest.fn(), themeColor: '#1a1c1d',
|
|
}
|
|
|
|
beforeEach(() => jest.clearAllMocks())
|
|
|
|
test('长选项列表收起时仍展示已选项，展开后可切换，计数与年份月份语义保留', async () => {
|
|
const user = userEvent.setup()
|
|
render(<FilterPanel {...props} selectedCategory="店铺13" selectedMonth="2026-09" />)
|
|
const shops = screen.getByRole('group', { name: '使用店铺' })
|
|
expect(within(shops).getByRole('button', { name: '店铺13 17' })).toHaveAttribute('aria-pressed', 'true')
|
|
expect(within(shops).queryByRole('button', { name: '店铺12 18' })).not.toBeInTheDocument()
|
|
await user.click(within(shops).getByRole('button', { name: '更多 3' }))
|
|
await user.click(within(shops).getByRole('button', { name: '店铺12 18' }))
|
|
expect(props.setSelectedCategory).toHaveBeenCalledWith('店铺12')
|
|
expect(screen.getByRole('button', { name: '9月 20' })).toHaveAttribute('aria-pressed', 'true')
|
|
await user.click(screen.getByRole('button', { name: '2026年 20' }))
|
|
expect(props.setSelectedMonth).toHaveBeenCalledWith('2026')
|
|
})
|
|
|
|
test('日历限制倒置范围，返回统一日期；直播日期和平台也计入收起后的条件数量', async () => {
|
|
const user = userEvent.setup()
|
|
const { rerender } = render(<FilterPanel {...props} liveDateFrom="2026-09-20" liveDateTo="2026-09-25" selectedLivePlatform="抖音" />)
|
|
await user.click(screen.getByRole('button', { name: /直播结束日期/ }))
|
|
expect(screen.getByRole('button', { name: '2026年9月19日' })).toBeDisabled()
|
|
await user.click(screen.getByRole('button', { name: '2026年9月24日' }))
|
|
expect(props.setLiveDateTo).toHaveBeenCalledWith('2026-09-24')
|
|
rerender(<FilterPanel {...props} isFilterCollapsed liveDateFrom="2026-09-20" selectedLivePlatform="抖音" />)
|
|
expect(screen.queryByRole('region', { name: '素材筛选条件' })).not.toBeInTheDocument()
|
|
expect(screen.getByRole('button', { name: '展开更多筛选' })).toHaveTextContent('2')
|
|
})
|