mirror of
https://wget.la/https://github.com/Wxw-Gu/WechatExplorer
synced 2026-08-21 21:47:00 +08:00
74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { ChatImageViewer } from '../../src/renderer/src/components/chat/ChatImageViewer'
|
|
import { TooltipProvider } from '../../src/renderer/src/components/ui'
|
|
|
|
const imageUrl =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9ZQmcAAAAASUVORK5CYII='
|
|
|
|
function Harness({ onClose = vi.fn() }: { onClose?: () => void }): React.ReactElement {
|
|
const [open, setOpen] = useState(false)
|
|
return (
|
|
<TooltipProvider>
|
|
<button type="button" onClick={() => setOpen(true)}>
|
|
查看图片
|
|
</button>
|
|
{open && (
|
|
<ChatImageViewer
|
|
imageUrl={imageUrl}
|
|
onClose={() => {
|
|
onClose()
|
|
setOpen(false)
|
|
}}
|
|
/>
|
|
)}
|
|
</TooltipProvider>
|
|
)
|
|
}
|
|
|
|
describe('ChatImageViewer', () => {
|
|
it('zooms, rotates, drags, and resets the image', async () => {
|
|
const user = userEvent.setup()
|
|
render(<Harness />)
|
|
await user.click(screen.getByRole('button', { name: '查看图片' }))
|
|
const image = screen.getByAltText('图片预览')
|
|
const stage = screen.getByLabelText('图片查看区域')
|
|
|
|
expect(screen.getByText('100%')).toBeVisible()
|
|
await user.click(screen.getByRole('button', { name: '放大' }))
|
|
expect(screen.getByText('110%')).toBeVisible()
|
|
await user.click(screen.getByRole('button', { name: '右旋转' }))
|
|
expect(image).toHaveStyle({ transform: 'translate(0px, 0px) scale(1.1) rotate(90deg)' })
|
|
|
|
fireEvent.mouseDown(stage, { clientX: 10, clientY: 15 })
|
|
fireEvent.mouseMove(stage, { clientX: 35, clientY: 45 })
|
|
fireEvent.mouseUp(stage)
|
|
expect(image).toHaveStyle({ transform: 'translate(25px, 30px) scale(1.1) rotate(90deg)' })
|
|
|
|
await user.click(screen.getByRole('button', { name: '重置图片' }))
|
|
expect(screen.getByText('100%')).toBeVisible()
|
|
expect(image).toHaveStyle({ transform: 'translate(0px, 0px) scale(1) rotate(0deg)' })
|
|
})
|
|
|
|
it('closes with Escape or the overlay and restores focus', async () => {
|
|
const user = userEvent.setup()
|
|
const onClose = vi.fn()
|
|
render(<Harness onClose={onClose} />)
|
|
const opener = screen.getByRole('button', { name: '查看图片' })
|
|
|
|
await user.click(opener)
|
|
await user.keyboard('{Escape}')
|
|
expect(screen.queryByRole('dialog', { name: '图片查看' })).not.toBeInTheDocument()
|
|
await waitFor(() => expect(opener).toHaveFocus())
|
|
|
|
await user.click(opener)
|
|
const dialog = screen.getByRole('dialog', { name: '图片查看' })
|
|
await user.click(dialog.previousElementSibling as HTMLElement)
|
|
expect(screen.queryByRole('dialog', { name: '图片查看' })).not.toBeInTheDocument()
|
|
await waitFor(() => expect(opener).toHaveFocus())
|
|
expect(onClose).toHaveBeenCalledTimes(2)
|
|
})
|
|
})
|