File size: 2,888 Bytes
7312c42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import type { ReactNode } from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { MultiTrackTaskMarker } from '@/components/widgets/multitrack/MultiTrackTaskMarker'
vi.mock('@/components/ui/context-menu', () => ({
ContextMenu: ({ children }: { children: ReactNode }) => <>{children}</>,
ContextMenuTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
ContextMenuContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
ContextMenuItem: ({ children, onClick }: { children: ReactNode; onClick?: () => void }) => (
<button type="button" onClick={onClick}>{children}</button>
),
}))
vi.mock('@/components/ui/tooltip', () => ({
Tooltip: ({ children }: { children: ReactNode }) => <>{children}</>,
TooltipTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
TooltipContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
}))
describe('MultiTrackTaskMarker', () => {
it('selects a marker on the ruler and deletes it from the context menu', () => {
const onSelect = vi.fn()
const onDragStart = vi.fn()
const onDelete = vi.fn()
const onParentClick = vi.fn()
render(
<div onClick={onParentClick}>
<MultiTrackTaskMarker
marker={{ id: 'marker-1', frame: 48 }}
markerNumber={1}
frameRate={24}
left={128}
selected
dragging={false}
onSelect={onSelect}
onDragStart={onDragStart}
onDelete={onDelete}
/>
</div>,
)
const marker = screen.getByRole('button', { name: 'Task marker at frame 48' })
expect(marker.style.left).toBe('128px')
expect(marker.style.color).toBe('var(--highlight)')
expect(marker.getAttribute('aria-pressed')).toBe('true')
expect(document.querySelector('.lucide-task-marker-icon')).not.toBeNull()
expect(screen.getByText('Segment 01')).not.toBeNull()
expect(screen.getByText('00:02:00')).not.toBeNull()
fireEvent.mouseDown(marker)
fireEvent.click(marker)
expect(onSelect).toHaveBeenCalledWith('marker-1')
expect(onDragStart).toHaveBeenCalledWith('marker-1', 0)
expect(onParentClick).not.toHaveBeenCalled()
fireEvent.click(screen.getByRole('button', { name: 'Delete task marker' }))
expect(onDelete).toHaveBeenCalledWith('marker-1')
})
it('uses accumulated minutes instead of an hour field in the marker time', () => {
render(
<MultiTrackTaskMarker
marker={{ id: 'marker-long', frame: (60 * 60 + 2) * 24 }}
markerNumber={2}
frameRate={24}
left={128}
selected={false}
dragging={false}
onSelect={vi.fn()}
onDragStart={vi.fn()}
onDelete={vi.fn()}
/>,
)
expect(screen.getByText('60:02:00')).not.toBeNull()
})
})
|