Linus Rath
cf02f587de
Resizable Columns - Add ResizeHandle component with mouse drag, keyboard (Arrow keys), and double-click to reset to default width - Add sidebarWidth/emailListWidth to ui-store with clamping + persistence - Wire resize handles between sidebar/email-list panels on desktop Navigation Rail Overhaul - Move StorageQuotaCircle, push-status, sign-out from Sidebar to NavigationRail - Interactive SVG ring with popover breakdown (used/free/total) - Sidebar collapse state lifted to ui-store - Show total email count per mailbox alongside unread badge Email Multi-Selection & Drag-and-Drop - Ctrl+Click (toggle) and Shift+Click (range) on all list items - Add selectRangeEmails and lastSelectedEmailId to email-store - Enable drag-and-drop on thread items and thread headers - useEmailDrag accepts optional threadEmails for full-thread drag Email Viewer Layout - Remove card wrapper for cleaner full-width reading - Always render HTML body when available - Adjust skeleton loader to match flat layout Modal & UI Polish - Standardise backdrops, close buttons, padding, border-radius, transitions - Migrate template-string classNames to cn() in settings - Unify focus-ring token to ring-ring on form controls i18n - Add storage_used/free/total keys to all 8 locales Dev Mock JMAP Server (new, gated by DEV_MOCK_JMAP=true) - Session, Mailbox/Email/Thread/Identity CRUD, back-references, upload - GET /download with Content-Disposition, GET /eventsource SSE Tests (46 new) - ui-store (13), email-selection (10), resize-handle (9), mock-server (14)
107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest';
|
|
import { render, fireEvent } from '@testing-library/react';
|
|
import { ResizeHandle } from '../resize-handle';
|
|
|
|
describe('ResizeHandle', () => {
|
|
it('should render with separator role', () => {
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={vi.fn()} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
expect(handle).toBeInTheDocument();
|
|
expect(handle).toHaveAttribute('aria-orientation', 'vertical');
|
|
expect(handle).toHaveAttribute('tabindex', '0');
|
|
});
|
|
|
|
describe('keyboard interaction', () => {
|
|
it('should call onResize with negative delta on ArrowLeft', () => {
|
|
const onResize = vi.fn();
|
|
const onResizeEnd = vi.fn();
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={onResize} onResizeEnd={onResizeEnd} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
fireEvent.keyDown(handle, { key: 'ArrowLeft' });
|
|
expect(onResize).toHaveBeenCalledWith(-10);
|
|
expect(onResizeEnd).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should call onResize with positive delta on ArrowRight', () => {
|
|
const onResize = vi.fn();
|
|
const onResizeEnd = vi.fn();
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={onResize} onResizeEnd={onResizeEnd} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
fireEvent.keyDown(handle, { key: 'ArrowRight' });
|
|
expect(onResize).toHaveBeenCalledWith(10);
|
|
expect(onResizeEnd).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not respond to other keys', () => {
|
|
const onResize = vi.fn();
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={onResize} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
fireEvent.keyDown(handle, { key: 'ArrowUp' });
|
|
fireEvent.keyDown(handle, { key: 'Enter' });
|
|
fireEvent.keyDown(handle, { key: 'a' });
|
|
expect(onResize).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('double-click', () => {
|
|
it('should call onDoubleClick when provided', () => {
|
|
const onDoubleClick = vi.fn();
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={vi.fn()} onDoubleClick={onDoubleClick} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
fireEvent.doubleClick(handle);
|
|
expect(onDoubleClick).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it('should not error when onDoubleClick is not provided', () => {
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={vi.fn()} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
expect(() => fireEvent.doubleClick(handle)).not.toThrow();
|
|
});
|
|
});
|
|
|
|
describe('mouse drag', () => {
|
|
it('should call onResize during mousemove after mousedown', () => {
|
|
const onResize = vi.fn();
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={onResize} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
|
|
fireEvent.mouseDown(handle, { clientX: 100 });
|
|
fireEvent.mouseMove(document, { clientX: 115 });
|
|
expect(onResize).toHaveBeenCalledWith(15);
|
|
});
|
|
|
|
it('should call onResizeEnd on mouseup', () => {
|
|
const onResizeEnd = vi.fn();
|
|
const { getByRole } = render(
|
|
<ResizeHandle onResize={vi.fn()} onResizeEnd={onResizeEnd} />
|
|
);
|
|
const handle = getByRole('separator');
|
|
|
|
fireEvent.mouseDown(handle, { clientX: 100 });
|
|
fireEvent.mouseUp(document);
|
|
expect(onResizeEnd).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it('should not call onResize on mousemove without mousedown', () => {
|
|
const onResize = vi.fn();
|
|
render(<ResizeHandle onResize={onResize} />);
|
|
fireEvent.mouseMove(document, { clientX: 200 });
|
|
expect(onResize).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|