T08c: Frontend Mail UI + Global Search UI — 44 tests, tsc clean, vite build pass
- Mail page: 3-pane layout (folder tree + mail list + reading pane) - Compose modal: rich text editor (bold/italic/link), template picker, reply/forward pre-fill - Mail settings: accounts, signatures, rules, labels, vacation, PGP (6 tabs) - Shared mailbox selector: switch between personal + shared accounts - Mail search bar + attachment download + create-event-from-mail - Global search: tabs for companies/contacts/mails/files/events - Search autocomplete in TopBar (existing SearchDropdown) - API client: mail.ts (all endpoints) - Routes: /mail, /mail/settings - i18n: de.json + en.json mail + search translations - 44 new tests (4 test files), full regression 318/318 pass - tsc --noEmit: 0 errors, vite build: 267 modules
This commit is contained in:
leocrm-bot
@@ -0,0 +1,162 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
|
||||
vi.mock('@/api/mail', () => ({
|
||||
fetchAccounts: vi.fn().mockResolvedValue([
|
||||
{ id: 'acc1', email: 'test@example.com', display_name: 'Test User', is_shared: false, is_active: true, imap_host: '', imap_port: 993, smtp_host: '', smtp_port: 587 },
|
||||
]),
|
||||
fetchFolders: vi.fn().mockResolvedValue([
|
||||
{ id: 'f1', account_id: 'acc1', name: 'INBOX', parent_id: null, unread_count: 2, total_count: 5, children: [] },
|
||||
{ id: 'f2', account_id: 'acc1', name: 'Sent', parent_id: null, unread_count: 0, total_count: 10, children: [] },
|
||||
]),
|
||||
fetchMails: vi.fn().mockResolvedValue({
|
||||
mails: [
|
||||
{ id: 'm1', folder_id: 'f1', account_id: 'acc1', from_address: 'sender@example.com', from_name: 'Sender', to_addresses: ['test@example.com'], cc_addresses: [], bcc_addresses: [], subject: 'Test Subject', body_text: 'Hello', body_html: null, sanitized_html: '<p>Hello</p>', date: '2026-01-01T10:00:00Z', is_seen: false, is_flagged: false, is_answered: false, has_attachments: false, labels: [] },
|
||||
{ id: 'm2', folder_id: 'f1', account_id: 'acc1', from_address: 'sender2@example.com', from_name: 'Sender 2', to_addresses: ['test@example.com'], cc_addresses: [], bcc_addresses: [], subject: 'Another Subject', body_text: 'World', body_html: null, sanitized_html: '<p>World</p>', date: '2026-01-01T11:00:00Z', is_seen: true, is_flagged: true, is_answered: false, has_attachments: true, labels: [] },
|
||||
],
|
||||
total: 2,
|
||||
page: 1,
|
||||
page_size: 25,
|
||||
}),
|
||||
getMail: vi.fn().mockResolvedValue({
|
||||
id: 'm1', folder_id: 'f1', account_id: 'acc1', from_address: 'sender@example.com', from_name: 'Sender', to_addresses: ['test@example.com'], cc_addresses: [], bcc_addresses: [], subject: 'Test Subject', body_text: 'Hello', body_html: '<p>Hello</p>', sanitized_html: '<p>Hello</p>', date: '2026-01-01T10:00:00Z', is_seen: false, is_flagged: false, is_answered: false, has_attachments: false, attachments: [], labels: [],
|
||||
}),
|
||||
sendMail: vi.fn().mockResolvedValue({ id: 'm3', success: true }),
|
||||
replyMail: vi.fn().mockResolvedValue({ id: 'm3', success: true }),
|
||||
forwardMail: vi.fn().mockResolvedValue({ id: 'm3', success: true }),
|
||||
updateFlags: vi.fn().mockResolvedValue(undefined),
|
||||
createEventFromMail: vi.fn().mockResolvedValue({ id: 'e1', success: true }),
|
||||
downloadAttachment: vi.fn().mockResolvedValue(new Blob(['test'])),
|
||||
fetchSignatures: vi.fn().mockResolvedValue([]),
|
||||
searchMails: vi.fn().mockResolvedValue({ mails: [], total: 0, page: 1, page_size: 25 }),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Toast', () => ({
|
||||
useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }),
|
||||
}));
|
||||
|
||||
import { MailPage } from '@/pages/Mail';
|
||||
|
||||
function renderWithRouter() {
|
||||
return render(<MemoryRouter><MailPage /></MemoryRouter>);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('MailPage', () => {
|
||||
it('renders mail page after loading', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-page')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders folder tree pane', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-folder-pane')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders mail list pane', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-list-pane')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders mail detail pane', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-detail-pane')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders compose button', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('compose-btn')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders shared mailbox selector', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('shared-mailbox-selector')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders mail search bar', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-search-bar')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders folders after loading', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('INBOX')).toBeInTheDocument();
|
||||
expect(screen.getByText('Sent')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders mails after loading', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Subject')).toBeInTheDocument();
|
||||
expect(screen.getByText('Another Subject')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows compose modal when compose button is clicked', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
const btn = screen.getByTestId('compose-btn');
|
||||
fireEvent.click(btn);
|
||||
expect(screen.getByTestId('compose-modal')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows compose toolbar with bold and italic buttons', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
const btn = screen.getByTestId('compose-btn');
|
||||
fireEvent.click(btn);
|
||||
expect(screen.getByTestId('compose-toolbar')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders mail detail empty state initially', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-detail-empty')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders mail detail when mail is clicked', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Subject')).toBeInTheDocument();
|
||||
});
|
||||
fireEvent.click(screen.getByText('Test Subject'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-detail')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows reply and forward buttons in mail detail', async () => {
|
||||
renderWithRouter();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Subject')).toBeInTheDocument();
|
||||
});
|
||||
fireEvent.click(screen.getByText('Test Subject'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mail-detail-toolbar')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user