83 lines
3.6 KiB
TypeScript
83 lines
3.6 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
|
|
import ProductPackageDetail from './ProductPackageDetail'
|
|
|
|
const material = {
|
|
id: 'material-1',
|
|
taskNo: 'TASK-001',
|
|
productModel: 'GBSFY-SJZ0024',
|
|
categoryName: '顾家',
|
|
sceneName: '客厅',
|
|
taskStatus: 'ready',
|
|
assets: [
|
|
{ id: 'main-1', assetType: 'main-preview', fileUrl: '/main-1.jpg', fileName: 'main-1.jpg', fileSize: 100, sortOrder: 0 },
|
|
{ id: 'main-2', assetType: 'main-preview', fileUrl: '/main-2.jpg', fileName: 'main-2.jpg', fileSize: 100, sortOrder: 1 },
|
|
{ id: 'sku-1', assetType: 'sku-preview', fileUrl: '/sku-1.jpg', fileName: 'sku-1.jpg', fileSize: 100, sortOrder: 0 },
|
|
{ id: 'sku-2', assetType: 'sku-preview', fileUrl: '/sku-2.jpg', fileName: 'sku-2.jpg', fileSize: 100, sortOrder: 1 },
|
|
{ id: 'detail-1', assetType: 'detail-preview', fileUrl: '/detail-1.jpg', fileName: 'detail-1.jpg', fileSize: 100, sortOrder: 0 },
|
|
{ id: 'detail-2', assetType: 'detail-preview', fileUrl: '/detail-2.jpg', fileName: 'detail-2.jpg', fileSize: 100, sortOrder: 1 },
|
|
{ id: 'detail-3', assetType: 'detail-preview', fileUrl: '/detail-3.jpg', fileName: 'detail-3.jpg', fileSize: 100, sortOrder: 2 },
|
|
],
|
|
}
|
|
|
|
describe('ProductPackageDetail task-detail editing affordances', () => {
|
|
test('renders append and insert controls with exact positions', async () => {
|
|
const user = userEvent.setup()
|
|
const onRequestAppend = jest.fn()
|
|
const onRequestInsert = jest.fn()
|
|
|
|
render(
|
|
<ProductPackageDetail
|
|
material={material}
|
|
canDownloadSource={false}
|
|
onDownload={jest.fn()}
|
|
canManageAssets
|
|
onRequestReplace={jest.fn()}
|
|
onRequestRename={jest.fn()}
|
|
onRequestDelete={jest.fn()}
|
|
onRequestAppend={onRequestAppend}
|
|
onRequestInsert={onRequestInsert}
|
|
/>,
|
|
)
|
|
|
|
expect(screen.getByRole('button', { name: '编辑图片 main-1.jpg' })).toHaveClass('opacity-100')
|
|
expect(screen.getByRole('button', { name: '追加图片，加入主图末尾' })).toBeInTheDocument()
|
|
expect(screen.getByRole('button', { name: '追加图片，加入 SKU 末尾' })).toBeInTheDocument()
|
|
|
|
const insertButtons = screen.getAllByRole('button', { name: /在详情图 \d 和详情图 \d 之间插入图片/ })
|
|
expect(insertButtons).toHaveLength(2)
|
|
expect(insertButtons[0]).toHaveClass('absolute', 'h-10', 'w-10')
|
|
expect(insertButtons[0]).not.toHaveClass('md:opacity-0')
|
|
expect(insertButtons[0].parentElement).toHaveClass('h-0')
|
|
expect(screen.queryByText('在这里插入图片')).not.toBeInTheDocument()
|
|
|
|
await user.click(screen.getByRole('button', { name: '追加图片，加入主图末尾' }))
|
|
expect(onRequestAppend).toHaveBeenCalledWith('main')
|
|
|
|
await user.click(insertButtons[0])
|
|
expect(onRequestInsert).toHaveBeenCalledWith({
|
|
group: 'detail',
|
|
afterAssetId: 'detail-1',
|
|
beforeAssetId: 'detail-2',
|
|
})
|
|
})
|
|
|
|
test('empty main and sku groups still expose their append controls', () => {
|
|
render(
|
|
<ProductPackageDetail
|
|
material={{ ...material, assets: material.assets.filter((asset) => asset.assetType === 'detail-preview') }}
|
|
canDownloadSource={false}
|
|
onDownload={jest.fn()}
|
|
canManageAssets
|
|
onRequestAppend={jest.fn()}
|
|
/>,
|
|
)
|
|
|
|
expect(screen.getByText('主图 (0)')).toBeInTheDocument()
|
|
expect(screen.getByRole('button', { name: '追加图片，加入主图末尾' })).toBeInTheDocument()
|
|
expect(screen.getByText('SKU图 (0)')).toBeInTheDocument()
|
|
expect(screen.getByRole('button', { name: '追加图片，加入 SKU 末尾' })).toBeInTheDocument()
|
|
})
|
|
})
|