81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
|
|
|
import DetailImageSorter from '@/components/upload/DetailImageSorter'
|
|
|
|
const images = [
|
|
{
|
|
id: 'detail-1',
|
|
file: new File(['first'], '1.jpg', { type: 'image/jpeg' }),
|
|
preview: 'blob:first',
|
|
sortOrder: 0,
|
|
},
|
|
{
|
|
id: 'detail-2',
|
|
file: new File(['second'], '2.jpg', { type: 'image/jpeg' }),
|
|
preview: 'blob:second',
|
|
sortOrder: 1,
|
|
},
|
|
]
|
|
|
|
describe('DetailImageSorter', () => {
|
|
test('外部文件拖到已有详情图上时应继续交给外层上传区域处理', () => {
|
|
const onOuterDrop = jest.fn()
|
|
|
|
render(
|
|
<div onDrop={onOuterDrop}>
|
|
<DetailImageSorter images={images} onChange={jest.fn()} onRemove={jest.fn()} />
|
|
</div>,
|
|
)
|
|
|
|
const externalFile = new File(['new-detail'], '3.jpg', { type: 'image/jpeg' })
|
|
const thumbnail = screen.getByAltText('缩略图 1')
|
|
|
|
fireEvent.dragOver(thumbnail, {
|
|
dataTransfer: {
|
|
files: [externalFile],
|
|
types: ['Files'],
|
|
dropEffect: 'copy',
|
|
},
|
|
})
|
|
fireEvent.drop(thumbnail, {
|
|
dataTransfer: {
|
|
files: [externalFile],
|
|
types: ['Files'],
|
|
dropEffect: 'copy',
|
|
},
|
|
})
|
|
|
|
expect(onOuterDrop).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
test('详情图内部拖拽仍应完成排序且不触发外层文件上传', () => {
|
|
const onChange = jest.fn()
|
|
const onOuterDrop = jest.fn()
|
|
|
|
render(
|
|
<div onDrop={onOuterDrop}>
|
|
<DetailImageSorter images={images} onChange={onChange} onRemove={jest.fn()} />
|
|
</div>,
|
|
)
|
|
|
|
const firstThumbnail = screen.getByAltText('缩略图 1')
|
|
const secondThumbnail = screen.getByAltText('缩略图 2')
|
|
const dataTransfer = {
|
|
files: [],
|
|
types: [],
|
|
effectAllowed: 'none',
|
|
dropEffect: 'none',
|
|
}
|
|
|
|
fireEvent.dragStart(firstThumbnail, { dataTransfer })
|
|
fireEvent.dragOver(secondThumbnail, { dataTransfer })
|
|
fireEvent.drop(secondThumbnail, { dataTransfer })
|
|
|
|
expect(onChange).toHaveBeenCalledWith([
|
|
expect.objectContaining({ id: 'detail-2', sortOrder: 0 }),
|
|
expect.objectContaining({ id: 'detail-1', sortOrder: 1 }),
|
|
])
|
|
expect(onOuterDrop).not.toHaveBeenCalled()
|
|
})
|
|
})
|