Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157// src/layout/__tests__/ResizeHandle.test.tsximport { describe, it, expect, vi, afterEach } from 'vitest'import { render, screen, fireEvent, cleanup } from '@testing-library/react'import { ResizeHandle } from '../ResizeHandle'
describe('ResizeHandle', () => { afterEach(() => { cleanup() }) const defaultProps = { currentWidth: 240, minWidth: 160, maxWidth: 400, direction: 'left' as const, onResize: vi.fn(), ariaLabel: 'Resize sidebar', }
describe('rendering', () => { it('renders with correct ARIA attributes', () => { render(<ResizeHandle {...defaultProps} />) const handle = screen.getByRole('separator') expect(handle).toHaveAttribute('aria-orientation', 'vertical') expect(handle).toHaveAttribute('aria-valuenow', '240') expect(handle).toHaveAttribute('aria-valuemin', '160') expect(handle).toHaveAttribute('aria-valuemax', '400') expect(handle).toHaveAttribute('aria-label', 'Resize sidebar') })
it('is focusable', () => { render(<ResizeHandle {...defaultProps} />) const handle = screen.getByRole('separator') expect(handle).toHaveAttribute('tabIndex', '0') }) })
describe('keyboard interaction', () => { it('increases width with ArrowRight when direction is left', async () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} onResize={onResize} />) const handle = screen.getByRole('separator') handle.focus() fireEvent.keyDown(handle, { key: 'ArrowRight' }) expect(onResize).toHaveBeenCalledWith(250) // 240 + 10 })
it('decreases width with ArrowLeft when direction is left', async () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} onResize={onResize} />) const handle = screen.getByRole('separator') handle.focus() fireEvent.keyDown(handle, { key: 'ArrowLeft' }) expect(onResize).toHaveBeenCalledWith(230) // 240 - 10 })
it('uses larger step with Shift key', async () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} onResize={onResize} />) const handle = screen.getByRole('separator') handle.focus() fireEvent.keyDown(handle, { key: 'ArrowRight', shiftKey: true }) expect(onResize).toHaveBeenCalledWith(290) // 240 + 50 })
it('clamps to minWidth', async () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} currentWidth={170} onResize={onResize} />) const handle = screen.getByRole('separator') handle.focus() fireEvent.keyDown(handle, { key: 'ArrowLeft' }) expect(onResize).toHaveBeenCalledWith(160) // Clamped to min })
it('clamps to maxWidth', async () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} currentWidth={395} onResize={onResize} />) const handle = screen.getByRole('separator') handle.focus() fireEvent.keyDown(handle, { key: 'ArrowRight' }) expect(onResize).toHaveBeenCalledWith(400) // Clamped to max }) })
describe('pointer interaction', () => { it('resizes the left sidebar with a touch pointer and stops on release', () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} onResize={onResize} />) const handle = screen.getByRole('separator')
fireEvent.pointerDown(handle, { pointerId: 1, pointerType: 'touch', isPrimary: true, clientX: 200 }) fireEvent.pointerMove(document, { pointerId: 1, clientX: 220 }) expect(onResize).toHaveBeenCalledWith(260) fireEvent.pointerUp(document, { pointerId: 1 }) fireEvent.pointerMove(document, { pointerId: 1, clientX: 250 }) expect(onResize).toHaveBeenCalledTimes(1) expect(handle).toHaveAttribute('data-resizing', 'false') })
it('resizes the right panel in the opposite direction and cancels on blur', () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} direction="right" onResize={onResize} />) const handle = screen.getByRole('separator')
fireEvent.pointerDown(handle, { pointerId: 2, pointerType: 'mouse', isPrimary: true, button: 0, clientX: 200 }) fireEvent.pointerMove(document, { pointerId: 2, clientX: 180 }) expect(onResize).toHaveBeenCalledWith(260) fireEvent.blur(window) fireEvent.pointerMove(document, { pointerId: 2, clientX: 160 }) expect(onResize).toHaveBeenCalledTimes(1) expect(handle).toHaveAttribute('data-resizing', 'false') }) })
describe('direction right (right panel)', () => { it('increases width with ArrowLeft when direction is right', async () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} direction="right" onResize={onResize} />) const handle = screen.getByRole('separator') handle.focus() fireEvent.keyDown(handle, { key: 'ArrowLeft' }) expect(onResize).toHaveBeenCalledWith(250) // 240 + 10 })
it('decreases width with ArrowRight when direction is right', async () => { const onResize = vi.fn() render(<ResizeHandle {...defaultProps} direction="right" onResize={onResize} />) const handle = screen.getByRole('separator') handle.focus() fireEvent.keyDown(handle, { key: 'ArrowRight' }) expect(onResize).toHaveBeenCalledWith(230) // 240 - 10 }) })})