Files
SRCmail/stores/__tests__/email-selection.test.ts
T
Linus Rath cf02f587de feat: resizable columns, nav rail overhaul, multi-select & drag-drop, UI polish
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)
2026-03-09 16:46:25 +01:00

125 lines
4.5 KiB
TypeScript

import { describe, it, expect, beforeEach } from 'vitest';
import { useEmailStore } from '../email-store';
function makeEmail(id: string, threadId = `thread-${id}`) {
return {
id,
threadId,
mailboxIds: { inbox: true },
keywords: {},
size: 100,
receivedAt: new Date().toISOString(),
from: [{ name: 'Test', email: 'test@example.com' }],
to: [{ name: 'User', email: 'user@example.com' }],
subject: `Email ${id}`,
preview: 'preview',
hasAttachment: false,
textBody: [],
htmlBody: [],
bodyValues: {},
};
}
describe('email-store selection', () => {
beforeEach(() => {
useEmailStore.setState({
emails: [makeEmail('a'), makeEmail('b'), makeEmail('c'), makeEmail('d'), makeEmail('e')],
selectedEmailIds: new Set(),
lastSelectedEmailId: null,
selectedEmail: null,
});
});
describe('toggleEmailSelection', () => {
it('should add email to selection', () => {
useEmailStore.getState().toggleEmailSelection('b');
expect(useEmailStore.getState().selectedEmailIds.has('b')).toBe(true);
expect(useEmailStore.getState().lastSelectedEmailId).toBe('b');
});
it('should remove email from selection when toggled again', () => {
useEmailStore.getState().toggleEmailSelection('b');
useEmailStore.getState().toggleEmailSelection('b');
expect(useEmailStore.getState().selectedEmailIds.has('b')).toBe(false);
});
it('should support selecting multiple emails', () => {
useEmailStore.getState().toggleEmailSelection('a');
useEmailStore.getState().toggleEmailSelection('c');
const ids = useEmailStore.getState().selectedEmailIds;
expect(ids.has('a')).toBe(true);
expect(ids.has('c')).toBe(true);
expect(ids.size).toBe(2);
});
});
describe('selectRangeEmails', () => {
it('should select range from last selected to target (forward)', () => {
useEmailStore.getState().toggleEmailSelection('b'); // anchor at index 1
useEmailStore.getState().selectRangeEmails('d'); // target at index 3
const ids = useEmailStore.getState().selectedEmailIds;
expect(ids.has('b')).toBe(true);
expect(ids.has('c')).toBe(true);
expect(ids.has('d')).toBe(true);
expect(ids.size).toBe(3);
});
it('should select range backward', () => {
useEmailStore.getState().toggleEmailSelection('d'); // anchor at index 3
useEmailStore.getState().selectRangeEmails('b'); // target at index 1
const ids = useEmailStore.getState().selectedEmailIds;
expect(ids.has('b')).toBe(true);
expect(ids.has('c')).toBe(true);
expect(ids.has('d')).toBe(true);
expect(ids.size).toBe(3);
});
it('should use first email as anchor when no previous selection', () => {
useEmailStore.getState().selectRangeEmails('c'); // no anchor → uses first email 'a'
const ids = useEmailStore.getState().selectedEmailIds;
expect(ids.has('a')).toBe(true);
expect(ids.has('b')).toBe(true);
expect(ids.has('c')).toBe(true);
expect(ids.size).toBe(3);
});
it('should add to existing selection', () => {
useEmailStore.getState().toggleEmailSelection('a');
useEmailStore.getState().toggleEmailSelection('b'); // anchor now at 'b'
useEmailStore.getState().selectRangeEmails('d');
const ids = useEmailStore.getState().selectedEmailIds;
// 'a' still selected, plus b-d range
expect(ids.has('a')).toBe(true);
expect(ids.has('b')).toBe(true);
expect(ids.has('c')).toBe(true);
expect(ids.has('d')).toBe(true);
expect(ids.size).toBe(4);
});
it('should handle single-item range', () => {
useEmailStore.getState().toggleEmailSelection('c');
useEmailStore.getState().selectRangeEmails('c');
const ids = useEmailStore.getState().selectedEmailIds;
expect(ids.has('c')).toBe(true);
expect(ids.size).toBe(1);
});
});
describe('selectAllEmails', () => {
it('should select all emails', () => {
useEmailStore.getState().selectAllEmails();
expect(useEmailStore.getState().selectedEmailIds.size).toBe(5);
});
});
describe('clearSelection', () => {
it('should clear all selections and reset anchor', () => {
useEmailStore.getState().toggleEmailSelection('a');
useEmailStore.getState().toggleEmailSelection('b');
useEmailStore.getState().clearSelection();
expect(useEmailStore.getState().selectedEmailIds.size).toBe(0);
expect(useEmailStore.getState().lastSelectedEmailId).toBeNull();
});
});
});