mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 21:31:46 +00:00
test(client): expand frontend test suite to 69.1% coverage
Add and extend tests across 32 files (+10 595 lines) covering Admin panels (AuditLog, Backup, DevNotifications, GitHub), Collab (Chat, Notes, Panel, Polls), Planner (DayDetailPanel, DayPlanSidebar), Settings (DisplaySettings, Integrations, MapSettings), Files (FileManager, FilesPage), Map, Layout (DemoBanner, InAppNotificationBell), shared pickers (CustomDateTimePicker, CustomTimePicker), Vacay holidays, pages (Dashboard, Login), unit stores (authStore, inAppNotificationStore), API (authUrl, client integration), and i18n. Also updates sonar-project.properties and MSW trip handlers to support the new cases.
This commit is contained in:
jubnl
@@ -0,0 +1,223 @@
|
||||
// FE-ADMIN-AUDIT-001 to FE-ADMIN-AUDIT-010
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { resetAllStores } from '../../../tests/helpers/store';
|
||||
import AuditLogPanel from './AuditLogPanel';
|
||||
|
||||
const ENTRY_1 = {
|
||||
id: 1,
|
||||
created_at: '2025-06-01T10:30:00Z',
|
||||
user_id: 5,
|
||||
username: 'alice',
|
||||
user_email: 'alice@example.com',
|
||||
action: 'trip.create',
|
||||
resource: '/trips/42',
|
||||
details: { title: 'Test' },
|
||||
ip: '127.0.0.1',
|
||||
};
|
||||
|
||||
const ENTRY_2 = {
|
||||
id: 2,
|
||||
created_at: '2025-06-02T11:00:00Z',
|
||||
user_id: 6,
|
||||
username: 'bob',
|
||||
user_email: 'bob@example.com',
|
||||
action: 'trip.delete',
|
||||
resource: '/trips/43',
|
||||
details: null,
|
||||
ip: '10.0.0.1',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
server.resetHandlers();
|
||||
});
|
||||
|
||||
describe('AuditLogPanel', () => {
|
||||
it('FE-ADMIN-AUDIT-001: loading state shown on mount', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', async () => {
|
||||
await new Promise(() => {}); // never resolves
|
||||
return HttpResponse.json({ entries: [], total: 0 });
|
||||
}),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
expect(screen.getByText('Loading...')).toBeInTheDocument();
|
||||
expect(document.querySelector('table')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-002: empty state shown when no entries', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () =>
|
||||
HttpResponse.json({ entries: [], total: 0 }),
|
||||
),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
await screen.findByText('No audit entries yet.');
|
||||
expect(document.querySelector('table')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-003: table renders all columns with data', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () =>
|
||||
HttpResponse.json({ entries: [ENTRY_1], total: 1 }),
|
||||
),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
await screen.findByText('trip.create');
|
||||
expect(screen.getByText('Time')).toBeInTheDocument();
|
||||
expect(screen.getByText('User')).toBeInTheDocument();
|
||||
expect(screen.getByText('Action')).toBeInTheDocument();
|
||||
expect(screen.getByText('Resource')).toBeInTheDocument();
|
||||
expect(screen.getByText('IP')).toBeInTheDocument();
|
||||
expect(screen.getByText('Details')).toBeInTheDocument();
|
||||
expect(screen.getByText('alice')).toBeInTheDocument();
|
||||
expect(screen.getByText('/trips/42')).toBeInTheDocument();
|
||||
expect(screen.getByText('127.0.0.1')).toBeInTheDocument();
|
||||
expect(screen.getByText('{"title":"Test"}')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-004: userLabel fallback chain', async () => {
|
||||
const entries = [
|
||||
{ ...ENTRY_1, id: 10, username: 'alice', user_email: null, user_id: 5, action: 'a.username' },
|
||||
{ ...ENTRY_1, id: 11, username: null, user_email: 'bob@example.com', user_id: 6, action: 'a.email' },
|
||||
{ ...ENTRY_1, id: 12, username: null, user_email: null, user_id: 7, action: 'a.id' },
|
||||
{ ...ENTRY_1, id: 13, username: null, user_email: null, user_id: null, action: 'a.none' },
|
||||
];
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () =>
|
||||
HttpResponse.json({ entries, total: 4 }),
|
||||
),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
await screen.findByText('a.username');
|
||||
expect(screen.getByText('alice')).toBeInTheDocument();
|
||||
expect(screen.getByText('bob@example.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('#7')).toBeInTheDocument();
|
||||
// '—' appears multiple times (null resource, null ip for some, null user) — just check it exists
|
||||
expect(screen.getAllByText('—').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-005: dash shown for null resource, ip, and details', async () => {
|
||||
const entry = {
|
||||
...ENTRY_1,
|
||||
id: 20,
|
||||
action: 'a.nulls',
|
||||
resource: null,
|
||||
ip: null,
|
||||
details: null,
|
||||
};
|
||||
const entryEmptyDetails = {
|
||||
...ENTRY_1,
|
||||
id: 21,
|
||||
action: 'a.emptyobj',
|
||||
resource: '/ok',
|
||||
ip: '1.2.3.4',
|
||||
details: {},
|
||||
};
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () =>
|
||||
HttpResponse.json({ entries: [entry, entryEmptyDetails], total: 2 }),
|
||||
),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
await screen.findByText('a.nulls');
|
||||
// null resource, null ip, null details → three '—' for entry; empty obj details → another '—'
|
||||
const dashes = screen.getAllByText('—');
|
||||
expect(dashes.length).toBeGreaterThanOrEqual(4);
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-006: showing count text reflects count and total', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () =>
|
||||
HttpResponse.json({ entries: [ENTRY_1], total: 50 }),
|
||||
),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
await screen.findByText('trip.create');
|
||||
expect(screen.getByText('1 loaded · 50 total')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-007: "Load more" appends entries', async () => {
|
||||
let callCount = 0;
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () => {
|
||||
callCount++;
|
||||
if (callCount === 1) {
|
||||
return HttpResponse.json({ entries: [ENTRY_1], total: 2 });
|
||||
}
|
||||
return HttpResponse.json({ entries: [ENTRY_2], total: 2 });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
await screen.findByText('trip.create');
|
||||
const loadMoreBtn = screen.getByText('Load more');
|
||||
expect(loadMoreBtn).toBeInTheDocument();
|
||||
await user.click(loadMoreBtn);
|
||||
await screen.findByText('trip.delete');
|
||||
expect(screen.getByText('trip.create')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Load more')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-008: "Load more" hidden when all entries loaded', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () =>
|
||||
HttpResponse.json({ entries: [ENTRY_1, ENTRY_2], total: 2 }),
|
||||
),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
await screen.findByText('trip.create');
|
||||
expect(screen.queryByText('Load more')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-009: Refresh resets list to page 1', async () => {
|
||||
const PAGE1_ENTRY = { ...ENTRY_1, id: 100, action: 'phase1.action' };
|
||||
const PAGE2_ENTRY = { ...ENTRY_2, id: 101, action: 'phase2.action' };
|
||||
const REFRESH_ENTRY = { ...ENTRY_2, id: 102, action: 'phase3.refresh' };
|
||||
let callCount = 0;
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', () => {
|
||||
callCount++;
|
||||
if (callCount === 1) {
|
||||
return HttpResponse.json({ entries: [PAGE1_ENTRY], total: 2 });
|
||||
}
|
||||
if (callCount === 2) {
|
||||
return HttpResponse.json({ entries: [PAGE2_ENTRY], total: 2 });
|
||||
}
|
||||
return HttpResponse.json({ entries: [REFRESH_ENTRY], total: 1 });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
// Initial load: PAGE1_ENTRY visible, load more
|
||||
await screen.findByText('phase1.action');
|
||||
const loadMoreBtn = screen.getByText('Load more');
|
||||
await user.click(loadMoreBtn);
|
||||
await screen.findByText('phase2.action');
|
||||
// Now refresh
|
||||
const refreshBtn = screen.getByText('Refresh');
|
||||
await user.click(refreshBtn);
|
||||
// After refresh, only REFRESH_ENTRY should be visible
|
||||
await screen.findByText('phase3.refresh');
|
||||
await waitFor(() => expect(screen.queryByText('phase1.action')).not.toBeInTheDocument());
|
||||
expect(screen.queryByText('phase2.action')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-AUDIT-010: Refresh button is disabled while loading', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/audit-log', async () => {
|
||||
await new Promise(() => {}); // never resolves
|
||||
return HttpResponse.json({ entries: [], total: 0 });
|
||||
}),
|
||||
);
|
||||
render(<AuditLogPanel serverTimezone="UTC" />);
|
||||
const refreshBtn = screen.getByText('Refresh');
|
||||
expect(refreshBtn.closest('button')).toBeDisabled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,313 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, waitFor, within, fireEvent } from '../../../tests/helpers/render'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
import { server } from '../../../tests/helpers/msw/server'
|
||||
import { http, HttpResponse } from 'msw'
|
||||
import BackupPanel from './BackupPanel'
|
||||
import { ToastContainer } from '../shared/Toast'
|
||||
|
||||
const manualBackup = {
|
||||
filename: 'backup-2025-01-15.zip',
|
||||
created_at: '2025-01-15T10:00:00Z',
|
||||
size: 2048000,
|
||||
}
|
||||
const autoBackup = {
|
||||
filename: 'auto-backup-2025-02-01.zip',
|
||||
created_at: '2025-02-01T02:00:00Z',
|
||||
size: 1024000,
|
||||
}
|
||||
|
||||
function defaultBackupHandlers() {
|
||||
return [
|
||||
http.get('/api/backup/list', () => HttpResponse.json({ backups: [manualBackup] })),
|
||||
http.get('/api/backup/auto-settings', () =>
|
||||
HttpResponse.json({
|
||||
settings: { enabled: false, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
|
||||
timezone: 'UTC',
|
||||
}),
|
||||
),
|
||||
]
|
||||
}
|
||||
|
||||
function getToggleButton() {
|
||||
// The enable toggle is a <button> inside a <label> that contains "Enable auto-backup"
|
||||
const label = screen.getByText('Enable auto-backup').closest('label') as HTMLElement
|
||||
return label.querySelector('button') as HTMLElement
|
||||
}
|
||||
|
||||
describe('BackupPanel', () => {
|
||||
beforeEach(() => {
|
||||
resetAllStores()
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h' } } as any)
|
||||
vi.spyOn(window, 'confirm').mockReturnValue(true)
|
||||
server.use(...defaultBackupHandlers())
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.useRealTimers()
|
||||
server.resetHandlers()
|
||||
})
|
||||
|
||||
// BKP-001: Loading state
|
||||
it('FE-ADMIN-BKP-001: shows loading spinner while fetching backups', async () => {
|
||||
server.use(
|
||||
http.get('/api/backup/list', async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
return HttpResponse.json({ backups: [] })
|
||||
}),
|
||||
)
|
||||
render(<BackupPanel />)
|
||||
expect(document.querySelector('.animate-spin')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// BKP-002: Empty state
|
||||
it('FE-ADMIN-BKP-002: shows empty state when no backups exist', async () => {
|
||||
server.use(
|
||||
http.get('/api/backup/list', () => HttpResponse.json({ backups: [] })),
|
||||
)
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('No backups yet')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('Create first backup')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// BKP-003: Backup list renders filename, size, and date
|
||||
it('FE-ADMIN-BKP-003: renders filename, formatted size, and date for a backup', async () => {
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('2.0 MB')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// BKP-004: Auto-backup badge shown for auto-backup filenames
|
||||
it('FE-ADMIN-BKP-004: shows Auto badge for auto-backup filenames', async () => {
|
||||
server.use(
|
||||
http.get('/api/backup/list', () => HttpResponse.json({ backups: [autoBackup] })),
|
||||
)
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('auto-backup-2025-02-01.zip')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('Auto')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// BKP-005: Create backup success
|
||||
it('FE-ADMIN-BKP-005: creates backup and shows success toast', async () => {
|
||||
const user = userEvent.setup()
|
||||
server.use(
|
||||
http.post('/api/backup/create', () => HttpResponse.json({ success: true })),
|
||||
http.get('/api/backup/list', () => HttpResponse.json({ backups: [manualBackup] })),
|
||||
)
|
||||
render(<><ToastContainer /><BackupPanel /></>)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
|
||||
})
|
||||
await user.click(screen.getByTitle('Create Backup'))
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Backup created successfully')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// BKP-006: Restore opens confirmation modal
|
||||
it('FE-ADMIN-BKP-006: clicking Restore opens confirmation modal', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
|
||||
})
|
||||
await user.click(screen.getAllByText('Restore')[0])
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Restore Backup?')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getAllByText('backup-2025-01-15.zip').length).toBeGreaterThanOrEqual(1)
|
||||
expect(screen.getByText('Yes, restore')).toBeInTheDocument()
|
||||
expect(screen.getByText('Cancel')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// BKP-007: Cancel dismisses modal without calling restore API
|
||||
it('FE-ADMIN-BKP-007: cancel dismisses the restore modal without calling the API', async () => {
|
||||
const user = userEvent.setup()
|
||||
let restoreCalled = false
|
||||
server.use(
|
||||
http.post('/api/backup/restore/:filename', () => {
|
||||
restoreCalled = true
|
||||
return HttpResponse.json({ success: true })
|
||||
}),
|
||||
)
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
|
||||
})
|
||||
await user.click(screen.getAllByText('Restore')[0])
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Restore Backup?')).toBeInTheDocument()
|
||||
})
|
||||
await user.click(screen.getByText('Cancel'))
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Restore Backup?')).not.toBeInTheDocument()
|
||||
})
|
||||
expect(restoreCalled).toBe(false)
|
||||
})
|
||||
|
||||
// BKP-008: Backdrop click dismisses modal
|
||||
it('FE-ADMIN-BKP-008: clicking the backdrop dismisses the restore modal', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
|
||||
})
|
||||
await user.click(screen.getAllByText('Restore')[0])
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Restore Backup?')).toBeInTheDocument()
|
||||
})
|
||||
// Click the backdrop overlay (the fixed-position div)
|
||||
const backdrop = document.querySelector('[style*="position: fixed"]') as HTMLElement
|
||||
expect(backdrop).toBeTruthy()
|
||||
fireEvent.click(backdrop!)
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Restore Backup?')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// BKP-009: Successful restore calls API and reloads after 1500ms
|
||||
it('FE-ADMIN-BKP-009: successful restore shows toast and reloads after 1500ms', async () => {
|
||||
const user = userEvent.setup()
|
||||
server.use(
|
||||
http.post('/api/backup/restore/:filename', () => HttpResponse.json({ success: true })),
|
||||
)
|
||||
render(<><ToastContainer /><BackupPanel /></>)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Stub reload AFTER initial data load so we don't corrupt window.location during setup
|
||||
const reloadMock = vi.fn()
|
||||
vi.stubGlobal('location', { ...window.location, reload: reloadMock })
|
||||
|
||||
await user.click(screen.getAllByText('Restore')[0])
|
||||
await waitFor(() => expect(screen.getByText('Restore Backup?')).toBeInTheDocument())
|
||||
await user.click(screen.getByText('Yes, restore'))
|
||||
await waitFor(() => expect(screen.getByText('Backup restored. Page will reload…')).toBeInTheDocument())
|
||||
|
||||
// Wait for the 1500ms reload timer to fire
|
||||
await new Promise(resolve => setTimeout(resolve, 1600))
|
||||
expect(reloadMock).toHaveBeenCalled()
|
||||
vi.unstubAllGlobals()
|
||||
}, 20000)
|
||||
|
||||
// BKP-010: Delete backup with confirm dialog
|
||||
it('FE-ADMIN-BKP-010: deletes backup after confirm and shows success toast', async () => {
|
||||
const user = userEvent.setup()
|
||||
server.use(
|
||||
http.delete('/api/backup/:filename', () => HttpResponse.json({ success: true })),
|
||||
)
|
||||
render(<><ToastContainer /><BackupPanel /></>)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
|
||||
})
|
||||
const trashBtn = Array.from(document.querySelectorAll('button')).find(
|
||||
b => b.querySelector('svg.lucide-trash2'),
|
||||
) as HTMLElement
|
||||
expect(trashBtn).toBeTruthy()
|
||||
await user.click(trashBtn!)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Backup deleted')).toBeInTheDocument()
|
||||
})
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('backup-2025-01-15.zip')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// BKP-011: Auto-backup enable toggle shows interval controls
|
||||
it('FE-ADMIN-BKP-011: enabling auto-backup shows interval controls', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Enable auto-backup')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.queryByText('Hourly')).not.toBeInTheDocument()
|
||||
await user.click(getToggleButton())
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Hourly')).toBeInTheDocument()
|
||||
expect(screen.getByText('Daily')).toBeInTheDocument()
|
||||
expect(screen.getByText('Weekly')).toBeInTheDocument()
|
||||
expect(screen.getByText('Monthly')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// BKP-012: Weekly interval shows day-of-week picker
|
||||
it('FE-ADMIN-BKP-012: weekly interval shows day-of-week picker', async () => {
|
||||
const user = userEvent.setup()
|
||||
server.use(
|
||||
http.get('/api/backup/auto-settings', () =>
|
||||
HttpResponse.json({
|
||||
settings: { enabled: true, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
|
||||
timezone: 'UTC',
|
||||
}),
|
||||
),
|
||||
)
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Weekly')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.queryByText('Sun')).not.toBeInTheDocument()
|
||||
await user.click(screen.getByText('Weekly'))
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Sun')).toBeInTheDocument()
|
||||
expect(screen.getByText('Mon')).toBeInTheDocument()
|
||||
expect(screen.getByText('Sat')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.queryByText('Day of month')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// BKP-013: Save auto-settings calls API and shows toast
|
||||
it('FE-ADMIN-BKP-013: saving auto-settings calls API and shows success toast', async () => {
|
||||
const user = userEvent.setup()
|
||||
server.use(
|
||||
http.get('/api/backup/auto-settings', () =>
|
||||
HttpResponse.json({
|
||||
settings: { enabled: true, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
|
||||
timezone: 'UTC',
|
||||
}),
|
||||
),
|
||||
http.put('/api/backup/auto-settings', () =>
|
||||
HttpResponse.json({
|
||||
settings: { enabled: true, interval: 'weekly', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
|
||||
}),
|
||||
),
|
||||
)
|
||||
render(<><ToastContainer /><BackupPanel /></>)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Weekly')).toBeInTheDocument()
|
||||
})
|
||||
await user.click(screen.getByText('Weekly'))
|
||||
await waitFor(() => {
|
||||
const saveBtn = screen.getByRole('button', { name: /^save$/i })
|
||||
expect(saveBtn).not.toBeDisabled()
|
||||
})
|
||||
await user.click(screen.getByRole('button', { name: /^save$/i }))
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Auto-backup settings saved')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// BKP-014: Save button disabled until settings changed
|
||||
it('FE-ADMIN-BKP-014: save button is disabled until settings are changed', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<BackupPanel />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Enable auto-backup')).toBeInTheDocument()
|
||||
})
|
||||
const saveBtn = screen.getByRole('button', { name: /^save$/i })
|
||||
expect(saveBtn).toBeDisabled()
|
||||
await user.click(getToggleButton())
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /^save$/i })).not.toBeDisabled()
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,160 @@
|
||||
// FE-ADMIN-DEVNOTIF-001 to FE-ADMIN-DEVNOTIF-010
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { buildUser } from '../../../tests/helpers/factories';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { ToastContainer } from '../shared/Toast';
|
||||
import DevNotificationsPanel from './DevNotificationsPanel';
|
||||
|
||||
const ADMIN_USER = buildUser({ id: 1, username: 'testadmin', role: 'admin' });
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
seedStore(useAuthStore, { user: ADMIN_USER, isAuthenticated: true });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
server.resetHandlers();
|
||||
});
|
||||
|
||||
describe('DevNotificationsPanel', () => {
|
||||
it('FE-ADMIN-DEVNOTIF-001: "DEV ONLY" badge is always visible', () => {
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
expect(screen.getByText('DEV ONLY')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-002: four section titles render after data loads', async () => {
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
// Wait for async data to populate conditional sections
|
||||
await screen.findByText('Trip-Scoped Events');
|
||||
await screen.findByText('User-Scoped Events');
|
||||
expect(screen.getByText('Type Testing')).toBeInTheDocument();
|
||||
expect(screen.getByText('Admin-Scoped Events')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-003: trip selector populated from API', async () => {
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
await screen.findByText('Trip-Scoped Events');
|
||||
const [tripSelect] = screen.getAllByRole('combobox');
|
||||
const options = Array.from(tripSelect.querySelectorAll('option'));
|
||||
const labels = options.map(o => o.textContent);
|
||||
expect(labels).toContain('Paris Adventure');
|
||||
expect(labels).toContain('Tokyo Trip');
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-004: user selector populated from API', async () => {
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
await screen.findByText('User-Scoped Events');
|
||||
const selects = screen.getAllByRole('combobox');
|
||||
// Second combobox is the user selector (first is trip selector)
|
||||
const userSelect = selects[1];
|
||||
const options = Array.from(userSelect.querySelectorAll('option'));
|
||||
const labels = options.map(o => o.textContent ?? '');
|
||||
expect(labels.some(l => l.includes('admin'))).toBe(true);
|
||||
expect(labels.some(l => l.includes('alice'))).toBe(true);
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-005: clicking "Simple → Me" fires sendTestNotification with correct payload', async () => {
|
||||
let capturedBody: Record<string, unknown> | undefined;
|
||||
server.use(
|
||||
http.post('/api/admin/dev/test-notification', async ({ request }) => {
|
||||
capturedBody = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ ok: true });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
await screen.findByText('Type Testing');
|
||||
await user.click(screen.getByText('Simple → Me').closest('button')!);
|
||||
await waitFor(() => expect(capturedBody).toBeDefined());
|
||||
expect(capturedBody).toMatchObject({
|
||||
event: 'test_simple',
|
||||
scope: 'user',
|
||||
targetId: ADMIN_USER.id,
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-006: success toast shown after fire', async () => {
|
||||
server.use(
|
||||
http.post('/api/admin/dev/test-notification', () =>
|
||||
HttpResponse.json({ ok: true }),
|
||||
),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
await screen.findByText('Type Testing');
|
||||
await user.click(screen.getByText('Simple → Me').closest('button')!);
|
||||
await screen.findByText('Sent: simple-me');
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-007: all buttons disabled while a send is in-flight', async () => {
|
||||
server.use(
|
||||
http.post('/api/admin/dev/test-notification', async () => {
|
||||
await new Promise(() => {}); // never resolves — simulates in-flight
|
||||
return HttpResponse.json({ ok: true });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
await screen.findByText('Type Testing');
|
||||
|
||||
// Fire the click but do not await — handler never resolves so sending stays true
|
||||
void user.click(screen.getByText('Simple → Me').closest('button')!);
|
||||
|
||||
await waitFor(() => {
|
||||
const buttons = screen.getAllByRole('button');
|
||||
buttons.forEach(btn => expect(btn).toBeDisabled());
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-008: error toast shown on API failure', async () => {
|
||||
server.use(
|
||||
http.post('/api/admin/dev/test-notification', () =>
|
||||
HttpResponse.json({ message: 'Server error' }, { status: 500 }),
|
||||
),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
await screen.findByText('Type Testing');
|
||||
await user.click(screen.getByText('Simple → Me').closest('button')!);
|
||||
await screen.findByText(/failed|error/i);
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-009: changing trip selector updates payload targetId', async () => {
|
||||
let capturedBody: Record<string, unknown> | undefined;
|
||||
server.use(
|
||||
http.post('/api/admin/dev/test-notification', async ({ request }) => {
|
||||
capturedBody = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ ok: true });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
await screen.findByText('Trip-Scoped Events');
|
||||
|
||||
const [tripSelect] = screen.getAllByRole('combobox');
|
||||
const tokyoOption = Array.from(tripSelect.querySelectorAll('option')).find(
|
||||
o => o.textContent === 'Tokyo Trip',
|
||||
)!;
|
||||
const tokyoId = Number(tokyoOption.value);
|
||||
|
||||
await user.selectOptions(tripSelect, 'Tokyo Trip');
|
||||
await user.click(screen.getByText('booking_change').closest('button')!);
|
||||
|
||||
await waitFor(() => expect(capturedBody).toBeDefined());
|
||||
expect(capturedBody!.targetId).toBe(tokyoId);
|
||||
});
|
||||
|
||||
it('FE-ADMIN-DEVNOTIF-010: Trip-Scoped section absent when no trips', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips', () => HttpResponse.json({ trips: [] })),
|
||||
);
|
||||
render(<><ToastContainer /><DevNotificationsPanel /></>);
|
||||
// Wait for user data to confirm async effects have settled
|
||||
await screen.findByText('User-Scoped Events');
|
||||
expect(screen.queryByText('Trip-Scoped Events')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,336 @@
|
||||
// FE-ADMIN-GH-001 to FE-ADMIN-GH-016
|
||||
import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { resetAllStores } from '../../../tests/helpers/store';
|
||||
import GitHubPanel from './GitHubPanel';
|
||||
|
||||
function buildRelease(overrides = {}) {
|
||||
const id = Math.random();
|
||||
return {
|
||||
id,
|
||||
tag_name: 'v1.0.0',
|
||||
name: 'Initial Release',
|
||||
body: '## Changes\n- Fixed bug\n- **Bold improvement**\n- `code snippet`',
|
||||
published_at: '2025-01-15T12:00:00Z',
|
||||
created_at: '2025-01-15T12:00:00Z',
|
||||
prerelease: false,
|
||||
author: { login: 'mauriceboe' },
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
const PAGE_1 = Array.from({ length: 10 }, (_, i) =>
|
||||
buildRelease({ id: i + 1, tag_name: `v1.${i}.0` }),
|
||||
);
|
||||
const PAGE_2 = Array.from({ length: 5 }, (_, i) =>
|
||||
buildRelease({ id: 100 + i, tag_name: `v0.${i}.0` }),
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([])),
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
server.resetHandlers();
|
||||
});
|
||||
|
||||
describe('GitHubPanel', () => {
|
||||
it('FE-ADMIN-GH-001: support link cards always render', async () => {
|
||||
render(<GitHubPanel />);
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByRole('status')).not.toBeInTheDocument(),
|
||||
);
|
||||
expect(screen.getByText('Ko-fi')).toBeInTheDocument();
|
||||
expect(screen.getByText('Buy Me a Coffee')).toBeInTheDocument();
|
||||
expect(screen.getByText('Discord')).toBeInTheDocument();
|
||||
expect(screen.getByText('Report a Bug')).toBeInTheDocument();
|
||||
expect(screen.getByText('Feature Request')).toBeInTheDocument();
|
||||
expect(screen.getByText('Wiki')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-002: all support links have correct href and target=_blank', async () => {
|
||||
render(<GitHubPanel />);
|
||||
await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument());
|
||||
|
||||
const kofi = screen.getByText('Ko-fi').closest('a')!;
|
||||
expect(kofi).toHaveAttribute('href', 'https://ko-fi.com/mauriceboe');
|
||||
expect(kofi).toHaveAttribute('target', '_blank');
|
||||
expect(kofi).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
|
||||
const bmc = screen.getByText('Buy Me a Coffee').closest('a')!;
|
||||
expect(bmc).toHaveAttribute('href', 'https://buymeacoffee.com/mauriceboe');
|
||||
expect(bmc).toHaveAttribute('target', '_blank');
|
||||
expect(bmc).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
|
||||
const discord = screen.getByText('Discord').closest('a')!;
|
||||
expect(discord).toHaveAttribute('href', 'https://discord.gg/nSdKaXgN');
|
||||
expect(discord).toHaveAttribute('target', '_blank');
|
||||
expect(discord).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-003: loading spinner shown while fetching releases', () => {
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', async () => {
|
||||
await new Promise(() => {}); // never resolves
|
||||
return HttpResponse.json([]);
|
||||
}),
|
||||
);
|
||||
render(<GitHubPanel />);
|
||||
// The Loader2 spinner is rendered while loading=true
|
||||
const spinner = document.querySelector('.animate-spin');
|
||||
expect(spinner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-004: error state shown on API failure', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () =>
|
||||
HttpResponse.json({ message: 'Internal Server Error' }, { status: 500 }),
|
||||
),
|
||||
);
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('Failed to load releases');
|
||||
// Timeline should not be rendered
|
||||
expect(screen.queryByText('Release History')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-005: releases render in timeline', async () => {
|
||||
const r1 = buildRelease({ id: 1, tag_name: 'v1.0.0', author: { login: 'mauriceboe' } });
|
||||
const r2 = buildRelease({ id: 2, tag_name: 'v1.1.0', author: { login: 'mauriceboe' } });
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r1, r2])),
|
||||
);
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v1.0.0');
|
||||
expect(screen.getByText('v1.1.0')).toBeInTheDocument();
|
||||
// Author label
|
||||
const authorLabels = screen.getAllByText(/mauriceboe/);
|
||||
expect(authorLabels.length).toBeGreaterThan(0);
|
||||
// Some date should be visible (non-empty)
|
||||
const dateEls = document.querySelectorAll('[class*="text-"]');
|
||||
const dateTexts = Array.from(dateEls).map(el => el.textContent).filter(t => t && t.match(/\d{4}/));
|
||||
expect(dateTexts.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-006: latest badge shown only on first release', async () => {
|
||||
const r1 = buildRelease({ id: 1, tag_name: 'v2.0.0' });
|
||||
const r2 = buildRelease({ id: 2, tag_name: 'v1.9.0' });
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r1, r2])),
|
||||
);
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v2.0.0');
|
||||
const latestBadges = screen.getAllByText('Latest');
|
||||
expect(latestBadges).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-007: prerelease badge shown', async () => {
|
||||
const r = buildRelease({ id: 10, tag_name: 'v3.0.0-beta.1', prerelease: true });
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
|
||||
);
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v3.0.0-beta.1');
|
||||
expect(screen.getByText('Pre-release')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-008: expand/collapse release notes', async () => {
|
||||
const r = buildRelease({
|
||||
id: 20,
|
||||
tag_name: 'v1.5.0',
|
||||
body: '- Fixed bug\n- Another fix',
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v1.5.0');
|
||||
|
||||
const showBtn = screen.getByText('Show details');
|
||||
expect(showBtn).toBeInTheDocument();
|
||||
|
||||
// Body not visible yet
|
||||
expect(screen.queryByText('Fixed bug')).not.toBeInTheDocument();
|
||||
|
||||
// Expand
|
||||
await user.click(showBtn);
|
||||
await screen.findByText('Fixed bug');
|
||||
expect(screen.getByText('Hide details')).toBeInTheDocument();
|
||||
|
||||
// Collapse
|
||||
await user.click(screen.getByText('Hide details'));
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByText('Fixed bug')).not.toBeInTheDocument(),
|
||||
);
|
||||
expect(screen.getByText('Show details')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-009: release body renders markdown: lists, bold, code', async () => {
|
||||
const r = buildRelease({
|
||||
id: 30,
|
||||
tag_name: 'v1.6.0',
|
||||
body: '- list item\n- **bold text**\n- `inline code`',
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v1.6.0');
|
||||
|
||||
await user.click(screen.getByText('Show details'));
|
||||
await screen.findByText('list item');
|
||||
|
||||
// list item is inside a <li>
|
||||
const listItem = screen.getByText('list item');
|
||||
expect(listItem.closest('li')).toBeInTheDocument();
|
||||
|
||||
// Bold text rendered as <strong>
|
||||
const container = document.querySelector('.mt-2.p-3.rounded-lg')!;
|
||||
expect(container.querySelector('strong')).toBeInTheDocument();
|
||||
expect(container.querySelector('strong')!.textContent).toBe('bold text');
|
||||
|
||||
// Code rendered as <code>
|
||||
expect(container.querySelector('code')).toBeInTheDocument();
|
||||
expect(container.querySelector('code')!.textContent).toBe('inline code');
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-010: "Load more" button visible when full page returned', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json(PAGE_1)),
|
||||
);
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText(`v1.0.0`);
|
||||
expect(screen.getByText('Load more')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-011: "Load more" hidden when partial page returned', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json(PAGE_2)),
|
||||
);
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v0.0.0');
|
||||
expect(screen.queryByText('Load more')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-013: release body renders plain paragraph text', async () => {
|
||||
const r = buildRelease({
|
||||
id: 40,
|
||||
tag_name: 'v1.7.0',
|
||||
body: 'This is a plain paragraph without any markdown syntax.',
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v1.7.0');
|
||||
await user.click(screen.getByText('Show details'));
|
||||
await screen.findByText('This is a plain paragraph without any markdown syntax.');
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-014: markdown link with safe href renders as anchor', async () => {
|
||||
const r = buildRelease({
|
||||
id: 41,
|
||||
tag_name: 'v1.8.0',
|
||||
body: '- [click here](https://example.com)',
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v1.8.0');
|
||||
await user.click(screen.getByText('Show details'));
|
||||
const link = await screen.findByText('click here');
|
||||
expect(link.closest('a') || link.tagName.toLowerCase() === 'a' ? link : null).not.toBeNull();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-015: javascript: link is sanitized to #', async () => {
|
||||
const r = buildRelease({
|
||||
id: 42,
|
||||
tag_name: 'v1.9.0',
|
||||
body: '- [evil](javascript:alert(1))',
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v1.9.0');
|
||||
await user.click(screen.getByText('Show details'));
|
||||
const link = await screen.findByText('evil');
|
||||
const anchor = link.closest('a') ?? link;
|
||||
// The unsafe href is replaced with '#'
|
||||
expect(anchor).toHaveAttribute('href', '#');
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-016: support card hover effects fire without error', async () => {
|
||||
render(<GitHubPanel />);
|
||||
await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument());
|
||||
|
||||
const kofiLink = screen.getByText('Ko-fi').closest('a')!;
|
||||
fireEvent.mouseEnter(kofiLink);
|
||||
fireEvent.mouseLeave(kofiLink);
|
||||
|
||||
const discordLink = screen.getByText('Discord').closest('a')!;
|
||||
fireEvent.mouseEnter(discordLink);
|
||||
fireEvent.mouseLeave(discordLink);
|
||||
|
||||
const bugLink = screen.getByText('Report a Bug').closest('a')!;
|
||||
fireEvent.mouseEnter(bugLink);
|
||||
fireEvent.mouseLeave(bugLink);
|
||||
|
||||
const featureLink = screen.getByText('Feature Request').closest('a')!;
|
||||
fireEvent.mouseEnter(featureLink);
|
||||
fireEvent.mouseLeave(featureLink);
|
||||
|
||||
const wikiLink = screen.getByText('Wiki').closest('a')!;
|
||||
fireEvent.mouseEnter(wikiLink);
|
||||
fireEvent.mouseLeave(wikiLink);
|
||||
|
||||
const bmcLink = screen.getByText('Buy Me a Coffee').closest('a')!;
|
||||
fireEvent.mouseEnter(bmcLink);
|
||||
fireEvent.mouseLeave(bmcLink);
|
||||
|
||||
// All links still visible
|
||||
expect(screen.getByText('Ko-fi')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-ADMIN-GH-012: clicking "Load more" appends next page', async () => {
|
||||
server.use(
|
||||
http.get('/api/admin/github-releases', ({ request }) => {
|
||||
const url = new URL(request.url);
|
||||
const page = url.searchParams.get('page');
|
||||
if (page === '2') {
|
||||
return HttpResponse.json(PAGE_2);
|
||||
}
|
||||
return HttpResponse.json(PAGE_1);
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<GitHubPanel />);
|
||||
await screen.findByText('v1.0.0');
|
||||
|
||||
// All 10 items from page 1 visible
|
||||
expect(screen.getAllByText(/v1\.\d\.0/).length).toBe(10);
|
||||
|
||||
// Click Load more
|
||||
await user.click(screen.getByText('Load more'));
|
||||
|
||||
// Wait for page 2 items to appear
|
||||
await screen.findByText('v0.0.0');
|
||||
|
||||
// Total: 10 from page 1 + 5 from page 2 = 15
|
||||
const tagEls = screen.getAllByText(/^v[01]\.\d\.0$/);
|
||||
expect(tagEls.length).toBe(15);
|
||||
|
||||
// Load more should be hidden (PAGE_2 < 10)
|
||||
expect(screen.queryByText('Load more')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -238,4 +238,184 @@ describe('BudgetPanel', () => {
|
||||
render(<BudgetPanel tripId={1} tripMembers={[]} />);
|
||||
await screen.findByText('No budget created yet');
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-021: inline edit name cell — clicking a name cell makes it editable', async () => {
|
||||
const user = userEvent.setup();
|
||||
const item = { ...buildBudgetItem({ id: 21, trip_id: 1, category: 'Food', name: 'Old Name' }), total_price: 10 };
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findByText('Old Name');
|
||||
await user.click(screen.getByText('Old Name'));
|
||||
expect(screen.getByDisplayValue('Old Name')).toBeInTheDocument();
|
||||
await user.keyboard('{Escape}');
|
||||
expect(screen.queryByDisplayValue('Old Name')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-022: inline edit name cell — saving new name calls PUT API', async () => {
|
||||
const user = userEvent.setup();
|
||||
const item = { ...buildBudgetItem({ id: 10, trip_id: 1, category: 'Food', name: 'Old Name' }), total_price: 10 };
|
||||
let putCalled = false;
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
http.put('/api/trips/1/budget/10', async ({ request }) => {
|
||||
const b = await request.json() as Record<string, unknown>;
|
||||
putCalled = true;
|
||||
return HttpResponse.json({ item: { ...item, name: b.name } });
|
||||
})
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findByText('Old Name');
|
||||
await user.click(screen.getByText('Old Name'));
|
||||
const input = screen.getByDisplayValue('Old Name');
|
||||
await user.clear(input);
|
||||
await user.type(input, 'New Name');
|
||||
await user.tab();
|
||||
await waitFor(() => expect(putCalled).toBe(true));
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-023: total price is shown formatted with currency symbol', async () => {
|
||||
const item = { ...buildBudgetItem({ id: 23, trip_id: 1, category: 'Restaurants', name: 'Dinner' }), total_price: 45.5 };
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findByText('Dinner');
|
||||
// The formatted number appears in the InlineEditCell for total price (and grand total card)
|
||||
expect(screen.getAllByText('45.50').length).toBeGreaterThan(0);
|
||||
// The currency symbol appears (in category subtotal or grand total card)
|
||||
expect(screen.getAllByText(/€/).length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-024: delete category button removes all items in that category', async () => {
|
||||
const user = userEvent.setup();
|
||||
const item = { ...buildBudgetItem({ id: 24, trip_id: 1, category: 'Flights', name: 'Flight to Paris' }), total_price: 200 };
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
http.delete('/api/trips/1/budget/24', () => HttpResponse.json({ success: true }))
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findAllByText('Flights');
|
||||
await screen.findByText('Flight to Paris');
|
||||
await user.click(screen.getByTitle('Delete Category'));
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByText('Flights').length).toBe(0);
|
||||
expect(screen.queryByText('Flight to Paris')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-025: CSV export button triggers download via URL.createObjectURL', async () => {
|
||||
const createObjectURL = vi.fn(() => 'blob:test');
|
||||
vi.spyOn(URL, 'createObjectURL').mockImplementation(createObjectURL);
|
||||
const user = userEvent.setup();
|
||||
const item = { ...buildBudgetItem({ trip_id: 1, category: 'Other', name: 'Misc' }), total_price: 10 };
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findByText('CSV');
|
||||
await user.click(screen.getByText('CSV'));
|
||||
expect(createObjectURL).toHaveBeenCalled();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-026: category total row shows sum of items in category', async () => {
|
||||
const item1 = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Lunch' }), total_price: 20 };
|
||||
const item2 = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Dinner' }), total_price: 30 };
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item1, item2] }))
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findByText('Lunch');
|
||||
// The category header shows subtotal formatted as "50.00 €" (also appears in pie legend)
|
||||
expect(screen.getAllByText('50.00 €').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-027: add new category input is visible in empty state', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] }))
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findByPlaceholderText('Enter category name...');
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-028: creating a new category via input calls POST and adds a section', async () => {
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
|
||||
http.post('/api/trips/1/budget', () =>
|
||||
HttpResponse.json({ item: { ...buildBudgetItem({ category: 'Souvenirs', name: 'New Entry' }), total_price: 0 } })
|
||||
)
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
const input = await screen.findByPlaceholderText('Enter category name...');
|
||||
await user.type(input, 'Souvenirs{Enter}');
|
||||
await screen.findByText('Souvenirs');
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-029: settlement section renders flows with usernames', async () => {
|
||||
const user = userEvent.setup();
|
||||
const item = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Dinner' }), total_price: 100 };
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
http.get('/api/trips/1/budget/settlement', () =>
|
||||
HttpResponse.json({
|
||||
balances: [
|
||||
{ user_id: 1, username: 'alice', balance: -10, avatar_url: null },
|
||||
{ user_id: 2, username: 'bob', balance: 10, avatar_url: null },
|
||||
],
|
||||
flows: [
|
||||
{ from: { username: 'alice', avatar_url: null }, to: { username: 'bob', avatar_url: null }, amount: 10 },
|
||||
],
|
||||
})
|
||||
)
|
||||
);
|
||||
const tripMembers = [
|
||||
{ id: 1, username: 'alice', avatar_url: null },
|
||||
{ id: 2, username: 'bob', avatar_url: null },
|
||||
];
|
||||
render(<BudgetPanel tripId={1} tripMembers={tripMembers} />);
|
||||
await screen.findByText('Dinner');
|
||||
// Click the settlement toggle button (role button with name containing "settlement")
|
||||
const settlementBtn = await screen.findByRole('button', { name: /settlement/i });
|
||||
await user.click(settlementBtn);
|
||||
// alice and bob should appear in balances section
|
||||
await screen.findByText('alice');
|
||||
await screen.findByText('bob');
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-030: per-person summary renders usernames', async () => {
|
||||
const item = {
|
||||
...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Shared Dinner' }),
|
||||
total_price: 75,
|
||||
members: [{ user_id: 1, username: 'testuser', avatar_url: null, paid: false }],
|
||||
};
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
http.get('/api/trips/1/budget/summary/per-person', () =>
|
||||
HttpResponse.json({ summary: [{ user_id: 1, username: 'testuser', avatar_url: null, total_assigned: 75 }] })
|
||||
)
|
||||
);
|
||||
const tripMembers = [
|
||||
{ id: 1, username: 'testuser', avatar_url: null },
|
||||
{ id: 2, username: 'other', avatar_url: null },
|
||||
];
|
||||
render(<BudgetPanel tripId={1} tripMembers={tripMembers} />);
|
||||
await screen.findByText('Shared Dinner');
|
||||
await screen.findByText('testuser');
|
||||
});
|
||||
|
||||
it('FE-COMP-BUDGET-032: grand total row shows sum across all categories', async () => {
|
||||
const item1 = { ...buildBudgetItem({ trip_id: 1, category: 'Transport', name: 'Flight' }), total_price: 100 };
|
||||
const item2 = { ...buildBudgetItem({ trip_id: 1, category: 'Hotels', name: 'Hotel' }), total_price: 200 };
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item1, item2] }))
|
||||
);
|
||||
render(<BudgetPanel tripId={1} />);
|
||||
await screen.findByText('Flight');
|
||||
await screen.findByText('Hotel');
|
||||
// Grand total card shows 300.00
|
||||
expect(screen.getByText('300.00')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -14,15 +14,17 @@ vi.mock('../../api/websocket', () => ({
|
||||
removeListener: vi.fn(),
|
||||
}));
|
||||
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import { render, screen, waitFor, act, fireEvent } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildTrip } from '../../../tests/helpers/factories';
|
||||
import CollabChat from './CollabChat';
|
||||
import { addListener } from '../../api/websocket';
|
||||
|
||||
const currentUser = buildUser({ id: 1, username: 'testuser' });
|
||||
|
||||
@@ -155,4 +157,550 @@ describe('CollabChat', () => {
|
||||
const buttons = screen.getAllByRole('button');
|
||||
expect(buttons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-013: date separator shows "Today" for messages sent today', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Hello world!', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Hello world!');
|
||||
expect(screen.getByText('Today')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-014: Shift+Enter inserts a newline instead of sending', async () => {
|
||||
const user = userEvent.setup();
|
||||
let postCalled = false;
|
||||
server.use(
|
||||
http.post('/api/trips/1/collab/messages', async () => {
|
||||
postCalled = true;
|
||||
return HttpResponse.json({});
|
||||
})
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Start the conversation');
|
||||
const input = screen.getByPlaceholderText('Type a message...');
|
||||
await user.click(input);
|
||||
await user.type(input, 'Line1');
|
||||
await user.keyboard('{Shift>}{Enter}{/Shift}');
|
||||
await user.type(input, 'Line2');
|
||||
expect((input as HTMLTextAreaElement).value).toContain('\n');
|
||||
expect(postCalled).toBe(false);
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-015: deleted message shows fallback text', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'some text', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: true, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/deleted/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-017: reaction badge renders for a message with reactions', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'React to me', created_at: new Date().toISOString(),
|
||||
reactions: [{ emoji: '❤️', count: 1, users: [{ user_id: 2, username: 'alice' }] }],
|
||||
reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('React to me');
|
||||
// ReactionBadge renders a button containing a TwemojiImg with alt=emoji
|
||||
const img = screen.getByAltText('❤️');
|
||||
expect(img).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-018: WebSocket collab:message:created event adds message to list', async () => {
|
||||
vi.clearAllMocks();
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Start the conversation');
|
||||
await waitFor(() => expect(addListener).toHaveBeenCalled());
|
||||
const handler = (addListener as any).mock.calls[0][0];
|
||||
await act(async () => {
|
||||
handler({
|
||||
type: 'collab:message:created',
|
||||
tripId: 1,
|
||||
message: {
|
||||
id: 99, trip_id: 1, user_id: 2, username: 'alice',
|
||||
text: 'WS message', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
},
|
||||
});
|
||||
});
|
||||
expect(await screen.findByText('WS message')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-019: WebSocket collab:message:deleted event marks message as deleted', async () => {
|
||||
vi.clearAllMocks();
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'To remove', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('To remove');
|
||||
await waitFor(() => expect(addListener).toHaveBeenCalled());
|
||||
const handler = (addListener as any).mock.calls[0][0];
|
||||
await act(async () => {
|
||||
handler({ type: 'collab:message:deleted', tripId: 1, messageId: 1 });
|
||||
});
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('To remove')).not.toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText(/deleted/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-020: send button is disabled when input is empty', async () => {
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Start the conversation');
|
||||
const buttons = screen.getAllByRole('button');
|
||||
// The send button is the ArrowUp button — it has disabled attr when text is empty
|
||||
const sendButton = buttons.find(b => b.hasAttribute('disabled'));
|
||||
expect(sendButton).toBeTruthy();
|
||||
expect(sendButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-021: reply-to banner shows quoted author and text', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Reply here', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null,
|
||||
reply_text: 'Original message', reply_username: 'alice',
|
||||
deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Reply here');
|
||||
expect(screen.getByText(/Original message/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-022: own messages are displayed with blue bubble', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: currentUser.id, username: 'testuser', avatar_url: null,
|
||||
text: 'My own message', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('My own message');
|
||||
// Own messages don't show a username label above the bubble (only other users get it)
|
||||
// The component renders {!own && isNewGroup && <span>{msg.username}</span>}
|
||||
// so 'testuser' should NOT appear as a username label
|
||||
const usernameLabels = screen.queryAllByText('testuser');
|
||||
expect(usernameLabels.length).toBe(0);
|
||||
// And own message bubble uses row-reverse flex direction
|
||||
const messageEl = screen.getByText('My own message');
|
||||
let parent = messageEl.parentElement;
|
||||
let foundRowReverse = false;
|
||||
while (parent) {
|
||||
const styleAttr = parent.getAttribute('style');
|
||||
if (styleAttr && styleAttr.includes('row-reverse')) {
|
||||
foundRowReverse = true;
|
||||
break;
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
expect(foundRowReverse).toBe(true);
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-023: sending a message clears the input field', async () => {
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.post('/api/trips/1/collab/messages', async () =>
|
||||
HttpResponse.json({
|
||||
message: {
|
||||
id: 2, trip_id: 1, user_id: 1, username: 'testuser',
|
||||
avatar_url: null, text: 'Sent message', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
},
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Start the conversation');
|
||||
const input = screen.getByPlaceholderText('Type a message...');
|
||||
await user.type(input, 'Sent message');
|
||||
expect((input as HTMLTextAreaElement).value).toBe('Sent message');
|
||||
await user.keyboard('{Enter}');
|
||||
await waitFor(() => {
|
||||
expect((input as HTMLTextAreaElement).value).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-024: load earlier messages button appears when 100+ messages exist', async () => {
|
||||
const messages = Array.from({ length: 100 }, (_, i) => ({
|
||||
id: i + 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: `Message ${i + 1}`, created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}));
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({ messages, total: 100 })
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Message 1');
|
||||
const loadMoreBtn = await screen.findByRole('button', { name: /load/i });
|
||||
expect(loadMoreBtn).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-025: clicking reply button on a message sets reply-to preview', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Reply to me', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Reply to me');
|
||||
// Hover action buttons are always in DOM but hidden via pointer-events: none
|
||||
// Use fireEvent to bypass CSS pointer-events restrictions
|
||||
const replyBtn = screen.getByTitle('Reply');
|
||||
fireEvent.click(replyBtn);
|
||||
// Reply preview banner renders <strong>{username}</strong> — unique to the banner
|
||||
await waitFor(() => {
|
||||
const aliceEls = screen.queryAllByText('alice');
|
||||
expect(aliceEls.some(el => el.tagName === 'STRONG')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-026: clicking X in reply preview cancels reply', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Cancel reply test', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Cancel reply test');
|
||||
// Click reply button to show preview (bypassing pointer-events: none)
|
||||
fireEvent.click(screen.getByTitle('Reply'));
|
||||
// Wait for reply preview <strong> to appear
|
||||
await waitFor(() => {
|
||||
const aliceEls = screen.queryAllByText('alice');
|
||||
expect(aliceEls.some(el => el.tagName === 'STRONG')).toBe(true);
|
||||
});
|
||||
// Find the X button inside the reply preview — the <strong> is inside a <span> inside the preview div
|
||||
const strongEl = screen.getAllByText('alice').find(el => el.tagName === 'STRONG')!;
|
||||
const previewDiv = strongEl.closest('div[style]');
|
||||
const xBtn = previewDiv?.querySelector('button');
|
||||
expect(xBtn).toBeTruthy();
|
||||
fireEvent.click(xBtn!);
|
||||
await waitFor(() => {
|
||||
// After cancel, no <strong>alice</strong> in reply preview
|
||||
const remaining = screen.queryAllByText('alice');
|
||||
expect(remaining.every(el => el.tagName !== 'STRONG')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-027: clicking emoji button opens the emoji picker', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Start the conversation');
|
||||
// Smile button is the only non-disabled button when input is empty
|
||||
const allButtons = screen.getAllByRole('button');
|
||||
const smileBtn = allButtons.find(b => !b.hasAttribute('disabled'));
|
||||
expect(smileBtn).toBeTruthy();
|
||||
await user.click(smileBtn!);
|
||||
// EmojiPicker renders category tabs
|
||||
await screen.findByText('Smileys');
|
||||
expect(screen.getByText('Reactions')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-028: selecting emoji from picker appends it to the input', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Start the conversation');
|
||||
const allButtons = screen.getAllByRole('button');
|
||||
const smileBtn = allButtons.find(b => !b.hasAttribute('disabled'));
|
||||
await user.click(smileBtn!);
|
||||
// Wait for picker to open
|
||||
await screen.findByText('Smileys');
|
||||
// Click the first emoji in the grid (😀 is the first in Smileys)
|
||||
const emojiImg = screen.getAllByRole('img').find(img => img.getAttribute('alt') === '😀');
|
||||
expect(emojiImg).toBeTruthy();
|
||||
await user.click(emojiImg!.closest('button')!);
|
||||
// Emoji should be appended to textarea
|
||||
const textarea = screen.getByPlaceholderText('Type a message...');
|
||||
expect((textarea as HTMLTextAreaElement).value).toContain('😀');
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-029: right-clicking a message opens the reaction menu', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Right click me', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Right click me');
|
||||
const messageBubble = screen.getByText('Right click me').closest('div[style]');
|
||||
fireEvent.contextMenu(messageBubble!);
|
||||
// ReactionMenu renders quick reactions (❤️ is the first)
|
||||
await waitFor(() => {
|
||||
const reactionImgs = screen.getAllByRole('img').filter(img =>
|
||||
['❤️', '😂', '👍'].includes(img.getAttribute('alt') || '')
|
||||
);
|
||||
expect(reactionImgs.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-030: clicking a reaction in the menu calls reactMessage API', async () => {
|
||||
let reactCalled = false;
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'React to this', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
),
|
||||
http.post('/api/trips/1/collab/messages/1/react', async () => {
|
||||
reactCalled = true;
|
||||
return HttpResponse.json({ reactions: [{ emoji: '❤️', count: 1, users: [{ user_id: 1, username: 'testuser' }] }] });
|
||||
})
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('React to this');
|
||||
// Open reaction context menu
|
||||
const messageBubble = screen.getByText('React to this').closest('div[style]');
|
||||
fireEvent.contextMenu(messageBubble!);
|
||||
// Wait for menu and click first reaction (❤️)
|
||||
const heartImg = await screen.findByAltText('❤️');
|
||||
fireEvent.click(heartImg.closest('button')!);
|
||||
await waitFor(() => expect(reactCalled).toBe(true));
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-031: WebSocket collab:message:reacted event updates reactions', async () => {
|
||||
vi.clearAllMocks();
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Reacted message', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Reacted message');
|
||||
await waitFor(() => expect(addListener).toHaveBeenCalled());
|
||||
const handler = (addListener as any).mock.calls[0][0];
|
||||
await act(async () => {
|
||||
handler({
|
||||
type: 'collab:message:reacted',
|
||||
tripId: 1,
|
||||
messageId: 1,
|
||||
reactions: [{ emoji: '🔥', count: 1, users: [{ user_id: 2, username: 'alice' }] }],
|
||||
});
|
||||
});
|
||||
await screen.findByAltText('🔥');
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-032: clicking "Load older messages" loads paginated results', async () => {
|
||||
const initialMessages = Array.from({ length: 100 }, (_, i) => ({
|
||||
id: i + 100, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: `New ${i + 100}`, created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}));
|
||||
let callCount = 0;
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () => {
|
||||
callCount++;
|
||||
if (callCount === 1) {
|
||||
return HttpResponse.json({ messages: initialMessages, total: 120 });
|
||||
}
|
||||
return HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Older message', created_at: '2020-01-01T10:00:00.000Z',
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 120,
|
||||
});
|
||||
})
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('New 100');
|
||||
const loadMoreBtn = screen.getByRole('button', { name: /load/i });
|
||||
await user.click(loadMoreBtn);
|
||||
await screen.findByText('Older message');
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-033: clicking delete on own message marks it as deleted', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: currentUser.id, username: 'testuser', avatar_url: null,
|
||||
text: 'Delete me', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
),
|
||||
http.delete('/api/trips/1/collab/messages/1', () =>
|
||||
HttpResponse.json({ success: true })
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Delete me');
|
||||
// Delete button is in a hover-actions div with pointer-events: none — use fireEvent
|
||||
const deleteBtn = screen.getByTitle('Delete');
|
||||
fireEvent.click(deleteBtn);
|
||||
// handleDelete uses a 400ms setTimeout before calling the API
|
||||
await waitFor(
|
||||
() => expect(screen.getByText(/deleted/i)).toBeInTheDocument(),
|
||||
{ timeout: 1500 }
|
||||
);
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-034: single-emoji message renders as big emoji', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: '👍', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('👍');
|
||||
// Big emoji renders in a div with fontSize: 40px — include emojiEl itself in search
|
||||
const emojiEl = screen.getByText('👍');
|
||||
let el: HTMLElement | null = emojiEl as HTMLElement;
|
||||
let foundBigEmoji = false;
|
||||
while (el) {
|
||||
const styleAttr = el.getAttribute('style');
|
||||
if (styleAttr && styleAttr.includes('font-size: 40px')) {
|
||||
foundBigEmoji = true;
|
||||
break;
|
||||
}
|
||||
el = el.parentElement;
|
||||
}
|
||||
expect(foundBigEmoji).toBe(true);
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-035: 24h time format renders timestamp without AM/PM', async () => {
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h' } as any });
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: 'Time format test', created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText('Time format test');
|
||||
// 24h format: timestamp like "HH:MM" — no AM/PM suffix
|
||||
expect(screen.queryByText(/AM|PM/)).not.toBeInTheDocument();
|
||||
// There should be a timestamp element matching HH:MM
|
||||
const timestamp = screen.getByText((text) => /^\d{1,2}:\d{2}$/.test(text));
|
||||
expect(timestamp).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-CHAT-036: message with URL shows link preview when API returns data', async () => {
|
||||
const uniqueUrl = 'https://preview-test-unique-url-9999.example.com/page';
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/messages', () =>
|
||||
HttpResponse.json({
|
||||
messages: [{
|
||||
id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
|
||||
text: `Check this out ${uniqueUrl}`,
|
||||
created_at: new Date().toISOString(),
|
||||
reactions: [], reply_to: null, deleted: false, edited: false,
|
||||
}],
|
||||
total: 1,
|
||||
})
|
||||
),
|
||||
http.get('/api/trips/1/collab/link-preview', () =>
|
||||
HttpResponse.json({ title: 'Preview Title', description: 'Preview Desc', image: null, site_name: 'Example' })
|
||||
)
|
||||
);
|
||||
render(<CollabChat {...defaultProps} />);
|
||||
await screen.findByText(/Check this out/);
|
||||
await waitFor(
|
||||
() => expect(screen.getByText('Preview Title')).toBeInTheDocument(),
|
||||
{ timeout: 3000 }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,144 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, fireEvent } from '../../../tests/helpers/render'
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store'
|
||||
import { buildUser } from '../../../tests/helpers/factories'
|
||||
import { useAuthStore } from '../../store/authStore'
|
||||
|
||||
vi.mock('./CollabChat', () => ({ default: () => <div data-testid="collab-chat">Chat</div> }))
|
||||
vi.mock('./CollabNotes', () => ({ default: () => <div data-testid="collab-notes">Notes</div> }))
|
||||
vi.mock('./CollabPolls', () => ({ default: () => <div data-testid="collab-polls">Polls</div> }))
|
||||
vi.mock('./WhatsNextWidget', () => ({ default: () => <div data-testid="whats-next">WhatsNext</div> }))
|
||||
vi.mock('../../api/websocket', () => ({
|
||||
connect: vi.fn(),
|
||||
disconnect: vi.fn(),
|
||||
getSocketId: vi.fn(() => null),
|
||||
setRefetchCallback: vi.fn(),
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
}))
|
||||
|
||||
import CollabPanel from './CollabPanel'
|
||||
|
||||
let originalInnerWidth: number
|
||||
|
||||
function setViewport(width: number) {
|
||||
Object.defineProperty(window, 'innerWidth', { value: width, writable: true, configurable: true })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
}
|
||||
|
||||
describe('CollabPanel', () => {
|
||||
beforeEach(() => {
|
||||
originalInnerWidth = window.innerWidth
|
||||
resetAllStores()
|
||||
seedStore(useAuthStore, { user: buildUser() })
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
Object.defineProperty(window, 'innerWidth', { value: originalInnerWidth, writable: true, configurable: true })
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-001
|
||||
it('desktop layout renders all four panels', () => {
|
||||
setViewport(1280)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('whats-next')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-002
|
||||
it('mobile layout renders tab bar, not all panels at once', () => {
|
||||
setViewport(375)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
// Tab buttons exist
|
||||
expect(screen.getByRole('button', { name: /chat/i })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: /notes/i })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: /polls/i })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: /what.?s next/i })).toBeInTheDocument()
|
||||
// Only chat visible by default
|
||||
expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
|
||||
expect(screen.queryByTestId('collab-polls')).not.toBeInTheDocument()
|
||||
expect(screen.queryByTestId('whats-next')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-003
|
||||
it('mobile: clicking Notes tab switches to CollabNotes', () => {
|
||||
setViewport(375)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: /notes/i }))
|
||||
expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-004
|
||||
it('mobile: clicking Polls tab switches to CollabPolls', () => {
|
||||
setViewport(375)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: /polls/i }))
|
||||
expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-005
|
||||
it('mobile: clicking What\'s Next tab shows WhatsNextWidget', () => {
|
||||
setViewport(375)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: /what.?s next/i }))
|
||||
expect(screen.getByTestId('whats-next')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-006
|
||||
it('mobile: active tab button has accent background style', () => {
|
||||
setViewport(375)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
const chatButton = screen.getByRole('button', { name: /chat/i })
|
||||
expect(chatButton.style.background).toBe('var(--accent)')
|
||||
const notesButton = screen.getByRole('button', { name: /notes/i })
|
||||
expect(notesButton.style.background).toBe('transparent')
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-007
|
||||
it('mobile: default active tab is Chat', () => {
|
||||
setViewport(375)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-008
|
||||
it('tripMembers prop is forwarded to WhatsNextWidget', () => {
|
||||
setViewport(1280)
|
||||
render(<CollabPanel tripId={1} tripMembers={[{ id: 5, username: 'alice', avatar_url: null }]} />)
|
||||
expect(screen.getByTestId('whats-next')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-009
|
||||
it('tripId prop is forwarded to child components', () => {
|
||||
setViewport(1280)
|
||||
render(<CollabPanel tripId={1} />)
|
||||
// All children render without errors, confirming props were forwarded
|
||||
expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FE-COMP-COLLABPANEL-010
|
||||
it('resize from desktop to mobile hides side-by-side layout', () => {
|
||||
setViewport(1280)
|
||||
const { rerender } = render(<CollabPanel tripId={1} />)
|
||||
// All four panels visible on desktop
|
||||
expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
|
||||
|
||||
// Switch to mobile
|
||||
setViewport(375)
|
||||
rerender(<CollabPanel tripId={1} />)
|
||||
|
||||
// Tab bar appears, only chat visible
|
||||
expect(screen.getByRole('button', { name: /chat/i })).toBeInTheDocument()
|
||||
expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,274 @@
|
||||
// FE-COMP-POLLS-001 to FE-COMP-POLLS-015
|
||||
|
||||
vi.mock('../../api/websocket', () => ({
|
||||
connect: vi.fn(),
|
||||
disconnect: vi.fn(),
|
||||
getSocketId: vi.fn(() => null),
|
||||
setRefetchCallback: vi.fn(),
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
}));
|
||||
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildTrip } from '../../../tests/helpers/factories';
|
||||
import CollabPolls from './CollabPolls';
|
||||
import { addListener } from '../../api/websocket';
|
||||
|
||||
const currentUser = buildUser({ id: 1, username: 'testuser' });
|
||||
|
||||
const buildPoll = (overrides: Record<string, unknown> = {}) => ({
|
||||
id: 1,
|
||||
question: 'Best destination?',
|
||||
options: [
|
||||
{ id: 1, text: 'Paris', label: 'Paris', voters: [] },
|
||||
{ id: 2, text: 'Rome', label: 'Rome', voters: [] },
|
||||
],
|
||||
multi_choice: false,
|
||||
is_closed: false,
|
||||
deadline: null,
|
||||
created_by: 1,
|
||||
created_at: new Date().toISOString(),
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const defaultProps = { tripId: 1, currentUser };
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
vi.clearAllMocks();
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [] }),
|
||||
),
|
||||
);
|
||||
seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
|
||||
seedStore(useTripStore, { trip: buildTrip({ id: 1, owner_id: 1 }) });
|
||||
});
|
||||
|
||||
describe('CollabPolls', () => {
|
||||
it('FE-COMP-POLLS-001: renders empty state when no polls exist', async () => {
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText(/no polls yet|collab\.polls\.empty/i);
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-002: shows loading spinner initially', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', async () => {
|
||||
await new Promise((r) => setTimeout(r, 200));
|
||||
return HttpResponse.json({ polls: [] });
|
||||
}),
|
||||
);
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
// The spinner is a div with animation style
|
||||
expect(
|
||||
document.querySelector('[style*="animation"]'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-003: renders poll question from API', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [buildPoll()] }),
|
||||
),
|
||||
);
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText('Best destination?');
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-004: renders poll options', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [buildPoll()] }),
|
||||
),
|
||||
);
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText('Paris');
|
||||
expect(screen.getByText('Rome')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-005: New Poll button is visible when user can edit', async () => {
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
// Wait for loading to finish
|
||||
await screen.findByText(/no polls yet|collab\.polls\.empty/i);
|
||||
expect(
|
||||
screen.getByRole('button', { name: /new/i }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-006: clicking New Poll button opens the create modal', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText(/no polls yet|collab\.polls\.empty/i);
|
||||
await user.click(screen.getByRole('button', { name: /new/i }));
|
||||
// Modal has a question placeholder input
|
||||
await screen.findByPlaceholderText(/what should we do/i);
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-007: create modal requires question and at least 2 options to enable submit', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText(/no polls yet|collab\.polls\.empty/i);
|
||||
await user.click(screen.getByRole('button', { name: /new/i }));
|
||||
|
||||
// Find submit button - it's the form submit with the create label
|
||||
const submitBtn = screen.getByRole('button', { name: /create|collab\.polls\.create/i });
|
||||
expect(submitBtn).toBeDisabled();
|
||||
|
||||
// Fill in question
|
||||
const questionInput = screen.getByPlaceholderText(/what should we do/i);
|
||||
await user.type(questionInput, 'Where to go?');
|
||||
|
||||
// Still disabled — no options filled
|
||||
expect(submitBtn).toBeDisabled();
|
||||
|
||||
// Fill in 2 options
|
||||
const optionInputs = screen.getAllByPlaceholderText(/option/i);
|
||||
await user.type(optionInputs[0], 'Beach');
|
||||
await user.type(optionInputs[1], 'Mountain');
|
||||
|
||||
expect(submitBtn).toBeEnabled();
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-008: creating a poll calls POST API and adds it to the list', async () => {
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.post('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ poll: buildPoll({ id: 99, question: 'Where to eat?' }) }),
|
||||
),
|
||||
);
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText(/no polls yet|collab\.polls\.empty/i);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /new/i }));
|
||||
await user.type(screen.getByPlaceholderText(/what should we do/i), 'Where to eat?');
|
||||
const optionInputs = screen.getAllByPlaceholderText(/option/i);
|
||||
await user.type(optionInputs[0], 'Italian');
|
||||
await user.type(optionInputs[1], 'Japanese');
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /create|collab\.polls\.create/i }));
|
||||
await screen.findByText('Where to eat?');
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-009: voting on an option calls POST vote API', async () => {
|
||||
let voteCalled = false;
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [buildPoll()] }),
|
||||
),
|
||||
http.post('/api/trips/1/collab/polls/1/vote', () => {
|
||||
voteCalled = true;
|
||||
return HttpResponse.json({
|
||||
poll: buildPoll({
|
||||
options: [
|
||||
{ id: 1, text: 'Paris', label: 'Paris', voters: [{ user_id: 1, username: 'testuser', avatar_url: null }] },
|
||||
{ id: 2, text: 'Rome', label: 'Rome', voters: [] },
|
||||
],
|
||||
}),
|
||||
});
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText('Paris');
|
||||
await user.click(screen.getByText('Paris'));
|
||||
await waitFor(() => expect(voteCalled).toBe(true));
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-010: closed poll shows "Closed" badge', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [buildPoll({ is_closed: true })] }),
|
||||
),
|
||||
);
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText(/closed/i);
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-011: closed poll options are disabled (cannot vote)', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [buildPoll({ is_closed: true })] }),
|
||||
),
|
||||
);
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText('Paris');
|
||||
const parisBtn = screen.getByText('Paris').closest('button');
|
||||
expect(parisBtn).toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-012: delete button calls DELETE API and removes poll', async () => {
|
||||
let deleteCalled = false;
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [buildPoll({ id: 5 })] }),
|
||||
),
|
||||
http.delete('/api/trips/1/collab/polls/5', () => {
|
||||
deleteCalled = true;
|
||||
return HttpResponse.json({ success: true });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText('Best destination?');
|
||||
|
||||
// Delete button has a title with "delete"
|
||||
const deleteBtn = screen.getByTitle(/delete/i);
|
||||
await user.click(deleteBtn);
|
||||
|
||||
await waitFor(() => expect(deleteCalled).toBe(true));
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByText('Best destination?')).not.toBeInTheDocument(),
|
||||
);
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-013: WebSocket collab:poll:created event adds poll', async () => {
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText(/no polls yet|collab\.polls\.empty/i);
|
||||
|
||||
// Get the WS listener that was registered
|
||||
const listener = (addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
|
||||
listener({ type: 'collab:poll:created', poll: buildPoll({ id: 77, question: 'Live poll?' }) });
|
||||
|
||||
await screen.findByText('Live poll?');
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-014: WebSocket collab:poll:deleted event removes poll', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/collab/polls', () =>
|
||||
HttpResponse.json({ polls: [buildPoll({ id: 3 })] }),
|
||||
),
|
||||
);
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText('Best destination?');
|
||||
|
||||
const listener = (addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
|
||||
listener({ type: 'collab:poll:deleted', pollId: 3 });
|
||||
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByText('Best destination?')).not.toBeInTheDocument(),
|
||||
);
|
||||
});
|
||||
|
||||
it('FE-COMP-POLLS-015: adding a third option in create modal', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CollabPolls {...defaultProps} />);
|
||||
await screen.findByText(/no polls yet|collab\.polls\.empty/i);
|
||||
await user.click(screen.getByRole('button', { name: /new/i }));
|
||||
|
||||
// Initially 2 option inputs
|
||||
let optionInputs = screen.getAllByPlaceholderText(/option/i);
|
||||
expect(optionInputs).toHaveLength(2);
|
||||
|
||||
// Click "Add option"
|
||||
await user.click(screen.getByText(/add option/i));
|
||||
|
||||
optionInputs = screen.getAllByPlaceholderText(/option/i);
|
||||
expect(optionInputs).toHaveLength(3);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,584 @@
|
||||
// FE-COMP-FILEMANAGER-001 to FE-COMP-FILEMANAGER-012
|
||||
import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildTrip } from '../../../tests/helpers/factories';
|
||||
import FileManager from './FileManager';
|
||||
|
||||
// Mock getAuthUrl
|
||||
vi.mock('../../api/authUrl', () => ({
|
||||
getAuthUrl: vi.fn().mockResolvedValue('http://localhost/signed-url'),
|
||||
}));
|
||||
|
||||
// Mock filesApi
|
||||
vi.mock('../../api/client', async (importOriginal) => {
|
||||
const original = (await importOriginal()) as any;
|
||||
return {
|
||||
...original,
|
||||
filesApi: {
|
||||
list: vi.fn().mockResolvedValue({ files: [] }),
|
||||
toggleStar: vi.fn().mockResolvedValue({}),
|
||||
restore: vi.fn().mockResolvedValue({}),
|
||||
permanentDelete: vi.fn().mockResolvedValue({}),
|
||||
emptyTrash: vi.fn().mockResolvedValue({}),
|
||||
upload: vi.fn().mockResolvedValue({ file: { id: 99 } }),
|
||||
update: vi.fn().mockResolvedValue({}),
|
||||
addLink: vi.fn().mockResolvedValue({}),
|
||||
removeLink: vi.fn().mockResolvedValue({}),
|
||||
getLinks: vi.fn().mockResolvedValue({ links: [] }),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
import { filesApi } from '../../api/client';
|
||||
|
||||
const buildFile = (overrides = {}) => ({
|
||||
id: 1,
|
||||
original_name: 'report.pdf',
|
||||
mime_type: 'application/pdf',
|
||||
file_size: 51200,
|
||||
created_at: '2025-01-10T08:00:00Z',
|
||||
url: '/uploads/trips/1/report.pdf',
|
||||
starred: false,
|
||||
deleted_at: null,
|
||||
place_id: null,
|
||||
reservation_id: null,
|
||||
day_id: null,
|
||||
uploaded_by: 1,
|
||||
uploader_name: 'Alice',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const defaultProps = {
|
||||
files: [],
|
||||
onUpload: vi.fn().mockResolvedValue({}),
|
||||
onDelete: vi.fn().mockResolvedValue(undefined),
|
||||
onUpdate: vi.fn().mockResolvedValue(undefined),
|
||||
places: [],
|
||||
days: [],
|
||||
assignments: {},
|
||||
reservations: [],
|
||||
tripId: 1,
|
||||
allowedFileTypes: null,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
vi.clearAllMocks();
|
||||
// Seed auth as admin so useCanDo() returns true for all permissions
|
||||
seedStore(useAuthStore, { user: buildUser({ role: 'admin' }), isAuthenticated: true });
|
||||
seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
|
||||
|
||||
// Default trash endpoint
|
||||
server.use(
|
||||
http.get('/api/trips/:tripId/files', ({ request }) => {
|
||||
const url = new URL(request.url);
|
||||
if (url.searchParams.get('trash') === 'true') {
|
||||
return HttpResponse.json({ files: [] });
|
||||
}
|
||||
return HttpResponse.json({ files: [] });
|
||||
}),
|
||||
);
|
||||
|
||||
// Stub window.confirm
|
||||
vi.spyOn(window, 'confirm').mockReturnValue(true);
|
||||
});
|
||||
|
||||
describe('FileManager', () => {
|
||||
it('FE-COMP-FILEMANAGER-001: renders empty state when no files', async () => {
|
||||
render(<FileManager {...defaultProps} files={[]} />);
|
||||
// The dropzone should be visible (Upload icon area)
|
||||
expect(screen.getByText(/drop/i)).toBeInTheDocument();
|
||||
// No file rows
|
||||
expect(screen.queryByText('report.pdf')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-002: renders file list when files are provided', async () => {
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} />);
|
||||
expect(screen.getByText('report.pdf')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-003: file type filter tabs are present', async () => {
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} />);
|
||||
// Filter tabs should be present — match the button elements specifically
|
||||
expect(screen.getByRole('button', { name: /^all$/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /^pdfs$/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /^images$/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-004: images tab filters to image files only', async () => {
|
||||
const files = [
|
||||
buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo.jpg' }),
|
||||
buildFile({ id: 2, mime_type: 'application/pdf', original_name: 'doc.pdf' }),
|
||||
];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
// Both should be visible initially
|
||||
expect(screen.getByText('photo.jpg')).toBeInTheDocument();
|
||||
expect(screen.getByText('doc.pdf')).toBeInTheDocument();
|
||||
|
||||
// Click Images filter tab
|
||||
const user = userEvent.setup();
|
||||
const imageTab = screen.getByRole('button', { name: /^images$/i });
|
||||
await user.click(imageTab);
|
||||
|
||||
// Only photo should be visible
|
||||
expect(screen.getByText('photo.jpg')).toBeInTheDocument();
|
||||
expect(screen.queryByText('doc.pdf')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-005: star button calls filesApi.toggleStar', async () => {
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Find the star button by its title
|
||||
const starBtn = screen.getByTitle(/star/i);
|
||||
await user.click(starBtn);
|
||||
|
||||
expect(filesApi.toggleStar).toHaveBeenCalledWith(1, 1);
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-006: trash toggle loads and displays trashed files', async () => {
|
||||
// filesApi.list is mocked — configure it to return trash files when called with trash=true
|
||||
(filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
|
||||
if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
|
||||
return Promise.resolve({ files: [] });
|
||||
});
|
||||
|
||||
render(<FileManager {...defaultProps} files={[]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Click trash toggle button
|
||||
const trashBtn = screen.getByText(/trash/i);
|
||||
await user.click(trashBtn);
|
||||
|
||||
// Trashed file should appear
|
||||
await screen.findByText('old.pdf');
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-007: restore button calls filesApi.restore', async () => {
|
||||
(filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
|
||||
if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
|
||||
return Promise.resolve({ files: [] });
|
||||
});
|
||||
|
||||
render(<FileManager {...defaultProps} files={[]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open trash
|
||||
const trashBtn = screen.getByText(/trash/i);
|
||||
await user.click(trashBtn);
|
||||
await screen.findByText('old.pdf');
|
||||
|
||||
// Click restore button
|
||||
const restoreBtn = screen.getByTitle(/restore/i);
|
||||
await user.click(restoreBtn);
|
||||
|
||||
expect(filesApi.restore).toHaveBeenCalledWith(1, 5);
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-008: permanent delete calls filesApi.permanentDelete after confirm', async () => {
|
||||
(filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
|
||||
if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
|
||||
return Promise.resolve({ files: [] });
|
||||
});
|
||||
|
||||
render(<FileManager {...defaultProps} files={[]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open trash
|
||||
await user.click(screen.getByText(/trash/i));
|
||||
await screen.findByText('old.pdf');
|
||||
|
||||
// Click permanent delete (the Trash2 icon button in trash view)
|
||||
const deleteBtn = screen.getByTitle(/delete/i);
|
||||
await user.click(deleteBtn);
|
||||
|
||||
expect(filesApi.permanentDelete).toHaveBeenCalledWith(1, 5);
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-009: empty trash calls filesApi.emptyTrash', async () => {
|
||||
(filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
|
||||
if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
|
||||
return Promise.resolve({ files: [] });
|
||||
});
|
||||
|
||||
render(<FileManager {...defaultProps} files={[]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open trash
|
||||
await user.click(screen.getByText(/trash/i));
|
||||
await screen.findByText('old.pdf');
|
||||
|
||||
// Click "Empty Trash" button
|
||||
const emptyTrashBtn = await screen.findByText(/empty trash/i);
|
||||
await user.click(emptyTrashBtn);
|
||||
|
||||
expect(filesApi.emptyTrash).toHaveBeenCalledWith(1);
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-010: image file click opens lightbox', async () => {
|
||||
const files = [
|
||||
buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo.jpg' }),
|
||||
];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Click the file name to open lightbox
|
||||
await user.click(screen.getByText('photo.jpg'));
|
||||
|
||||
// Lightbox should appear — it has a fixed position overlay with the filename and a counter
|
||||
await waitFor(() => {
|
||||
// The lightbox header shows the filename and "1 / 1"
|
||||
expect(screen.getByText('1 / 1')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-011: escape key closes lightbox', async () => {
|
||||
const files = [
|
||||
buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo.jpg' }),
|
||||
];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open lightbox
|
||||
await user.click(screen.getByText('photo.jpg'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('1 / 1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Press Escape
|
||||
await user.keyboard('{Escape}');
|
||||
|
||||
// Lightbox should be gone
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('1 / 1')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-013: soft-delete button calls onDelete', async () => {
|
||||
const onDelete = vi.fn().mockResolvedValue(undefined);
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} onDelete={onDelete} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// The delete (trash) button on a non-trash row is titled 'Delete'
|
||||
const deleteBtn = screen.getByTitle(/delete/i);
|
||||
await user.click(deleteBtn);
|
||||
|
||||
expect(onDelete).toHaveBeenCalledWith(1);
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-014: PDF file click opens preview modal', async () => {
|
||||
const files = [buildFile({ id: 1, mime_type: 'application/pdf', original_name: 'report.pdf' })];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Click the file name — for a non-image this opens the PDF preview modal
|
||||
await user.click(screen.getByText('report.pdf'));
|
||||
|
||||
// PDF preview modal should appear with the filename in the header
|
||||
await waitFor(() => {
|
||||
// The preview modal header shows the filename
|
||||
const headers = screen.getAllByText('report.pdf');
|
||||
expect(headers.length).toBeGreaterThanOrEqual(2); // in list + in modal header
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-015: file with uploader name shows avatar chip initials', () => {
|
||||
const files = [buildFile({ uploaded_by_name: 'Alice Smith' })];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
|
||||
// The AvatarChip shows the first letter of the name
|
||||
expect(screen.getByText('A')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-016: multiple images in lightbox shows thumbnail strip', async () => {
|
||||
const files = [
|
||||
buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo1.jpg' }),
|
||||
buildFile({ id: 2, mime_type: 'image/jpeg', original_name: 'photo2.jpg' }),
|
||||
];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open lightbox on first image
|
||||
await user.click(screen.getByText('photo1.jpg'));
|
||||
|
||||
// Lightbox shows "1 / 2" counter
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('1 / 2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-017: file size is displayed', () => {
|
||||
const files = [buildFile({ file_size: 51200 })];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
expect(screen.getByText('50.0 KB')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-018: starred filter shows only starred files', async () => {
|
||||
const files = [
|
||||
buildFile({ id: 1, original_name: 'starred.pdf', starred: true }),
|
||||
buildFile({ id: 2, original_name: 'normal.pdf', starred: false }),
|
||||
];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// The starred filter tab only appears when there are starred files
|
||||
const starredTab = screen.getByRole('button', { name: '' }); // Star icon button in filter tabs
|
||||
await user.click(starredTab);
|
||||
|
||||
expect(screen.getByText('starred.pdf')).toBeInTheDocument();
|
||||
expect(screen.queryByText('normal.pdf')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-019: clicking assign button opens assign modal', async () => {
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Pencil/assign button
|
||||
const assignBtn = screen.getByTitle(/assign/i);
|
||||
await user.click(assignBtn);
|
||||
|
||||
// Assign modal should appear (it has a title and a close button)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/assign/i, { selector: 'div' })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-020: assign modal shows places list', async () => {
|
||||
const { buildPlace } = await import('../../../tests/helpers/factories');
|
||||
const place = buildPlace({ id: 10, name: 'Eiffel Tower' });
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
const assignBtn = screen.getByTitle(/assign/i);
|
||||
await user.click(assignBtn);
|
||||
|
||||
await screen.findByText('Eiffel Tower');
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-021: file description is shown when present', () => {
|
||||
const files = [buildFile({ description: 'A very important document' })];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
expect(screen.getByText('A very important document')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-022: PDF preview modal can be closed', async () => {
|
||||
const files = [buildFile({ id: 1, mime_type: 'application/pdf', original_name: 'report.pdf' })];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open preview
|
||||
await user.click(screen.getByText('report.pdf'));
|
||||
|
||||
// Multiple 'report.pdf' elements now (list + modal header)
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByText('report.pdf').length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
// Close via X button in the modal (second X button — first might be something else)
|
||||
const closeButtons = screen.getAllByRole('button', { name: '' });
|
||||
// Find a close button near the modal header — click the last X-like button
|
||||
const xBtn = closeButtons.find(btn => btn.closest('[style*="z-index: 10000"]'));
|
||||
if (xBtn) await user.click(xBtn);
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-023: assign modal shows reservations list', async () => {
|
||||
const { buildReservation } = await import('../../../tests/helpers/factories');
|
||||
const reservation = buildReservation({ id: 20, name: 'Hotel Paris' });
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} reservations={[reservation]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
const assignBtn = screen.getByTitle(/assign/i);
|
||||
await user.click(assignBtn);
|
||||
|
||||
await screen.findByText('Hotel Paris');
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-024: clicking a place in assign modal calls filesApi.update', async () => {
|
||||
const { buildPlace } = await import('../../../tests/helpers/factories');
|
||||
const place = buildPlace({ id: 10, name: 'Louvre Museum' });
|
||||
const file = buildFile({ id: 1 });
|
||||
const onUpdate = vi.fn().mockResolvedValue(undefined);
|
||||
render(<FileManager {...defaultProps} files={[file]} places={[place]} onUpdate={onUpdate} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open assign modal
|
||||
await user.click(screen.getByTitle(/assign/i));
|
||||
await screen.findByText('Louvre Museum');
|
||||
|
||||
// Click on the place button to link it
|
||||
await user.click(screen.getByText('Louvre Museum'));
|
||||
|
||||
expect(filesApi.update).toHaveBeenCalledWith(1, 1, { place_id: 10 });
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-025: clicking a reservation in assign modal calls filesApi.update', async () => {
|
||||
const { buildReservation } = await import('../../../tests/helpers/factories');
|
||||
const reservation = buildReservation({ id: 20, name: 'Train Ticket' });
|
||||
const file = buildFile({ id: 1 });
|
||||
render(<FileManager {...defaultProps} files={[file]} reservations={[reservation]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open assign modal
|
||||
await user.click(screen.getByTitle(/assign/i));
|
||||
await screen.findByText('Train Ticket');
|
||||
|
||||
// Click on the reservation button to link it
|
||||
await user.click(screen.getByText('Train Ticket'));
|
||||
|
||||
expect(filesApi.update).toHaveBeenCalledWith(1, 1, { reservation_id: 20 });
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-026: assign modal with both places and reservations shows both sections', async () => {
|
||||
const { buildPlace, buildReservation } = await import('../../../tests/helpers/factories');
|
||||
const place = buildPlace({ id: 10, name: 'Notre Dame' });
|
||||
const reservation = buildReservation({ id: 20, name: 'Airbnb' });
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} reservations={[reservation]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
await user.click(screen.getByTitle(/assign/i));
|
||||
await screen.findByText('Notre Dame');
|
||||
await screen.findByText('Airbnb');
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-027: paste event uploads file when user can upload', async () => {
|
||||
const onUpload = vi.fn().mockResolvedValue({ file: { id: 55 } });
|
||||
render(<FileManager {...defaultProps} onUpload={onUpload} />);
|
||||
|
||||
const container = document.querySelector('.flex.flex-col') as HTMLElement;
|
||||
const file = new File(['data'], 'pasted.png', { type: 'image/png' });
|
||||
|
||||
// Manually build a paste event with a mock clipboardData.items
|
||||
const mockItem = { kind: 'file', getAsFile: () => file };
|
||||
const pasteEvent = new Event('paste', { bubbles: true });
|
||||
Object.defineProperty(pasteEvent, 'clipboardData', {
|
||||
value: { items: [mockItem] },
|
||||
});
|
||||
|
||||
await fireEvent(container, pasteEvent);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onUpload).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-028: upload with places open assign modal after upload', async () => {
|
||||
const { buildPlace } = await import('../../../tests/helpers/factories');
|
||||
const place = buildPlace({ id: 10, name: 'Sagrada Familia' });
|
||||
const onUpload = vi.fn().mockResolvedValue({ file: { id: 77 } });
|
||||
|
||||
render(<FileManager {...defaultProps} onUpload={onUpload} places={[place]} />);
|
||||
|
||||
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
const file = new File(['data'], 'photo.jpg', { type: 'image/jpeg' });
|
||||
await userEvent.upload(input, file);
|
||||
|
||||
// After successful upload with places present, assign modal opens
|
||||
await waitFor(() => {
|
||||
expect(onUpload).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-029: assign modal with days+assignments shows day group', async () => {
|
||||
const { buildPlace, buildDay } = await import('../../../tests/helpers/factories');
|
||||
const place = buildPlace({ id: 10, name: 'Arc de Triomphe' });
|
||||
const day = buildDay({ id: 5, date: '2025-06-01', day_number: 1 });
|
||||
const assignments = { '5': [{ id: 1, day_id: 5, place_id: 10, order_index: 0, place }] };
|
||||
|
||||
render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} days={[day]} assignments={assignments} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
await user.click(screen.getByTitle(/assign/i));
|
||||
await screen.findByText('Arc de Triomphe');
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-030: file with linked place shows source badge', async () => {
|
||||
const { buildPlace } = await import('../../../tests/helpers/factories');
|
||||
const place = buildPlace({ id: 10, name: 'Colosseum' });
|
||||
const file = buildFile({ place_id: 10 });
|
||||
|
||||
render(<FileManager {...defaultProps} files={[file]} places={[place]} />);
|
||||
|
||||
// Source badge text includes place name
|
||||
await screen.findByText(/Colosseum/);
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-031: unlink place from assign modal calls filesApi.update', async () => {
|
||||
const { buildPlace } = await import('../../../tests/helpers/factories');
|
||||
const place = buildPlace({ id: 10, name: 'Venice Beach' });
|
||||
// File already has place_id set to 10 (linked)
|
||||
const file = buildFile({ id: 1, place_id: 10 });
|
||||
|
||||
render(<FileManager {...defaultProps} files={[file]} places={[place]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Open assign modal
|
||||
await user.click(screen.getByTitle(/assign/i));
|
||||
await screen.findByText('Venice Beach');
|
||||
|
||||
// Clicking the linked place should unlink it
|
||||
await user.click(screen.getByText('Venice Beach'));
|
||||
expect(filesApi.update).toHaveBeenCalledWith(1, 1, { place_id: null });
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-032: unlink reservation from assign modal calls filesApi.update', async () => {
|
||||
const { buildReservation } = await import('../../../tests/helpers/factories');
|
||||
const reservation = buildReservation({ id: 20, name: 'Museum Pass' });
|
||||
// File already has reservation_id set to 20
|
||||
const file = buildFile({ id: 1, reservation_id: 20 });
|
||||
|
||||
render(<FileManager {...defaultProps} files={[file]} reservations={[reservation]} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
await user.click(screen.getByTitle(/assign/i));
|
||||
await screen.findByText('Museum Pass');
|
||||
|
||||
// Clicking the linked reservation should unlink it
|
||||
await user.click(screen.getByText('Museum Pass'));
|
||||
expect(filesApi.update).toHaveBeenCalledWith(1, 1, { reservation_id: null });
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-033: opening PDF preview and closing via backdrop', async () => {
|
||||
const files = [buildFile({ id: 1, mime_type: 'application/pdf', original_name: 'doc.pdf' })];
|
||||
render(<FileManager {...defaultProps} files={files} />);
|
||||
const user = userEvent.setup();
|
||||
|
||||
await user.click(screen.getByText('doc.pdf'));
|
||||
|
||||
// Modal opens (multiple occurrences of doc.pdf)
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByText('doc.pdf').length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
// Click the backdrop to close
|
||||
const backdrop = document.querySelector('[style*="z-index: 10000"]') as HTMLElement;
|
||||
if (backdrop) await user.click(backdrop);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByText('doc.pdf').length).toBeLessThan(2);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-FILEMANAGER-012: upload via dropzone calls onUpload', async () => {
|
||||
const onUpload = vi.fn().mockResolvedValue({ file: { id: 99 } });
|
||||
render(<FileManager {...defaultProps} onUpload={onUpload} />);
|
||||
|
||||
// Find the hidden file input from the dropzone
|
||||
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
expect(input).toBeTruthy();
|
||||
|
||||
const file = new File(['hello'], 'test.pdf', { type: 'application/pdf' });
|
||||
|
||||
await userEvent.upload(input, file);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onUpload).toHaveBeenCalled();
|
||||
const call = onUpload.mock.calls[0];
|
||||
expect(call[0]).toBeInstanceOf(FormData);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,116 @@
|
||||
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { act, fireEvent } from '@testing-library/react';
|
||||
import { render, screen } from '../../../tests/helpers/render';
|
||||
import DemoBanner from './DemoBanner';
|
||||
|
||||
describe('DemoBanner', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-001
|
||||
it('renders without crashing', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(document.body).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-002
|
||||
it('overlay is visible on initial render with dismiss button', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText('Got it')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-003
|
||||
it('shows English welcome title by default', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText(/Welcome to/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-004
|
||||
it('clicking "Got it" dismisses the banner', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DemoBanner />);
|
||||
const button = screen.getByText('Got it');
|
||||
await user.click(button);
|
||||
expect(screen.queryByText('Got it')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-005
|
||||
it('clicking the overlay backdrop dismisses the banner', () => {
|
||||
const { container } = render(<DemoBanner />);
|
||||
// The outermost fixed div is the overlay backdrop
|
||||
const overlay = container.firstChild as HTMLElement;
|
||||
fireEvent.click(overlay);
|
||||
expect(screen.queryByText('Got it')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-006
|
||||
it('clicking the inner card does NOT dismiss', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DemoBanner />);
|
||||
// The inner card is the direct parent of the "Got it" button's container
|
||||
const card = screen.getByText('Got it').closest('div[style*="background: white"]')!;
|
||||
await user.click(card);
|
||||
expect(screen.getByText('Got it')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-007
|
||||
it('shows reset timer', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText(/Next reset in/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-008
|
||||
it('shows upload-disabled notice', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText(/File uploads.*disabled in demo/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-009
|
||||
it('shows "What is TREK?" section', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText('What is TREK?')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-010
|
||||
it('shows addon cards', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText('Vacay')).toBeInTheDocument();
|
||||
expect(screen.getByText('Atlas')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-011
|
||||
it('shows full version features section', () => {
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText(/Additionally in the full version/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// FE-COMP-DEMOBANNER-012
|
||||
it('self-host link points to GitHub', () => {
|
||||
render(<DemoBanner />);
|
||||
const link = screen.getByText('self-host it').closest('a')!;
|
||||
expect(link).toHaveAttribute('href', 'https://github.com/mauriceboe/TREK');
|
||||
expect(link).toHaveAttribute('target', '_blank');
|
||||
});
|
||||
|
||||
// Timer update test
|
||||
it('updates countdown timer after interval tick', async () => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: false });
|
||||
// Set time to XX:30 so minutesLeft = 59 - 30 = 29
|
||||
vi.setSystemTime(new Date(2026, 3, 7, 12, 30, 0));
|
||||
render(<DemoBanner />);
|
||||
expect(screen.getByText(/29 minutes/)).toBeInTheDocument();
|
||||
|
||||
// Advance to XX:31 and tick the interval; wrap in act so React flushes state update
|
||||
await act(async () => {
|
||||
vi.setSystemTime(new Date(2026, 3, 7, 12, 31, 0));
|
||||
vi.advanceTimersByTime(10000);
|
||||
});
|
||||
expect(screen.getByText(/28 minutes/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,12 +1,43 @@
|
||||
// FE-COMP-BELL-001 to FE-COMP-BELL-010
|
||||
// FE-COMP-BELL-001 to FE-COMP-BELL-020
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { vi } from 'vitest';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useInAppNotificationStore } from '../../store/inAppNotificationStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser } from '../../../tests/helpers/factories';
|
||||
import InAppNotificationBell from './InAppNotificationBell';
|
||||
|
||||
let _notifId = 1;
|
||||
function buildNotification(overrides: Record<string, unknown> = {}) {
|
||||
return {
|
||||
id: _notifId++,
|
||||
type: 'simple',
|
||||
scope: 'trip',
|
||||
target: 1,
|
||||
sender_id: 2,
|
||||
sender_username: 'alice',
|
||||
sender_avatar: null,
|
||||
recipient_id: 1,
|
||||
title_key: 'test',
|
||||
title_params: '{}',
|
||||
text_key: 'test.text',
|
||||
text_params: '{}',
|
||||
positive_text_key: null,
|
||||
negative_text_key: null,
|
||||
response: null,
|
||||
navigate_text_key: null,
|
||||
navigate_target: null,
|
||||
is_read: 0,
|
||||
created_at: '2025-01-01T00:00:00.000Z',
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
beforeAll(() => {
|
||||
_notifId = 1;
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
|
||||
@@ -102,4 +133,115 @@ describe('InAppNotificationBell', () => {
|
||||
expect(screen.queryByText('150')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('99+')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-011: Delete all button shown when notifications exist', async () => {
|
||||
const user = userEvent.setup();
|
||||
seedStore(useInAppNotificationStore, { notifications: [buildNotification()], unreadCount: 1, isLoading: false });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
expect(screen.getByTitle('Delete all')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-012: Delete all button NOT shown when no notifications', async () => {
|
||||
const user = userEvent.setup();
|
||||
seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false, fetchNotifications: vi.fn() });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
await screen.findByText('Notifications');
|
||||
expect(screen.queryByTitle('Delete all')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-013: Mark all read button NOT shown when unreadCount is 0', async () => {
|
||||
const user = userEvent.setup();
|
||||
seedStore(useInAppNotificationStore, { notifications: [buildNotification({ is_read: 1 })], unreadCount: 0, isLoading: false, fetchNotifications: vi.fn(), fetchUnreadCount: vi.fn() });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
await screen.findByText('Notifications');
|
||||
expect(screen.queryByTitle('Mark all read')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-014: clicking Mark all read calls store action', async () => {
|
||||
const user = userEvent.setup();
|
||||
const markAllRead = vi.fn();
|
||||
seedStore(useInAppNotificationStore, { notifications: [buildNotification()], unreadCount: 1, isLoading: false, markAllRead });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
await user.click(screen.getByTitle('Mark all read'));
|
||||
expect(markAllRead).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-015: clicking Delete all calls store action', async () => {
|
||||
const user = userEvent.setup();
|
||||
const deleteAll = vi.fn();
|
||||
seedStore(useInAppNotificationStore, { notifications: [buildNotification()], unreadCount: 1, isLoading: false, deleteAll });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
await user.click(screen.getByTitle('Delete all'));
|
||||
expect(deleteAll).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-016: Show all notifications navigates to /notifications', async () => {
|
||||
const user = userEvent.setup();
|
||||
seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
await screen.findByText('Notifications');
|
||||
const showAllBtn = screen.getByText('Show all notifications');
|
||||
await user.click(showAllBtn);
|
||||
// Panel should close after clicking show all
|
||||
expect(screen.queryByText('No notifications')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-017: loading spinner shown when isLoading=true and notifications empty', async () => {
|
||||
const user = userEvent.setup();
|
||||
seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: true, fetchNotifications: vi.fn() });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
const spinner = document.querySelector('.animate-spin');
|
||||
expect(spinner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-018: notification items rendered up to 10', async () => {
|
||||
const user = userEvent.setup();
|
||||
const notifications = Array.from({ length: 12 }, (_, i) => buildNotification({ id: i + 1 }));
|
||||
seedStore(useInAppNotificationStore, { notifications, unreadCount: 12, isLoading: false });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
await screen.findByText('Notifications');
|
||||
// Each InAppNotificationItem renders with py-3 px-4 pattern; count rendered items
|
||||
const items = document.querySelectorAll('.relative.px-4.py-3');
|
||||
expect(items.length).toBeLessThanOrEqual(10);
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-019: clicking outside the panel closes it', async () => {
|
||||
const user = userEvent.setup();
|
||||
seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false });
|
||||
render(<InAppNotificationBell />);
|
||||
await user.click(screen.getAllByRole('button')[0]);
|
||||
await screen.findByText('Notifications');
|
||||
// The backdrop div is the fixed overlay — click it to close
|
||||
const backdrop = document.querySelector('div[style*="position: fixed"][style*="inset: 0"]') as HTMLElement;
|
||||
expect(backdrop).toBeInTheDocument();
|
||||
await user.click(backdrop);
|
||||
// Panel should be gone — "No notifications" text no longer visible
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('No notifications')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-BELL-020: panel does not fetch again when already open and clicked again', async () => {
|
||||
const user = userEvent.setup();
|
||||
const fetchNotifications = vi.fn();
|
||||
seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false, fetchNotifications });
|
||||
render(<InAppNotificationBell />);
|
||||
const bell = screen.getAllByRole('button')[0];
|
||||
// Open
|
||||
await user.click(bell);
|
||||
// Close
|
||||
await user.click(bell);
|
||||
// Re-open
|
||||
await user.click(bell);
|
||||
// fetchNotifications should be called once per open (2 total)
|
||||
expect(fetchNotifications).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,208 @@
|
||||
import React from 'react'
|
||||
import { describe, it, expect, vi, afterEach } from 'vitest'
|
||||
import { render, screen } from '../../../tests/helpers/render'
|
||||
import { fireEvent } from '@testing-library/react'
|
||||
import { resetAllStores } from '../../../tests/helpers/store'
|
||||
import { buildPlace } from '../../../tests/helpers/factories'
|
||||
import * as photoService from '../../services/photoService'
|
||||
|
||||
vi.mock('react-leaflet', () => ({
|
||||
MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
|
||||
TileLayer: () => <div data-testid="tile-layer" />,
|
||||
Marker: ({ children, eventHandlers, position }: any) => (
|
||||
<div
|
||||
data-testid="marker"
|
||||
data-lat={position[0]}
|
||||
data-lng={position[1]}
|
||||
onClick={() => eventHandlers?.click?.()}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
Tooltip: ({ children }: any) => <div data-testid="tooltip">{children}</div>,
|
||||
Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
|
||||
CircleMarker: () => <div data-testid="circle-marker" />,
|
||||
Circle: () => <div data-testid="circle" />,
|
||||
useMap: () => ({
|
||||
panTo: vi.fn(),
|
||||
setView: vi.fn(),
|
||||
fitBounds: vi.fn(),
|
||||
getZoom: () => 10,
|
||||
on: vi.fn(),
|
||||
off: vi.fn(),
|
||||
panBy: vi.fn(),
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('react-leaflet-cluster', () => ({
|
||||
default: ({ children }: any) => <div data-testid="cluster-group">{children}</div>,
|
||||
}))
|
||||
|
||||
vi.mock('leaflet', () => ({
|
||||
default: {
|
||||
divIcon: vi.fn(() => ({})),
|
||||
Icon: { Default: { prototype: {}, mergeOptions: vi.fn() } },
|
||||
latLngBounds: vi.fn(() => ({ isValid: () => true })),
|
||||
point: vi.fn((x: number, y: number) => [x, y]),
|
||||
},
|
||||
divIcon: vi.fn(() => ({})),
|
||||
Icon: { Default: { prototype: {}, mergeOptions: vi.fn() } },
|
||||
latLngBounds: vi.fn(() => ({ isValid: () => true })),
|
||||
point: vi.fn((x: number, y: number) => [x, y]),
|
||||
}))
|
||||
|
||||
vi.mock('../../services/photoService', () => ({
|
||||
getCached: vi.fn(() => null),
|
||||
isLoading: vi.fn(() => false),
|
||||
fetchPhoto: vi.fn(),
|
||||
onThumbReady: vi.fn(() => () => {}),
|
||||
getAllThumbs: vi.fn(() => ({})),
|
||||
}))
|
||||
|
||||
import { MapView } from './MapView'
|
||||
|
||||
// Helper: build a place with the extra fields MapView uses (category_name/color/icon)
|
||||
// that exist on joined DB rows but are not in the base Place TypeScript type.
|
||||
function buildMapPlace(overrides: Record<string, any> = {}) {
|
||||
return {
|
||||
...buildPlace(),
|
||||
category_name: null,
|
||||
category_color: null,
|
||||
category_icon: null,
|
||||
...overrides,
|
||||
} as any
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
resetAllStores()
|
||||
})
|
||||
|
||||
describe('MapView', () => {
|
||||
it('FE-COMP-MAPVIEW-001: renders map container', () => {
|
||||
render(<MapView />)
|
||||
expect(screen.getByTestId('map-container')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-002: renders one marker per place', () => {
|
||||
const places = [
|
||||
buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
|
||||
buildMapPlace({ id: 2, name: 'Louvre', lat: 48.86, lng: 2.337 }),
|
||||
]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.getAllByTestId('marker').length).toBe(2)
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-003: marker click calls onMarkerClick with place id', () => {
|
||||
const onMarkerClick = vi.fn()
|
||||
const places = [buildMapPlace({ id: 42, lat: 48.8584, lng: 2.2945 })]
|
||||
render(<MapView places={places} onMarkerClick={onMarkerClick} />)
|
||||
fireEvent.click(screen.getByTestId('marker'))
|
||||
expect(onMarkerClick).toHaveBeenCalledWith(42)
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-004: tooltip shows place name', () => {
|
||||
const places = [buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945 })]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.getByTestId('tooltip').textContent).toContain('Eiffel Tower')
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-005: tooltip shows category name when present', () => {
|
||||
const places = [
|
||||
buildMapPlace({ name: 'Louvre', lat: 48.86, lng: 2.337, category_name: 'Museum', category_icon: null }),
|
||||
]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.getByTestId('tooltip').textContent).toContain('Museum')
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-006: renders polyline when route has 2+ points', () => {
|
||||
render(<MapView route={[[48.0, 2.0], [49.0, 3.0]]} />)
|
||||
expect(screen.getByTestId('polyline')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-007: does not render polyline when route is null', () => {
|
||||
render(<MapView route={null} />)
|
||||
expect(screen.queryByTestId('polyline')).toBeNull()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-008: does not render polyline for single-point route', () => {
|
||||
render(<MapView route={[[48.0, 2.0]]} />)
|
||||
expect(screen.queryByTestId('polyline')).toBeNull()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-009: GPX geometry polyline rendered for place with route_geometry', () => {
|
||||
const places = [
|
||||
buildMapPlace({ lat: 48.0, lng: 2.0, route_geometry: '[[48.0,2.0],[49.0,3.0]]' }),
|
||||
]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.getByTestId('polyline')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-010: MarkerClusterGroup is rendered', () => {
|
||||
const places = [buildMapPlace({ lat: 48.8584, lng: 2.2945 })]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.getByTestId('cluster-group')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-011: renders RouteLabel marker when routeSegments provided with route', () => {
|
||||
const route = [[48.0, 2.0], [49.0, 3.0]] as [number, number][]
|
||||
const routeSegments = [
|
||||
{ mid: [48.5, 2.5] as [number, number], from: 0, to: 1, walkingText: '10 min', drivingText: '3 min' },
|
||||
]
|
||||
render(<MapView route={route} routeSegments={routeSegments} />)
|
||||
// Route polyline is rendered
|
||||
expect(screen.getByTestId('polyline')).toBeTruthy()
|
||||
// RouteLabel renders a Marker (mocked), but it returns null when zoom < 12
|
||||
// so we just assert the polyline is there, exercising the routeSegments.map path
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-012: invalid route_geometry JSON triggers catch and skips polyline', () => {
|
||||
const places = [
|
||||
buildMapPlace({ lat: 48.0, lng: 2.0, route_geometry: 'NOT_VALID_JSON' }),
|
||||
]
|
||||
// Should not throw; invalid JSON is caught silently
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.queryByTestId('polyline')).toBeNull()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-013: route_geometry with fewer than 2 coords skips polyline', () => {
|
||||
const places = [
|
||||
buildMapPlace({ lat: 48.0, lng: 2.0, route_geometry: '[[48.0,2.0]]' }),
|
||||
]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.queryByTestId('polyline')).toBeNull()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-014: marker icon uses base64 image_url for photo places', () => {
|
||||
const dataUrl = 'data:image/jpeg;base64,/9j/4AA'
|
||||
const places = [buildMapPlace({ id: 10, lat: 48.0, lng: 2.0, image_url: dataUrl })]
|
||||
render(<MapView places={places} />)
|
||||
// Marker still renders; base64 path in createPlaceIcon should be exercised
|
||||
expect(screen.getByTestId('marker')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-015: uses cached photo thumb from photoService when available', () => {
|
||||
vi.mocked(photoService.getCached).mockReturnValue({ thumbDataUrl: 'data:image/jpeg;base64,abc' } as any)
|
||||
const places = [
|
||||
buildMapPlace({ id: 20, lat: 48.0, lng: 2.0, google_place_id: 'gplace_123' }),
|
||||
]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.getByTestId('marker')).toBeTruthy()
|
||||
vi.mocked(photoService.getCached).mockReturnValue(null)
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-016: tooltip shows address when present', () => {
|
||||
const places = [
|
||||
buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945, address: '5 Av. Anatole France' }),
|
||||
]
|
||||
render(<MapView places={places} />)
|
||||
expect(screen.getByTestId('tooltip').textContent).toContain('5 Av. Anatole France')
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-017: renders selected marker with higher z-index offset', () => {
|
||||
const places = [
|
||||
buildMapPlace({ id: 5, lat: 48.8584, lng: 2.2945 }),
|
||||
]
|
||||
render(<MapView places={places} selectedPlaceId={5} />)
|
||||
expect(screen.getByTestId('marker')).toBeTruthy()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,849 @@
|
||||
// FE-PLANNER-DAYDETAIL-001 to FE-PLANNER-DAYDETAIL-025
|
||||
import React from 'react';
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { usePermissionsStore } from '../../store/permissionsStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildAdmin, buildTrip, buildDay, buildPlace, buildReservation } from '../../../tests/helpers/factories';
|
||||
import DayDetailPanel from './DayDetailPanel';
|
||||
|
||||
const day = buildDay({ id: 1, trip_id: 1, date: '2025-06-15', title: 'Day in Paris' });
|
||||
|
||||
const defaultProps = {
|
||||
day,
|
||||
days: [day],
|
||||
places: [],
|
||||
categories: [],
|
||||
tripId: 1,
|
||||
assignments: {},
|
||||
reservations: [],
|
||||
lat: null,
|
||||
lng: null,
|
||||
onClose: vi.fn(),
|
||||
onAccommodationChange: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
vi.clearAllMocks();
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () => HttpResponse.json({ error: true })),
|
||||
http.get('/api/trips/1/accommodations', () => HttpResponse.json({ accommodations: [] })),
|
||||
);
|
||||
seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
|
||||
seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
|
||||
seedStore(useSettingsStore, {
|
||||
settings: { time_format: '24h', temperature_unit: 'celsius', blur_booking_codes: false },
|
||||
});
|
||||
});
|
||||
|
||||
describe('DayDetailPanel', () => {
|
||||
|
||||
// ── Rendering ────────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-001: renders without crashing', () => {
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
expect(document.body).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-002: returns null when day prop is null', () => {
|
||||
render(<DayDetailPanel {...defaultProps} day={null as any} />);
|
||||
expect(document.querySelector('[style*="position: fixed"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-003: shows day title in header', () => {
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
expect(screen.getByText('Day in Paris')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-004: shows day number when title is null', () => {
|
||||
const untitled = buildDay({ id: 1, trip_id: 1, date: '2025-06-15', title: null });
|
||||
render(<DayDetailPanel {...defaultProps} day={untitled} days={[untitled]} />);
|
||||
expect(screen.getByText(/Day 1/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-005: shows formatted date when day.date is set', () => {
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
// Date '2025-06-15' → locale string containing "June" or "15"
|
||||
expect(screen.getByText(/June|15/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-006: does NOT show date when day.date is null', () => {
|
||||
const noDate = buildDay({ id: 1, trip_id: 1, date: null, title: 'No Date Day' });
|
||||
render(<DayDetailPanel {...defaultProps} day={noDate} days={[noDate]} />);
|
||||
expect(screen.queryByText(/June|Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday/i)).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-007: close button calls onClose', async () => {
|
||||
const onClose = vi.fn();
|
||||
render(<DayDetailPanel {...defaultProps} onClose={onClose} />);
|
||||
// The header X button — the one outside the hotel picker
|
||||
const closeButtons = screen.getAllByRole('button');
|
||||
// First X button is the header close
|
||||
await userEvent.click(closeButtons[0]);
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// ── Weather ──────────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-008: weather section not shown when no lat/lng', async () => {
|
||||
render(<DayDetailPanel {...defaultProps} lat={null} lng={null} />);
|
||||
await waitFor(() => expect(screen.queryByText(/No weather/i)).toBeNull());
|
||||
// No loading spinner either
|
||||
expect(document.querySelector('[style*="border-top-color"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-009: weather loading state shown briefly', async () => {
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () => new Promise(() => {})), // never resolves
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
// Spinner div has border + borderTopColor
|
||||
await waitFor(() => {
|
||||
const spinner = document.querySelector('[style*="border-radius: 50%"]');
|
||||
expect(spinner).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-010: weather data renders temperature in Celsius', async () => {
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () =>
|
||||
HttpResponse.json({ main: 'Clear', temp: 22, temp_min: 18, temp_max: 26, description: 'sunny' })
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
await screen.findByText(/22°C/);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-011: weather in Fahrenheit when setting is fahrenheit', async () => {
|
||||
seedStore(useSettingsStore, {
|
||||
settings: { time_format: '24h', temperature_unit: 'fahrenheit', blur_booking_codes: false },
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () =>
|
||||
HttpResponse.json({ main: 'Clear', temp: 0, temp_min: 0, temp_max: 0, description: 'cold' })
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
await screen.findByText(/32°F/);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-012: no weather shows "No weather data" message', async () => {
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () => HttpResponse.json({ error: true })),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
await screen.findByText(/No weather/i);
|
||||
});
|
||||
|
||||
// ── Reservations ─────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-013: shows reservations linked to this day\'s assignments', async () => {
|
||||
const place = buildPlace({ name: 'Museum' });
|
||||
const reservation = buildReservation({
|
||||
id: 1,
|
||||
title: 'Museum Tour Ticket',
|
||||
assignment_id: 50,
|
||||
status: 'confirmed',
|
||||
});
|
||||
render(<DayDetailPanel
|
||||
{...defaultProps}
|
||||
assignments={{ '1': [{ id: 50, place, place_id: place.id, day_id: 1, order_index: 0, notes: null }] }}
|
||||
reservations={[reservation]}
|
||||
/>);
|
||||
await screen.findByText('Museum Tour Ticket');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-014: reservations from OTHER days are not shown', async () => {
|
||||
const place = buildPlace({ name: 'Other Venue' });
|
||||
const reservation = buildReservation({
|
||||
id: 2,
|
||||
title: 'Other Day Event',
|
||||
assignment_id: 51,
|
||||
status: 'confirmed',
|
||||
});
|
||||
render(<DayDetailPanel
|
||||
{...defaultProps}
|
||||
// day.id=1, but reservation belongs to assignment_id=51 which is in day '2'
|
||||
assignments={{
|
||||
'1': [{ id: 50, place, place_id: place.id, day_id: 1, order_index: 0, notes: null }],
|
||||
'2': [{ id: 51, place, place_id: place.id, day_id: 2, order_index: 0, notes: null }],
|
||||
}}
|
||||
reservations={[reservation]}
|
||||
/>);
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Other Day Event')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-015: reservation shows formatted time when reservation_time has T', async () => {
|
||||
const place = buildPlace({ name: 'Restaurant' });
|
||||
const reservation = buildReservation({
|
||||
id: 3,
|
||||
title: 'Dinner',
|
||||
assignment_id: 50,
|
||||
status: 'confirmed',
|
||||
reservation_time: '2025-06-15T14:30:00Z',
|
||||
});
|
||||
render(<DayDetailPanel
|
||||
{...defaultProps}
|
||||
assignments={{ '1': [{ id: 50, place, place_id: place.id, day_id: 1, order_index: 0, notes: null }] }}
|
||||
reservations={[reservation]}
|
||||
/>);
|
||||
await screen.findByText('Dinner');
|
||||
// Time should be rendered from reservation_time with T — check for a time-like string
|
||||
await waitFor(() => {
|
||||
// The time is rendered via toLocaleTimeString — match any HH:MM pattern
|
||||
const timeEl = screen.queryByText(/\d{1,2}:\d{2}/);
|
||||
expect(timeEl).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Accommodation ─────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-016: accommodation section header is always present', async () => {
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByText(/Accommodation/i).length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-017: accommodation with check-in shows hotel name', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Grand Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('Grand Hotel');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-018: check-in time shown for check-in day', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Grand Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
// day.id = 1 = start_day_id (check-in day)
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('14:00');
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByText(/Check-in/i).length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-019: check-out time shown for check-out day', async () => {
|
||||
const checkOutDay = buildDay({ id: 3, trip_id: 1, date: '2025-06-17', title: 'Check Out Day' });
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Grand Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel
|
||||
{...defaultProps}
|
||||
day={checkOutDay}
|
||||
days={[day, checkOutDay]}
|
||||
/>);
|
||||
await screen.findByText('11:00');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-020: confirmation code shown', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Grand Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation: 'HOTEL99',
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('HOTEL99');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-021: accommodation edit/remove buttons shown when canEditDays=true', async () => {
|
||||
seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Grand Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('Grand Hotel');
|
||||
// Pencil and X buttons should be present in the accommodation row
|
||||
const buttons = screen.getAllByRole('button');
|
||||
expect(buttons.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-022: accommodation edit/remove buttons hidden when canEditDays=false', async () => {
|
||||
// Use regular user + restrict day_edit to admin only
|
||||
const regularUser = buildUser({ id: 999, role: 'user' });
|
||||
seedStore(useAuthStore, { user: regularUser, isAuthenticated: true });
|
||||
seedStore(usePermissionsStore, { permissions: { day_edit: 'admin' } });
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Budget Inn', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '15:00', check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('Budget Inn');
|
||||
// No edit/remove buttons — only close button in header
|
||||
const buttons = screen.getAllByRole('button');
|
||||
// Should only have the header close button, no pencil/X in accommodation
|
||||
expect(buttons).toHaveLength(1);
|
||||
});
|
||||
|
||||
// ── Adding accommodation ──────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-023: "Add accommodation" button visible when canEditDays=true and no accommodation', async () => {
|
||||
seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText(/Add accommodation/i);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-024: clicking add accommodation opens hotel picker', async () => {
|
||||
seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
// Hotel picker portal renders into document.body
|
||||
await waitFor(() => {
|
||||
expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Blur booking codes ────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-025: linked booking confirmation code is blurred when blur_booking_codes=true', async () => {
|
||||
seedStore(useSettingsStore, {
|
||||
settings: { time_format: '24h', temperature_unit: 'celsius', blur_booking_codes: true },
|
||||
});
|
||||
const linkedReservation = buildReservation({
|
||||
id: 10,
|
||||
title: 'Hotel Booking',
|
||||
status: 'confirmed',
|
||||
confirmation_number: 'SECRET',
|
||||
accommodation_id: 1,
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Secret Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} reservations={[linkedReservation]} />);
|
||||
await screen.findByText('Secret Hotel');
|
||||
// Find the element containing the confirmation number
|
||||
await waitFor(() => {
|
||||
const el = screen.getByText(/#SECRET/);
|
||||
expect(el).toHaveStyle({ filter: 'blur(4px)' });
|
||||
});
|
||||
});
|
||||
|
||||
// ── Weather chips ─────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-026: weather chips render precipitation, wind, sunrise, sunset', async () => {
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () =>
|
||||
HttpResponse.json({
|
||||
main: 'Rain',
|
||||
temp: 15,
|
||||
temp_min: 12,
|
||||
temp_max: 18,
|
||||
description: 'rainy',
|
||||
precipitation_probability_max: 80,
|
||||
precipitation_sum: 5.2,
|
||||
wind_max: 30,
|
||||
sunrise: '06:30',
|
||||
sunset: '20:15',
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
await screen.findByText('80%');
|
||||
await screen.findByText('5.2 mm');
|
||||
await screen.findByText('30 km/h');
|
||||
await screen.findByText('06:30');
|
||||
await screen.findByText('20:15');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-027: weather chips show Fahrenheit wind speed', async () => {
|
||||
seedStore(useSettingsStore, {
|
||||
settings: { time_format: '24h', temperature_unit: 'fahrenheit', blur_booking_codes: false },
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () =>
|
||||
HttpResponse.json({
|
||||
main: 'Clouds',
|
||||
temp: 20,
|
||||
temp_min: 15,
|
||||
temp_max: 25,
|
||||
description: 'cloudy',
|
||||
wind_max: 50,
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
// 50 km/h * 0.621371 ≈ 31 mph
|
||||
await screen.findByText('31 mph');
|
||||
});
|
||||
|
||||
// ── Hotel picker interactions ─────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-028: hotel picker cancel button closes the picker', async () => {
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
// Picker opened
|
||||
await waitFor(() => {
|
||||
expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument();
|
||||
});
|
||||
// Click cancel button inside picker
|
||||
const cancelButton = screen.getByText(/Cancel/i);
|
||||
await userEvent.click(cancelButton);
|
||||
await waitFor(() => {
|
||||
expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-029: hotel picker shows places list when places are provided', async () => {
|
||||
const place1 = buildPlace({ id: 10, name: 'Hotel du Nord', address: '102 Quai de Jemmapes' });
|
||||
const place2 = buildPlace({ id: 11, name: 'Hotel du Sud', address: null });
|
||||
render(<DayDetailPanel {...defaultProps} places={[place1, place2]} />);
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
await screen.findByText('Hotel du Nord');
|
||||
await screen.findByText('Hotel du Sud');
|
||||
await screen.findByText('102 Quai de Jemmapes');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-030: selecting a place in hotel picker enables save button', async () => {
|
||||
const place = buildPlace({ id: 10, name: 'Maison Blanche' });
|
||||
server.use(
|
||||
http.post('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodation: {
|
||||
id: 99, place_id: 10, place_name: 'Maison Blanche', place_address: null,
|
||||
start_day_id: 1, end_day_id: 1, check_in: null, check_out: null, confirmation: null,
|
||||
},
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} places={[place]} />);
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
await screen.findByText('Maison Blanche');
|
||||
// Click the place button
|
||||
const placeButton = screen.getByRole('button', { name: /Maison Blanche/i });
|
||||
await userEvent.click(placeButton);
|
||||
// Save button should now be enabled
|
||||
const saveButton = screen.getByText(/Save/i);
|
||||
expect(saveButton).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-031: hotel picker shows no places message when list is empty', async () => {
|
||||
render(<DayDetailPanel {...defaultProps} places={[]} />);
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
await waitFor(() => {
|
||||
const portal = document.body.querySelector('[style*="z-index: 99999"]');
|
||||
expect(portal).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-032: edit accommodation button opens picker in edit mode', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Edit Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '15:00', check_out: '10:00', confirmation: 'EDIT01',
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('Edit Hotel');
|
||||
// All buttons: header close, pencil, X (remove)
|
||||
const allButtons = screen.getAllByRole('button');
|
||||
// Pencil is second button (index 1)
|
||||
const pencilButton = allButtons[1];
|
||||
await userEvent.click(pencilButton);
|
||||
// Edit picker should open with "Edit accommodation" title
|
||||
await waitFor(() => {
|
||||
const portal = document.body.querySelector('[style*="z-index: 99999"]');
|
||||
expect(portal?.textContent).toMatch(/Edit accommodation/i);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-033: hotel picker "all days" button selects full trip range', async () => {
|
||||
const day2 = buildDay({ id: 2, trip_id: 1, date: '2025-06-16', title: 'Day 2' });
|
||||
const day3 = buildDay({ id: 3, trip_id: 1, date: '2025-06-17', title: 'Day 3' });
|
||||
render(<DayDetailPanel {...defaultProps} days={[day, day2, day3]} />);
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
await waitFor(() => {
|
||||
const portal = document.body.querySelector('[style*="z-index: 99999"]');
|
||||
expect(portal?.textContent).toMatch(/Day in Paris|Day 2|Day 3/i);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-034: accommodation with all fields shows full details grid', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Full Details Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 1, check_in: '14:00', check_out: '11:00', confirmation: 'FULL01',
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('Full Details Hotel');
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByText(/Check-in/i).length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getAllByText(/Check-out/i).length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
await screen.findByText('FULL01');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-035: middle-day accommodation shows no check-in/out label', async () => {
|
||||
const middleDay = buildDay({ id: 2, trip_id: 1, date: '2025-06-16', title: 'Middle Day' });
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Overnight Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} day={middleDay} days={[day, middleDay]} />);
|
||||
await screen.findByText('Overnight Hotel');
|
||||
expect(screen.queryByText(/Check-in & Check-out/i)).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-036: weather hourly data renders hour entries', async () => {
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () =>
|
||||
HttpResponse.json({
|
||||
main: 'Clear',
|
||||
temp: 20,
|
||||
temp_min: 15,
|
||||
temp_max: 25,
|
||||
description: 'sunny',
|
||||
hourly: [
|
||||
{ hour: 8, main: 'Clear', temp: 18, precipitation_probability: 0 },
|
||||
{ hour: 10, main: 'Clear', temp: 20, precipitation_probability: 10 },
|
||||
{ hour: 12, main: 'Clouds', temp: 22, precipitation_probability: 60 },
|
||||
],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
await screen.findByText(/20°C/);
|
||||
// Hourly renders every other entry (i % 2 === 0): hours 8 and 12
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('08')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-037: climate type weather shows average indicator', async () => {
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () =>
|
||||
HttpResponse.json({
|
||||
main: 'Clear',
|
||||
type: 'climate',
|
||||
temp: 18,
|
||||
temp_min: 14,
|
||||
temp_max: 22,
|
||||
description: 'average',
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
await screen.findByText(/Ø/);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-038: hotel picker with category filter renders category buttons', async () => {
|
||||
const { buildCategory } = await import('../../../tests/helpers/factories');
|
||||
const cat = buildCategory({ id: 1, name: 'Hotels' });
|
||||
const place = buildPlace({ id: 10, name: 'Hotel Belmont', category_id: 1 });
|
||||
render(<DayDetailPanel {...defaultProps} places={[place]} categories={[cat]} />);
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
await waitFor(() => {
|
||||
const portal = document.body.querySelector('[style*="z-index: 99999"]');
|
||||
expect(portal?.textContent).toMatch(/Hotels/);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-039: add another accommodation button visible when accommodations exist', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Existing Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('Existing Hotel');
|
||||
// "Add accommodation" dashed button should also appear for adding more
|
||||
await screen.findByText(/Add accommodation/i);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-041: save new accommodation calls API and updates list', async () => {
|
||||
const place = buildPlace({ id: 10, name: 'New Hotel' });
|
||||
server.use(
|
||||
http.post('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodation: {
|
||||
id: 99, place_id: 10, place_name: 'New Hotel', place_address: null,
|
||||
start_day_id: 1, end_day_id: 1, check_in: null, check_out: null, confirmation: null,
|
||||
},
|
||||
})
|
||||
),
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({ accommodations: [] })
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} places={[place]} />);
|
||||
// Open picker
|
||||
const addButton = await screen.findByText(/Add accommodation/i);
|
||||
await userEvent.click(addButton);
|
||||
// Select a place
|
||||
const placeBtn = await screen.findByRole('button', { name: /New Hotel/i });
|
||||
await userEvent.click(placeBtn);
|
||||
// Click Save
|
||||
const saveButton = screen.getByText(/Save/i);
|
||||
await userEvent.click(saveButton);
|
||||
// Picker should close after save
|
||||
await waitFor(() => {
|
||||
expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-042: remove accommodation calls delete API', async () => {
|
||||
let deleteWasCalled = false;
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 5, place_id: 5, place_name: 'Hotel To Remove', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 1, check_in: null, check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
http.delete('/api/trips/1/accommodations/5', () => {
|
||||
deleteWasCalled = true;
|
||||
return HttpResponse.json({ success: true });
|
||||
}),
|
||||
);
|
||||
seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('Hotel To Remove');
|
||||
// Buttons: close header (0), pencil (1), X/remove (2)
|
||||
const allButtons = screen.getAllByRole('button');
|
||||
const removeButton = allButtons[2];
|
||||
await userEvent.click(removeButton);
|
||||
await waitFor(() => {
|
||||
expect(deleteWasCalled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-043: 12h check-in time formatted with AM/PM', async () => {
|
||||
seedStore(useSettingsStore, {
|
||||
settings: { time_format: '12h', temperature_unit: 'celsius', blur_booking_codes: false },
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'AM Hotel', place_address: null,
|
||||
start_day_id: 1, end_day_id: 1, check_in: '14:00', check_out: '09:00', confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} />);
|
||||
await screen.findByText('AM Hotel');
|
||||
// 14:00 in 12h = 2:00 PM
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('2:00 PM')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-044: accommodation with linked pending reservation shows pending status', async () => {
|
||||
const pendingReservation = buildReservation({
|
||||
id: 20,
|
||||
title: 'Pending Booking',
|
||||
status: 'pending',
|
||||
confirmation_number: null,
|
||||
accommodation_id: 1,
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 1, place_id: 5, place_name: 'Pending Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} reservations={[pendingReservation]} />);
|
||||
await screen.findByText('Pending Hotel');
|
||||
await screen.findByText('Pending Booking');
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByText(/pending/i).length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-045: weather API network error is handled gracefully', async () => {
|
||||
server.use(
|
||||
http.get('/api/weather/detailed', () => HttpResponse.error()),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
|
||||
// Should show "No weather" after error (catch sets weather to null)
|
||||
await screen.findByText(/No weather/i);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-046: save edited accommodation calls update API', async () => {
|
||||
let updateCalled = false;
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 7, place_id: 5, place_name: 'Edit Me Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 1, check_in: '15:00', check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
http.put('/api/trips/1/accommodations/7', () => {
|
||||
updateCalled = true;
|
||||
return HttpResponse.json({
|
||||
accommodation: {
|
||||
id: 7, place_id: 5, place_name: 'Edit Me Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 1, check_in: '15:00', check_out: null, confirmation: 'NEW01',
|
||||
},
|
||||
});
|
||||
}),
|
||||
);
|
||||
const place = buildPlace({ id: 5, name: 'Edit Me Hotel' });
|
||||
render(<DayDetailPanel {...defaultProps} places={[place]} />);
|
||||
await screen.findByText('Edit Me Hotel');
|
||||
// Click the pencil/edit button (index 1)
|
||||
const allButtons = screen.getAllByRole('button');
|
||||
await userEvent.click(allButtons[1]);
|
||||
// Picker opens in edit mode
|
||||
await waitFor(() => {
|
||||
expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument();
|
||||
});
|
||||
// Click Save in the edit picker
|
||||
const saveButton = screen.getByText(/Save/i);
|
||||
await userEvent.click(saveButton);
|
||||
await waitFor(() => {
|
||||
expect(updateCalled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-047: blurred confirmation code revealed on click', async () => {
|
||||
seedStore(useSettingsStore, {
|
||||
settings: { time_format: '24h', temperature_unit: 'celsius', blur_booking_codes: true },
|
||||
});
|
||||
const linkedReservation = buildReservation({
|
||||
id: 11,
|
||||
title: 'Blurred Booking',
|
||||
status: 'confirmed',
|
||||
confirmation_number: 'REVEAL123',
|
||||
accommodation_id: 2,
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
HttpResponse.json({
|
||||
accommodations: [{
|
||||
id: 2, place_id: 5, place_name: 'Blurred Hotel', place_address: 'Paris',
|
||||
start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: null, confirmation: null,
|
||||
}],
|
||||
})
|
||||
),
|
||||
);
|
||||
render(<DayDetailPanel {...defaultProps} reservations={[linkedReservation]} />);
|
||||
await screen.findByText('Blurred Hotel');
|
||||
const codeEl = await screen.findByText(/#REVEAL123/);
|
||||
// Initially blurred
|
||||
expect(codeEl).toHaveStyle({ filter: 'blur(4px)' });
|
||||
// Fire mouse events to cover the event handler code paths
|
||||
await userEvent.hover(codeEl);
|
||||
await userEvent.unhover(codeEl);
|
||||
await userEvent.click(codeEl);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-040: 12h time format renders reservation time with AM/PM', async () => {
|
||||
seedStore(useSettingsStore, {
|
||||
settings: { time_format: '12h', temperature_unit: 'celsius', blur_booking_codes: false },
|
||||
});
|
||||
const place = buildPlace({ name: 'Bistro' });
|
||||
const reservation = buildReservation({
|
||||
id: 20,
|
||||
title: 'Lunch',
|
||||
assignment_id: 60,
|
||||
status: 'confirmed',
|
||||
reservation_time: '2025-06-15T13:00:00Z',
|
||||
});
|
||||
render(<DayDetailPanel
|
||||
{...defaultProps}
|
||||
assignments={{ '1': [{ id: 60, place, place_id: place.id, day_id: 1, order_index: 0, notes: null }] }}
|
||||
reservations={[reservation]}
|
||||
/>);
|
||||
await screen.findByText('Lunch');
|
||||
// 12h format: some AM/PM-like string
|
||||
await waitFor(() => {
|
||||
const timeEl = screen.queryByText(/AM|PM|\d{1,2}:\d{2}/i);
|
||||
expect(timeEl).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
// FE-COMP-DISPLAY-001 to FE-COMP-DISPLAY-012
|
||||
// FE-COMP-DISPLAY-001 to FE-COMP-DISPLAY-027
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
@@ -8,6 +8,7 @@ import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildSettings } from '../../../tests/helpers/factories';
|
||||
import DisplaySettingsTab from './DisplaySettingsTab';
|
||||
import { ToastContainer } from '../shared/Toast';
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
@@ -88,4 +89,125 @@ describe('DisplaySettingsTab', () => {
|
||||
await user.click(screen.getByText('Light'));
|
||||
expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'light');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-013: clicking Auto mode button calls updateSetting with auto', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'light' }), updateSetting });
|
||||
render(<DisplaySettingsTab />);
|
||||
await user.click(screen.getByText('Auto'));
|
||||
expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'auto');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-014: active color mode button has border with var(--text-primary)', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }) });
|
||||
render(<DisplaySettingsTab />);
|
||||
const darkBtn = screen.getByText('Dark').closest('button')!;
|
||||
const lightBtn = screen.getByText('Light').closest('button')!;
|
||||
const autoBtn = screen.getByText('Auto').closest('button')!;
|
||||
expect(darkBtn.style.border).toContain('var(--text-primary)');
|
||||
expect(lightBtn.style.border).toContain('var(--border-primary)');
|
||||
expect(autoBtn.style.border).toContain('var(--border-primary)');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-015: clicking a language button calls updateSetting with that language code', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ language: 'en' }), updateSetting });
|
||||
render(<DisplaySettingsTab />);
|
||||
await user.click(screen.getByText('Deutsch'));
|
||||
expect(updateSetting).toHaveBeenCalledWith('language', 'de');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-016: active language button is visually highlighted', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ language: 'en' }) });
|
||||
render(<DisplaySettingsTab />);
|
||||
const englishBtn = screen.getByText('English').closest('button')!;
|
||||
expect(englishBtn.style.border).toContain('var(--text-primary)');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-017: shows Temperature section label', () => {
|
||||
render(<DisplaySettingsTab />);
|
||||
expect(screen.getByText(/temperature/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-018: celsius button is active when temperature_unit is celsius', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ temperature_unit: 'celsius' }) });
|
||||
render(<DisplaySettingsTab />);
|
||||
const celsiusBtn = screen.getByText('°C Celsius').closest('button')!;
|
||||
expect(celsiusBtn.style.border).toContain('var(--text-primary)');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-019: clicking fahrenheit button calls updateSetting with fahrenheit', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ temperature_unit: 'celsius' }), updateSetting });
|
||||
render(<DisplaySettingsTab />);
|
||||
await user.click(screen.getByText('°F Fahrenheit'));
|
||||
expect(updateSetting).toHaveBeenCalledWith('temperature_unit', 'fahrenheit');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-020: clicking 24h time format calls updateSetting with 24h', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }), updateSetting });
|
||||
render(<DisplaySettingsTab />);
|
||||
await user.click(screen.getByText('24h (14:30)'));
|
||||
expect(updateSetting).toHaveBeenCalledWith('time_format', '24h');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-021: shows Route Calculation section', () => {
|
||||
render(<DisplaySettingsTab />);
|
||||
expect(screen.getByText(/route calculation/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-022: route calculation On button is active when route_calculation is true', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ route_calculation: true }) });
|
||||
render(<DisplaySettingsTab />);
|
||||
const onButtons = screen.getAllByText(/^On$/i);
|
||||
const routeCalcOnBtn = onButtons[0].closest('button')!;
|
||||
expect(routeCalcOnBtn.style.border).toContain('var(--text-primary)');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-023: clicking route calculation Off calls updateSetting with false', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ route_calculation: true }), updateSetting });
|
||||
render(<DisplaySettingsTab />);
|
||||
const offButtons = screen.getAllByText(/^Off$/i);
|
||||
await user.click(offButtons[0]);
|
||||
expect(updateSetting).toHaveBeenCalledWith('route_calculation', false);
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-024: shows Blur Booking Codes section', () => {
|
||||
render(<DisplaySettingsTab />);
|
||||
expect(screen.getByText(/blur booking codes/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-025: blur booking codes On button is active when blur_booking_codes is true', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ blur_booking_codes: true }) });
|
||||
render(<DisplaySettingsTab />);
|
||||
const onButtons = screen.getAllByText(/^On$/i);
|
||||
const blurOnBtn = onButtons[1].closest('button')!;
|
||||
expect(blurOnBtn.style.border).toContain('var(--text-primary)');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-026: updateSetting failure shows toast error', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockRejectedValue(new Error('Server error'));
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'light' }), updateSetting });
|
||||
render(<><ToastContainer /><DisplaySettingsTab /></>);
|
||||
await user.click(screen.getByText('Dark'));
|
||||
await screen.findByText('Server error');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-027: temperature unit local state updates optimistically before API resolves', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockReturnValue(new Promise(() => {}));
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ temperature_unit: 'celsius' }), updateSetting });
|
||||
render(<DisplaySettingsTab />);
|
||||
await user.click(screen.getByText('°F Fahrenheit'));
|
||||
const fahrenheitBtn = screen.getByText('°F Fahrenheit').closest('button')!;
|
||||
expect(fahrenheitBtn.style.border).toContain('var(--text-primary)');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,331 @@
|
||||
// FE-COMP-INTEGRATIONS-001 to FE-COMP-INTEGRATIONS-018
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useAddonStore } from '../../store/addonStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser } from '../../../tests/helpers/factories';
|
||||
import IntegrationsTab from './IntegrationsTab';
|
||||
|
||||
function enableMcp() {
|
||||
seedStore(useAddonStore, {
|
||||
addons: [{ id: 'mcp', name: 'MCP', type: 'integration', icon: '', enabled: true }],
|
||||
loaded: true,
|
||||
loadAddons: vi.fn(),
|
||||
});
|
||||
}
|
||||
|
||||
const clipboardWriteText = vi.fn().mockResolvedValue(undefined);
|
||||
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
value: { writeText: clipboardWriteText },
|
||||
configurable: true,
|
||||
writable: true,
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
clipboardWriteText.mockClear();
|
||||
resetAllStores();
|
||||
vi.clearAllMocks();
|
||||
seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
|
||||
seedStore(useAddonStore, {
|
||||
addons: [],
|
||||
loaded: true,
|
||||
loadAddons: vi.fn(),
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/auth/mcp-tokens', () => HttpResponse.json({ tokens: [] })),
|
||||
http.get('/api/addons', () => HttpResponse.json({ addons: [] })),
|
||||
);
|
||||
});
|
||||
|
||||
describe('IntegrationsTab', () => {
|
||||
it('FE-COMP-INTEGRATIONS-001: renders without crashing (MCP disabled)', () => {
|
||||
render(<IntegrationsTab />);
|
||||
expect(document.body).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-002: MCP section is hidden when mcp addon is disabled', () => {
|
||||
render(<IntegrationsTab />);
|
||||
expect(screen.queryByText('MCP Configuration')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-003: MCP section is visible when mcp addon is enabled', async () => {
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-004: MCP endpoint URL is displayed', async () => {
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
const codeEl = document.querySelector('code');
|
||||
expect(codeEl).not.toBeNull();
|
||||
expect(codeEl!.textContent).toContain('/mcp');
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-005: JSON config block is rendered', async () => {
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
const preEl = document.querySelector('pre');
|
||||
expect(preEl).not.toBeNull();
|
||||
expect(preEl!.textContent).toContain('mcpServers');
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-006: "no tokens" message shown when token list is empty', async () => {
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('No tokens yet. Create one to connect MCP clients.');
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-007: token list renders when tokens exist', async () => {
|
||||
server.use(
|
||||
http.get('/api/auth/mcp-tokens', () =>
|
||||
HttpResponse.json({
|
||||
tokens: [
|
||||
{ id: 1, name: 'My Token', token_prefix: 'tk_aaa', created_at: '2025-01-01T00:00:00.000Z', last_used_at: null },
|
||||
{ id: 2, name: 'Other Token', token_prefix: 'tk_bbb', created_at: '2025-01-01T00:00:00.000Z', last_used_at: null },
|
||||
],
|
||||
}),
|
||||
),
|
||||
);
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('My Token');
|
||||
await screen.findByText('Other Token');
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-008: clicking "Create New Token" button opens the modal', async () => {
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
const createBtn = screen.getByRole('button', { name: /Create New Token/i });
|
||||
await user.click(createBtn);
|
||||
await screen.findByText('Create API Token');
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-009: Create button in modal is disabled when name is empty', async () => {
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
await user.click(screen.getByRole('button', { name: /Create New Token/i }));
|
||||
await screen.findByText('Create API Token');
|
||||
const modalCreateBtn = screen.getByRole('button', { name: /^Create Token$/i });
|
||||
expect(modalCreateBtn).toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-010: Create button in modal becomes enabled when name is typed', async () => {
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
await user.click(screen.getByRole('button', { name: /Create New Token/i }));
|
||||
await screen.findByText('Create API Token');
|
||||
const input = screen.getByPlaceholderText(/Claude Desktop/i);
|
||||
await user.type(input, 'My API token');
|
||||
const modalCreateBtn = screen.getByRole('button', { name: /^Create Token$/i });
|
||||
expect(modalCreateBtn).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-011: creating a token calls the API and shows the raw token', async () => {
|
||||
server.use(
|
||||
http.post('/api/auth/mcp-tokens', () =>
|
||||
HttpResponse.json({
|
||||
token: {
|
||||
id: 1,
|
||||
name: 'test',
|
||||
token_prefix: 'tk_abc',
|
||||
created_at: '2025-01-01T00:00:00.000Z',
|
||||
raw_token: 'tk_abc...full_secret_token',
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
await user.click(screen.getByRole('button', { name: /Create New Token/i }));
|
||||
await screen.findByText('Create API Token');
|
||||
const input = screen.getByPlaceholderText(/Claude Desktop/i);
|
||||
await user.type(input, 'test');
|
||||
await user.click(screen.getByRole('button', { name: /^Create Token$/i }));
|
||||
// Raw token should be displayed
|
||||
await screen.findByText(/tk_abc\.\.\.full_secret_token/);
|
||||
// Warning about one-time display
|
||||
expect(screen.getByText(/only be shown once/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-012: "Done" button closes the token-created modal', async () => {
|
||||
server.use(
|
||||
http.post('/api/auth/mcp-tokens', () =>
|
||||
HttpResponse.json({
|
||||
token: {
|
||||
id: 1,
|
||||
name: 'test',
|
||||
token_prefix: 'tk_abc',
|
||||
created_at: '2025-01-01T00:00:00.000Z',
|
||||
raw_token: 'tk_abc...full_secret_token',
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
await user.click(screen.getByRole('button', { name: /Create New Token/i }));
|
||||
await screen.findByText('Create API Token');
|
||||
await user.type(screen.getByPlaceholderText(/Claude Desktop/i), 'test');
|
||||
await user.click(screen.getByRole('button', { name: /^Create Token$/i }));
|
||||
await screen.findByText('Token Created');
|
||||
await user.click(screen.getByRole('button', { name: /^Done$/i }));
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Token Created')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-013: clicking the delete button next to a token opens the confirm modal', async () => {
|
||||
server.use(
|
||||
http.get('/api/auth/mcp-tokens', () =>
|
||||
HttpResponse.json({
|
||||
tokens: [
|
||||
{ id: 1, name: 'Delete Me', token_prefix: 'tk_del', created_at: '2025-01-01T00:00:00.000Z', last_used_at: null },
|
||||
],
|
||||
}),
|
||||
),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('Delete Me');
|
||||
await user.click(screen.getByTitle('Delete Token'));
|
||||
await screen.findByText('This token will stop working immediately. Any MCP client using it will lose access.');
|
||||
expect(screen.getByRole('button', { name: /^Cancel$/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-014: confirming deletion calls DELETE API and removes token from list', async () => {
|
||||
let deleteCalled = false;
|
||||
server.use(
|
||||
http.get('/api/auth/mcp-tokens', () =>
|
||||
HttpResponse.json({
|
||||
tokens: [
|
||||
{ id: 1, name: 'Delete Me', token_prefix: 'tk_del', created_at: '2025-01-01T00:00:00.000Z', last_used_at: null },
|
||||
],
|
||||
}),
|
||||
),
|
||||
http.delete('/api/auth/mcp-tokens/1', () => {
|
||||
deleteCalled = true;
|
||||
return HttpResponse.json({ success: true });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('Delete Me');
|
||||
await user.click(screen.getByTitle('Delete Token'));
|
||||
// There are two "Delete Token" buttons: the trash icon (title) and the confirm button in modal
|
||||
const deleteButtons = await screen.findAllByRole('button', { name: /^Delete Token$/i });
|
||||
// Click the one in the modal (last one, or the standalone one without title attribute)
|
||||
const confirmBtn = deleteButtons.find(btn => !btn.title);
|
||||
await user.click(confirmBtn ?? deleteButtons[deleteButtons.length - 1]);
|
||||
expect(deleteCalled).toBe(true);
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Delete Me')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-015: copying endpoint URL calls clipboard.writeText', async () => {
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
// Spy after userEvent.setup() may have replaced navigator.clipboard
|
||||
const writeSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||
const copyBtns = screen.getAllByTitle('Copy');
|
||||
await user.click(copyBtns[0]);
|
||||
expect(writeSpy).toHaveBeenCalledWith(expect.stringContaining('/mcp'));
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-016: copy button shows checkmark icon after copy', async () => {
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||
const copyBtns = screen.getAllByTitle('Copy');
|
||||
await user.click(copyBtns[0]);
|
||||
await waitFor(() => {
|
||||
// After copy, icon changes to Check (green). The button should contain an svg with text-green-500
|
||||
const btn = copyBtns[0];
|
||||
const svg = btn.querySelector('svg');
|
||||
expect(svg).toHaveClass('text-green-500');
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-017: cancel button in delete confirm modal closes it without API call', async () => {
|
||||
let deleteCalled = false;
|
||||
server.use(
|
||||
http.get('/api/auth/mcp-tokens', () =>
|
||||
HttpResponse.json({
|
||||
tokens: [
|
||||
{ id: 1, name: 'Cancel Token', token_prefix: 'tk_can', created_at: '2025-01-01T00:00:00.000Z', last_used_at: null },
|
||||
],
|
||||
}),
|
||||
),
|
||||
http.delete('/api/auth/mcp-tokens/1', () => {
|
||||
deleteCalled = true;
|
||||
return HttpResponse.json({ success: true });
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('Cancel Token');
|
||||
await user.click(screen.getByTitle('Delete Token'));
|
||||
await screen.findByRole('button', { name: /^Cancel$/i });
|
||||
await user.click(screen.getByRole('button', { name: /^Cancel$/i }));
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('This token will stop working immediately. Any MCP client using it will lose access.')).toBeNull();
|
||||
});
|
||||
expect(deleteCalled).toBe(false);
|
||||
});
|
||||
|
||||
it('FE-COMP-INTEGRATIONS-018: pressing Enter in the token name input triggers creation', async () => {
|
||||
let postCalled = false;
|
||||
server.use(
|
||||
http.post('/api/auth/mcp-tokens', () => {
|
||||
postCalled = true;
|
||||
return HttpResponse.json({
|
||||
token: {
|
||||
id: 1,
|
||||
name: 'enter-test',
|
||||
token_prefix: 'tk_ent',
|
||||
created_at: '2025-01-01T00:00:00.000Z',
|
||||
raw_token: 'tk_ent...full',
|
||||
},
|
||||
});
|
||||
}),
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
enableMcp();
|
||||
render(<IntegrationsTab />);
|
||||
await screen.findByText('MCP Configuration');
|
||||
await user.click(screen.getByRole('button', { name: /Create New Token/i }));
|
||||
await screen.findByText('Create API Token');
|
||||
const input = screen.getByPlaceholderText(/Claude Desktop/i);
|
||||
await user.type(input, 'enter-test');
|
||||
await user.keyboard('{Enter}');
|
||||
await waitFor(() => {
|
||||
expect(postCalled).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,187 @@
|
||||
// FE-COMP-MAP-001 to FE-COMP-MAP-017
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildSettings } from '../../../tests/helpers/factories';
|
||||
import { ToastContainer } from '../shared/Toast';
|
||||
import MapSettingsTab from './MapSettingsTab';
|
||||
|
||||
// Mock MapView to avoid Leaflet DOM issues in jsdom
|
||||
vi.mock('../Map/MapView', () => ({
|
||||
MapView: ({ onMapClick }: { onMapClick?: (info: { latlng: { lat: number; lng: number } }) => void }) => (
|
||||
<div data-testid="map-view" onClick={() => onMapClick?.({ latlng: { lat: 51.5, lng: -0.1 } })} />
|
||||
),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
vi.clearAllMocks();
|
||||
seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({
|
||||
map_tile_url: '',
|
||||
default_lat: 48.8566,
|
||||
default_lng: 2.3522,
|
||||
default_zoom: 10,
|
||||
}),
|
||||
updateSettings: vi.fn().mockResolvedValue(undefined),
|
||||
});
|
||||
});
|
||||
|
||||
describe('MapSettingsTab', () => {
|
||||
it('FE-COMP-MAP-001: renders without crashing', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(document.body).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-002: shows the Map section title', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByText('Map')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-003: shows the map template label', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByText('Map Template')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-004: shows latitude and longitude inputs', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByText('Latitude')).toBeInTheDocument();
|
||||
expect(screen.getByText('Longitude')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-005: latitude input is pre-filled from store settings', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByDisplayValue('48.8566')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-006: longitude input is pre-filled from store settings', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByDisplayValue('2.3522')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-007: typing in the latitude input updates its displayed value', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<MapSettingsTab />);
|
||||
const latInput = screen.getByDisplayValue('48.8566');
|
||||
await user.clear(latInput);
|
||||
await user.type(latInput, '51.5');
|
||||
expect(screen.getByDisplayValue('51.5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-008: typing in the longitude input updates its displayed value', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<MapSettingsTab />);
|
||||
const lngInput = screen.getByDisplayValue('2.3522');
|
||||
await user.clear(lngInput);
|
||||
await user.type(lngInput, '-0.1');
|
||||
expect(screen.getByDisplayValue('-0.1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-009: tile URL text input is shown', () => {
|
||||
render(<MapSettingsTab />);
|
||||
const tileInput = screen.getByPlaceholderText(/openstreetmap/i);
|
||||
expect(tileInput).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-010: typing a custom tile URL updates the text input', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<MapSettingsTab />);
|
||||
const tileInput = screen.getByPlaceholderText(/openstreetmap/i);
|
||||
await user.clear(tileInput);
|
||||
// Escape curly braces so userEvent doesn't treat them as special keys
|
||||
await user.type(tileInput, 'https://custom.tiles/{{z}/{{x}/{{y}.png');
|
||||
expect(screen.getByDisplayValue('https://custom.tiles/{z}/{x}/{y}.png')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-011: clicking the Save Map button calls updateSettings', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSettings = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({ map_tile_url: '', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10 }),
|
||||
updateSettings,
|
||||
});
|
||||
render(<MapSettingsTab />);
|
||||
await user.click(screen.getByText('Save Map'));
|
||||
expect(updateSettings).toHaveBeenCalledTimes(1);
|
||||
expect(updateSettings).toHaveBeenCalledWith(expect.objectContaining({
|
||||
map_tile_url: expect.any(String),
|
||||
default_lat: expect.any(Number),
|
||||
default_lng: expect.any(Number),
|
||||
default_zoom: expect.any(Number),
|
||||
}));
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-012: Save Map parses numeric values correctly', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSettings = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({ map_tile_url: '', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10 }),
|
||||
updateSettings,
|
||||
});
|
||||
render(<MapSettingsTab />);
|
||||
await user.click(screen.getByText('Save Map'));
|
||||
expect(updateSettings).toHaveBeenCalledWith({
|
||||
map_tile_url: '',
|
||||
default_lat: 48.8566,
|
||||
default_lng: 2.3522,
|
||||
default_zoom: 10,
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-013: Save Map button shows spinner while saving', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSettings = vi.fn().mockReturnValue(new Promise(() => {}));
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings(),
|
||||
updateSettings,
|
||||
});
|
||||
render(<MapSettingsTab />);
|
||||
await user.click(screen.getByText('Save Map'));
|
||||
const saveBtn = screen.getByText('Save Map').closest('button')!;
|
||||
expect(saveBtn).toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-014: Save Map error shows a toast', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSettings = vi.fn().mockRejectedValue(new Error('Save failed'));
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings(),
|
||||
updateSettings,
|
||||
});
|
||||
render(<><ToastContainer /><MapSettingsTab /></>);
|
||||
await user.click(screen.getByText('Save Map'));
|
||||
await screen.findByText('Save failed');
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-015: clicking the map updates lat/lng state', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<MapSettingsTab />);
|
||||
await user.click(screen.getByTestId('map-view'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByDisplayValue('51.5')).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue('-0.1')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-016: preset dropdown is rendered', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByText('Select template...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-017: settings update from store syncs local state', async () => {
|
||||
const { rerender } = render(<MapSettingsTab />);
|
||||
expect(screen.getByDisplayValue('48.8566')).toBeInTheDocument();
|
||||
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({ default_lat: 40.0 }),
|
||||
});
|
||||
rerender(<MapSettingsTab />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByDisplayValue('40')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,135 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { getHolidays, isWeekend, getWeekday, getWeekdayFull, daysInMonth, formatDate, BUNDESLAENDER } from './holidays'
|
||||
|
||||
describe('holidays', () => {
|
||||
// FE-COMP-HOLIDAYS-001
|
||||
it('getHolidays returns Neujahr for any year', () => {
|
||||
expect(getHolidays(2025)['2025-01-01']).toBe('Neujahr')
|
||||
expect(getHolidays(2030)['2030-01-01']).toBe('Neujahr')
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-002
|
||||
it('getHolidays returns correct Easter-relative holidays for 2025', () => {
|
||||
const h = getHolidays(2025)
|
||||
expect(h['2025-04-18']).toBe('Karfreitag')
|
||||
expect(h['2025-04-21']).toBe('Ostermontag')
|
||||
expect(h['2025-05-29']).toBe('Christi Himmelfahrt')
|
||||
expect(h['2025-06-09']).toBe('Pfingstmontag')
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-003
|
||||
it('getHolidays includes state-specific holiday for Bayern (BY)', () => {
|
||||
expect(getHolidays(2025, 'BY')['2025-01-06']).toBe('Heilige Drei Könige')
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-004
|
||||
it('getHolidays does not include Heilige Drei Könige for NW', () => {
|
||||
expect(getHolidays(2025, 'NW')['2025-01-06']).toBeUndefined()
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-005
|
||||
it('getHolidays includes Fronleichnam for NW', () => {
|
||||
expect(getHolidays(2025, 'NW')['2025-06-19']).toBe('Fronleichnam')
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-006
|
||||
it('getHolidays includes Reformationstag for BB but not BW', () => {
|
||||
expect(getHolidays(2025, 'BB')['2025-10-31']).toBe('Reformationstag')
|
||||
expect(getHolidays(2025, 'BW')['2025-10-31']).toBeUndefined()
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-007
|
||||
it('isWeekend returns true for Saturday with default weekendDays', () => {
|
||||
expect(isWeekend('2025-01-04')).toBe(true)
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-008
|
||||
it('isWeekend returns false for Monday', () => {
|
||||
expect(isWeekend('2025-01-06')).toBe(false)
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-009
|
||||
it('isWeekend respects custom weekendDays', () => {
|
||||
expect(isWeekend('2025-01-06', [1])).toBe(true)
|
||||
expect(isWeekend('2025-01-04', [1])).toBe(false)
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-010
|
||||
it('getWeekday returns correct abbreviation', () => {
|
||||
expect(getWeekday('2025-01-06')).toBe('Mo')
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-011
|
||||
it('daysInMonth returns correct count', () => {
|
||||
expect(daysInMonth(2025, 2)).toBe(28)
|
||||
expect(daysInMonth(2024, 2)).toBe(29)
|
||||
expect(daysInMonth(2025, 1)).toBe(31)
|
||||
})
|
||||
|
||||
// FE-COMP-HOLIDAYS-012
|
||||
it('BUNDESLAENDER contains all 16 states', () => {
|
||||
expect(Object.keys(BUNDESLAENDER)).toHaveLength(16)
|
||||
expect(BUNDESLAENDER).toHaveProperty('BW')
|
||||
expect(BUNDESLAENDER).toHaveProperty('BY')
|
||||
expect(BUNDESLAENDER).toHaveProperty('BE')
|
||||
})
|
||||
|
||||
// Additional: lowercase bundesland input
|
||||
it('getHolidays handles lowercase bundesland', () => {
|
||||
expect(getHolidays(2025, 'by')['2025-01-06']).toBe('Heilige Drei Könige')
|
||||
})
|
||||
|
||||
// Additional: Buß- und Bettag for Sachsen
|
||||
it('getHolidays includes Buß- und Bettag for SN', () => {
|
||||
expect(getHolidays(2025, 'SN')['2025-11-19']).toBe('Buß- und Bettag')
|
||||
})
|
||||
|
||||
// Additional: fixed national holidays
|
||||
it('getHolidays returns all fixed national holidays', () => {
|
||||
const h = getHolidays(2025)
|
||||
expect(h['2025-05-01']).toBe('Tag der Arbeit')
|
||||
expect(h['2025-10-03']).toBe('Tag der Deutschen Einheit')
|
||||
expect(h['2025-12-25']).toBe('1. Weihnachtsfeiertag')
|
||||
expect(h['2025-12-26']).toBe('2. Weihnachtsfeiertag')
|
||||
})
|
||||
|
||||
// Additional: state-specific holidays coverage
|
||||
it('getHolidays includes Internationaler Frauentag for BE', () => {
|
||||
expect(getHolidays(2025, 'BE')['2025-03-08']).toBe('Internationaler Frauentag')
|
||||
})
|
||||
|
||||
it('getHolidays includes Mariä Himmelfahrt for SL', () => {
|
||||
expect(getHolidays(2025, 'SL')['2025-08-15']).toBe('Mariä Himmelfahrt')
|
||||
})
|
||||
|
||||
it('getHolidays includes Weltkindertag for TH', () => {
|
||||
expect(getHolidays(2025, 'TH')['2025-09-20']).toBe('Weltkindertag')
|
||||
})
|
||||
|
||||
it('getHolidays includes Allerheiligen for BW', () => {
|
||||
expect(getHolidays(2025, 'BW')['2025-11-01']).toBe('Allerheiligen')
|
||||
})
|
||||
|
||||
// Additional: getWeekdayFull
|
||||
it('getWeekdayFull returns full day name', () => {
|
||||
expect(getWeekdayFull('2025-01-06')).toBe('Montag')
|
||||
expect(getWeekdayFull('2025-01-05')).toBe('Sonntag')
|
||||
})
|
||||
|
||||
// Additional: formatDate returns non-empty string
|
||||
it('formatDate returns a non-empty string', () => {
|
||||
const result = formatDate('2025-01-06')
|
||||
expect(result).toBeTruthy()
|
||||
expect(typeof result).toBe('string')
|
||||
})
|
||||
|
||||
it('formatDate accepts a locale parameter', () => {
|
||||
const result = formatDate('2025-01-06', 'de-DE')
|
||||
expect(result).toBeTruthy()
|
||||
})
|
||||
|
||||
// Additional: isWeekend for Sunday
|
||||
it('isWeekend returns true for Sunday with default weekendDays', () => {
|
||||
expect(isWeekend('2025-01-05')).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,179 @@
|
||||
import { render, screen, fireEvent, act } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { CustomDatePicker, CustomDateTimePicker } from './CustomDateTimePicker';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
|
||||
// ─── CustomDatePicker ─────────────────────────────────────────────────────────
|
||||
|
||||
describe('CustomDatePicker', () => {
|
||||
const onChange = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-001: renders without crashing', () => {
|
||||
render(<CustomDatePicker value="" onChange={onChange} />);
|
||||
expect(document.body).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-002: shows placeholder when no value', () => {
|
||||
render(<CustomDatePicker value="" onChange={onChange} placeholder="Start Date" />);
|
||||
expect(screen.getByText('Start Date')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-003: shows formatted date when value is set', () => {
|
||||
render(<CustomDatePicker value="2026-03-15" onChange={onChange} />);
|
||||
const btn = screen.getByRole('button');
|
||||
// Locale-formatted date should contain "Mar" or "15" or "2026"
|
||||
expect(btn.textContent).toMatch(/Mar|15|2026/);
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-004: clicking button opens calendar portal', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="2026-03-15" onChange={onChange} />);
|
||||
await user.click(screen.getByRole('button'));
|
||||
const dayBtns = screen.getAllByRole('button').filter(b => /^\d+$/.test(b.textContent?.trim() ?? ''));
|
||||
expect(dayBtns.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-005: clicking a day calls onChange with correct ISO date', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="2026-03-01" onChange={onChange} />);
|
||||
await user.click(screen.getByRole('button')); // open March 2026
|
||||
const dayBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '15');
|
||||
await user.click(dayBtn!);
|
||||
expect(onChange).toHaveBeenCalledWith('2026-03-15');
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-006: prev month navigation decrements month', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="2026-03-01" onChange={onChange} />);
|
||||
await user.click(screen.getByRole('button')); // open March 2026
|
||||
// Nav buttons have no text content (only SVG icons)
|
||||
const emptyBtns = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
await user.click(emptyBtns[0]); // left chevron = prev month
|
||||
expect(screen.getByText(/february 2026/i)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-007: next month navigation increments month', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="2026-03-01" onChange={onChange} />);
|
||||
await user.click(screen.getByRole('button')); // open March 2026
|
||||
const emptyBtns = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
await user.click(emptyBtns[emptyBtns.length - 1]); // right chevron = next month
|
||||
expect(screen.getByText(/april 2026/i)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-008: clear button calls onChange with empty string', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="2026-03-15" onChange={onChange} />);
|
||||
await user.click(screen.getByRole('button')); // open
|
||||
const clearBtn = screen.getByText('✕');
|
||||
await user.click(clearBtn);
|
||||
expect(onChange).toHaveBeenCalledWith('');
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-009: clear button absent when no value', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="" onChange={onChange} />);
|
||||
await user.click(screen.getByRole('button')); // open
|
||||
expect(screen.queryByText('✕')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-010: clicking outside calendar closes it', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="2026-03-15" onChange={onChange} />);
|
||||
await user.click(screen.getByRole('button')); // open
|
||||
// Verify calendar is open (day buttons present)
|
||||
expect(screen.getAllByRole('button').filter(b => /^\d+$/.test(b.textContent?.trim() ?? '')).length).toBeGreaterThan(0);
|
||||
// Fire mousedown outside both the component div and the portal
|
||||
const outsideEl = document.createElement('div');
|
||||
document.body.appendChild(outsideEl);
|
||||
await act(async () => {
|
||||
fireEvent.mouseDown(outsideEl);
|
||||
});
|
||||
document.body.removeChild(outsideEl);
|
||||
// Day buttons should be gone
|
||||
expect(screen.getAllByRole('button').filter(b => /^\d+$/.test(b.textContent?.trim() ?? '')).length).toBe(0);
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-011: double-click activates text input mode', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="" onChange={onChange} />);
|
||||
await user.dblClick(screen.getByRole('button'));
|
||||
expect(screen.getByPlaceholderText('DD.MM.YYYY')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-012: text input accepts ISO format YYYY-MM-DD', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="" onChange={onChange} />);
|
||||
await user.dblClick(screen.getByRole('button'));
|
||||
const input = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
fireEvent.change(input, { target: { value: '2026-07-04' } });
|
||||
fireEvent.keyDown(input, { key: 'Enter' });
|
||||
expect(onChange).toHaveBeenCalledWith('2026-07-04');
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-013: text input accepts EU format DD.MM.YYYY', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="" onChange={onChange} />);
|
||||
await user.dblClick(screen.getByRole('button'));
|
||||
const input = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
fireEvent.change(input, { target: { value: '04.07.2026' } });
|
||||
fireEvent.keyDown(input, { key: 'Enter' });
|
||||
expect(onChange).toHaveBeenCalledWith('2026-07-04');
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-014: Escape in text input cancels text mode', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDatePicker value="" onChange={onChange} />);
|
||||
await user.dblClick(screen.getByRole('button'));
|
||||
const input = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
fireEvent.keyDown(input, { key: 'Escape' });
|
||||
expect(screen.queryByPlaceholderText('DD.MM.YYYY')).toBeNull();
|
||||
expect(screen.getByRole('button')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── CustomDateTimePicker ─────────────────────────────────────────────────────
|
||||
|
||||
describe('CustomDateTimePicker', () => {
|
||||
const onChange = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
// Use 24h format for predictable time input behavior
|
||||
useSettingsStore.setState({
|
||||
settings: { ...useSettingsStore.getState().settings, time_format: '24h' },
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-015: renders date and time pickers side by side', () => {
|
||||
render(<CustomDateTimePicker value="" onChange={onChange} />);
|
||||
// Date picker renders a trigger button
|
||||
expect(screen.getAllByRole('button').length).toBeGreaterThanOrEqual(1);
|
||||
// Time picker renders a text input
|
||||
expect(screen.getByRole('textbox')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-016: setting a date-only value defaults time to 12:00', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomDateTimePicker value="" onChange={onChange} />);
|
||||
// The date trigger is the first button
|
||||
const dateTrigger = screen.getAllByRole('button')[0];
|
||||
await user.click(dateTrigger); // open calendar
|
||||
// Click day 1
|
||||
const day1 = screen.getAllByRole('button').find(b => b.textContent?.trim() === '1');
|
||||
await user.click(day1!);
|
||||
// onChange should have been called with T12:00 suffix
|
||||
expect(onChange).toHaveBeenCalledWith(expect.stringMatching(/T12:00$/));
|
||||
});
|
||||
|
||||
it('FE-COMP-DATEPICKER-017: changing time part preserves date part', () => {
|
||||
render(<CustomDateTimePicker value="2026-06-01T09:30" onChange={onChange} />);
|
||||
const timeInput = screen.getByRole('textbox');
|
||||
fireEvent.change(timeInput, { target: { value: '10:00' } });
|
||||
expect(onChange).toHaveBeenCalledWith('2026-06-01T10:00');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,208 @@
|
||||
import { render, screen, fireEvent, act } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import CustomTimePicker from './CustomTimePicker';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { seedStore, resetAllStores } from '../../../tests/helpers/store';
|
||||
import { buildSettings } from '../../../tests/helpers/factories';
|
||||
|
||||
describe('CustomTimePicker', () => {
|
||||
const onChange = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
resetAllStores();
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ time_format: '24h' }) });
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-001: renders without crashing', () => {
|
||||
render(<CustomTimePicker value="" onChange={onChange} />);
|
||||
expect(document.body).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-002: shows value in text input in 24h format', () => {
|
||||
render(<CustomTimePicker value="14:30" onChange={onChange} />);
|
||||
const input = screen.getByRole('textbox');
|
||||
expect(input).toHaveProperty('value', '14:30');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-003: shows value in 12h format', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }) });
|
||||
render(<CustomTimePicker value="14:30" onChange={onChange} />);
|
||||
const input = screen.getByRole('textbox');
|
||||
expect(input).toHaveProperty('value', '2:30 PM');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-004: shows raw value while focused', async () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }) });
|
||||
render(<CustomTimePicker value="14:30" onChange={onChange} />);
|
||||
const input = screen.getByRole('textbox');
|
||||
await userEvent.setup().click(input);
|
||||
expect(input).toHaveProperty('value', '14:30');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-005: clicking clock icon opens dropdown', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="10:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
// Dropdown should show hour and minute display boxes with "10" and "00"
|
||||
expect(screen.getByText('10')).toBeTruthy();
|
||||
expect(screen.getByText('00')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-006: hour increment button increases hour', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="10:00" onChange={onChange} />);
|
||||
// Open dropdown
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
// The first empty button inside the dropdown is the hour up chevron
|
||||
const chevrons = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
// chevrons[0] is the clock icon, chevrons after that are up/down for hour, up/down for minute
|
||||
await user.click(chevrons[1]); // hour up
|
||||
expect(onChange).toHaveBeenCalledWith('11:00');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-007: hour decrement button decreases hour', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="10:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
const chevrons = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
await user.click(chevrons[2]); // hour down
|
||||
expect(onChange).toHaveBeenCalledWith('09:00');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-008: minute increment steps by 5', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="10:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
const chevrons = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
await user.click(chevrons[3]); // minute up
|
||||
expect(onChange).toHaveBeenCalledWith('10:05');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-009: minute increment wraps and carries hour', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="10:55" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
const chevrons = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
await user.click(chevrons[3]); // minute up
|
||||
expect(onChange).toHaveBeenCalledWith('11:00');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-010: hour wraps at 23→0', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="23:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
const chevrons = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
await user.click(chevrons[1]); // hour up
|
||||
expect(onChange).toHaveBeenCalledWith('00:00');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-011: clear button calls onChange with empty string', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="10:30" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
const clearBtn = screen.getByText('✕');
|
||||
await user.click(clearBtn);
|
||||
expect(onChange).toHaveBeenCalledWith('');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-012: clear button absent when no value', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
expect(screen.queryByText('✕')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-013: AM/PM toggle shown in 12h mode', async () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }) });
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="14:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
expect(screen.getByText('PM')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-014: AM/PM toggle hidden in 24h mode', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="14:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
expect(screen.queryByText('AM')).toBeNull();
|
||||
expect(screen.queryByText('PM')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-015: AM/PM toggle switches hour', async () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }) });
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="14:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
// In 12h mode with value "14:00", there are AM/PM chevrons after hour and minute chevrons
|
||||
const chevrons = screen.getAllByRole('button').filter(b => b.textContent?.trim() === '');
|
||||
// chevrons: [0]=clock, [1]=hour up, [2]=hour down, [3]=min up, [4]=min down, [5]=ampm up, [6]=ampm down
|
||||
await user.click(chevrons[5]); // AM/PM toggle
|
||||
expect(onChange).toHaveBeenCalledWith('02:00');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-016: blur normalizes HH:MM input', () => {
|
||||
// "9:05" matches /^\d{1,2}:\d{2}$/ and normalizes the hour to zero-padded
|
||||
render(<CustomTimePicker value="9:05" onChange={onChange} />);
|
||||
const input = screen.getByRole('textbox');
|
||||
fireEvent.focus(input);
|
||||
fireEvent.blur(input);
|
||||
expect(onChange).toHaveBeenCalledWith('09:05');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-017: blur normalizes 4-digit HHMM input', () => {
|
||||
render(<CustomTimePicker value="1430" onChange={onChange} />);
|
||||
const input = screen.getByRole('textbox');
|
||||
fireEvent.focus(input);
|
||||
fireEvent.blur(input);
|
||||
expect(onChange).toHaveBeenCalledWith('14:30');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-018: blur normalizes bare hour', () => {
|
||||
render(<CustomTimePicker value="8" onChange={onChange} />);
|
||||
const input = screen.getByRole('textbox');
|
||||
fireEvent.focus(input);
|
||||
fireEvent.blur(input);
|
||||
expect(onChange).toHaveBeenCalledWith('08:00');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-019: blur normalizes 12h string "5:30 PM"', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }) });
|
||||
render(<CustomTimePicker value="5:30 PM" onChange={onChange} />);
|
||||
const input = screen.getByRole('textbox');
|
||||
fireEvent.focus(input);
|
||||
fireEvent.blur(input);
|
||||
expect(onChange).toHaveBeenCalledWith('17:30');
|
||||
});
|
||||
|
||||
it('FE-COMP-TIMEPICKER-020: clicking outside dropdown closes it', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CustomTimePicker value="10:00" onChange={onChange} />);
|
||||
const clockBtn = screen.getAllByRole('button').find(b => b.textContent?.trim() === '');
|
||||
await user.click(clockBtn!);
|
||||
// Verify dropdown is open
|
||||
expect(screen.getByText('10')).toBeTruthy();
|
||||
// Click outside
|
||||
const outsideEl = document.createElement('div');
|
||||
document.body.appendChild(outsideEl);
|
||||
await act(async () => {
|
||||
fireEvent.mouseDown(outsideEl);
|
||||
});
|
||||
document.body.removeChild(outsideEl);
|
||||
// Hour display should be gone (only visible in dropdown)
|
||||
const allText = Array.from(document.querySelectorAll('div')).map(d => d.textContent);
|
||||
// The "10" in the dropdown display box should no longer be rendered as a standalone element
|
||||
expect(screen.queryByText('✕')).toBeNull(); // clear button gone = dropdown closed
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user