mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-21 06:11:45 +00:00
jubnl
880 lines
32 KiB
TypeScript
880 lines
32 KiB
TypeScript
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
|
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, seedStore } from '../../tests/helpers/store';
|
|
import { buildUser, buildAdmin, buildTrip } from '../../tests/helpers/factories';
|
|
import { useAuthStore } from '../store/authStore';
|
|
import { usePermissionsStore } from '../store/permissionsStore';
|
|
import DashboardPage from './DashboardPage';
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
resetAllStores();
|
|
// Seed auth with authenticated user
|
|
seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
|
|
// Grant all permissions so buttons are visible
|
|
seedStore(usePermissionsStore, {
|
|
level: 'owner',
|
|
} as any);
|
|
// Intercept CurrencyWidget's external fetch so it resolves before teardown
|
|
server.use(
|
|
http.get('https://api.exchangerate-api.com/v4/latest/:currency', () => {
|
|
return HttpResponse.json({ rates: { USD: 1.08, EUR: 1, CHF: 0.97 } });
|
|
}),
|
|
);
|
|
});
|
|
|
|
describe('DashboardPage', () => {
|
|
describe('FE-PAGE-DASH-001: Unauthenticated user is redirected', () => {
|
|
it('does not render dashboard content when not authenticated', () => {
|
|
// When the auth store has no user, the page relies on ProtectedRoute (App.tsx) to redirect.
|
|
// Rendering the page directly without auth: the page itself still renders (guard is in router).
|
|
// We verify the page is accessible only with auth seeded above.
|
|
// This is tested at the App routing level — here we verify dashboard content renders WITH auth.
|
|
seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
|
|
render(<DashboardPage />);
|
|
// Dashboard content is present when authenticated
|
|
expect(screen.getByText(/my trips/i)).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-002: Trip list loads on mount', () => {
|
|
it('fetches trips via GET /api/trips on mount', async () => {
|
|
render(<DashboardPage />);
|
|
|
|
// After data loads, trip cards should appear
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-003: Trips render with name and dates', () => {
|
|
it('shows trip name and dates in the list', async () => {
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// At least the first trip name should be visible
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeVisible();
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-004: Empty state when no trips', () => {
|
|
it('shows empty state message when API returns no trips', async () => {
|
|
server.use(
|
|
http.get('/api/trips', () => {
|
|
return HttpResponse.json({ trips: [] });
|
|
}),
|
|
);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText(/no trips yet/i)).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-005: Create Trip button opens TripFormModal', () => {
|
|
it('clicking New Trip button opens the trip form modal', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByRole('button', { name: /new trip/i }).length).toBeGreaterThan(0);
|
|
});
|
|
|
|
await user.click(screen.getAllByRole('button', { name: /new trip/i })[0]);
|
|
|
|
// TripFormModal opens — "Create New Trip" appears in heading and submit button
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText(/create new trip/i).length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-006: Loading state while fetching trips', () => {
|
|
it('shows loading skeletons while trips are being fetched', async () => {
|
|
// Delay response to observe loading state
|
|
server.use(
|
|
http.get('/api/trips', async () => {
|
|
await new Promise(resolve => setTimeout(resolve, 50));
|
|
return HttpResponse.json({ trips: [] });
|
|
}),
|
|
);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
// Header renders immediately
|
|
expect(screen.getByText(/my trips/i)).toBeInTheDocument();
|
|
|
|
// Loading is indicated by subtitle "Loading…" or skeleton cards
|
|
// The subtitle during loading shows t('common.loading')
|
|
await waitFor(() => {
|
|
// After loading completes, no-trips state or trips appear
|
|
expect(screen.queryByText(/loading/i) === null || screen.getByText(/no trips yet/i)).toBeTruthy();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-007: Dashboard title visible', () => {
|
|
it('shows the dashboard title', async () => {
|
|
render(<DashboardPage />);
|
|
expect(screen.getByText(/my trips/i)).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-008: Delete trip shows ConfirmDialog', () => {
|
|
it('clicking delete on a trip card opens the confirm dialog', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Find delete button — CardAction with label t('common.delete')
|
|
const deleteButtons = screen.getAllByRole('button', { name: /delete/i });
|
|
await user.click(deleteButtons[0]);
|
|
|
|
await waitFor(() => {
|
|
// ConfirmDialog renders with title t('common.delete') and cancel/confirm buttons
|
|
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-009: Confirm delete removes trip from list', () => {
|
|
it('confirming delete removes the trip from the list', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Open confirm dialog
|
|
const deleteButtons = screen.getAllByRole('button', { name: /delete/i });
|
|
await user.click(deleteButtons[0]);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
|
});
|
|
|
|
// Click the confirm button (the one inside the dialog, not the delete action button)
|
|
// ConfirmDialog renders a confirm button with confirmLabel or t('common.delete')
|
|
const dialogDeleteBtn = screen.getAllByRole('button', { name: /delete/i }).find(
|
|
btn => btn.closest('[class*="fixed inset-0"]') || btn.closest('.fixed')
|
|
);
|
|
// Just click the second delete button that appears (the dialog confirm button)
|
|
const allDeleteBtns = screen.getAllByRole('button', { name: /delete/i });
|
|
// The last one should be the confirm button in the dialog
|
|
await user.click(allDeleteBtns[allDeleteBtns.length - 1]);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.queryByText('Paris Adventure')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-010: Cancel delete keeps trip in list', () => {
|
|
it('cancelling delete keeps the trip in the list', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Open confirm dialog
|
|
const deleteButtons = screen.getAllByRole('button', { name: /delete/i });
|
|
await user.click(deleteButtons[0]);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
|
});
|
|
|
|
await user.click(screen.getByRole('button', { name: /cancel/i }));
|
|
|
|
// Trip still visible
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-011: Archive trip moves it to archived section', () => {
|
|
it('archiving a trip removes it from active and shows it in archived section', async () => {
|
|
const archivedTrip = buildTrip({ title: 'Paris Adventure', start_date: '2026-07-01', end_date: '2026-07-10', is_archived: true });
|
|
server.use(
|
|
http.put('/api/trips/:id', async ({ request }) => {
|
|
const body = await request.json() as Record<string, unknown>;
|
|
if (body.is_archived === true) {
|
|
return HttpResponse.json({ trip: archivedTrip });
|
|
}
|
|
return HttpResponse.json({ trip: archivedTrip });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Click archive button
|
|
const archiveButtons = screen.getAllByRole('button', { name: /archive/i });
|
|
await user.click(archiveButtons[0]);
|
|
|
|
// Wait for archived section toggle to appear
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
|
|
});
|
|
|
|
// Click "Archived" toggle to show archived trips
|
|
await user.click(screen.getByRole('button', { name: /archived/i }));
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-012: Edit trip opens form with pre-filled data', () => {
|
|
it('clicking edit on a trip card opens TripFormModal with trip title pre-filled', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
const editButtons = screen.getAllByRole('button', { name: /edit/i });
|
|
await user.click(editButtons[0]);
|
|
|
|
await waitFor(() => {
|
|
const titleInput = screen.getByDisplayValue('Paris Adventure');
|
|
expect(titleInput).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-013: Grid/list view toggle persists to localStorage', () => {
|
|
it('clicking list view toggle switches layout and saves to localStorage', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Find the view mode toggle button (shows List icon when in grid mode, title "List view")
|
|
const viewToggle = screen.getByTitle(/list view/i);
|
|
await user.click(viewToggle);
|
|
|
|
// localStorage should be updated to 'list'
|
|
expect(localStorage.getItem('trek_dashboard_view')).toBe('list');
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-014: Archived trips section toggles visibility', () => {
|
|
it('shows archived trips when the archived section toggle is clicked', async () => {
|
|
const oldTrip = buildTrip({ title: 'Old Rome Trip', start_date: '2024-01-01', end_date: '2024-01-07', is_archived: true });
|
|
server.use(
|
|
http.get('/api/trips', ({ request }) => {
|
|
const url = new URL(request.url);
|
|
if (url.searchParams.get('archived')) {
|
|
return HttpResponse.json({ trips: [oldTrip] });
|
|
}
|
|
return HttpResponse.json({ trips: [buildTrip({ title: 'Paris Adventure', start_date: '2026-07-01', end_date: '2026-07-10' })] });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
// Wait for active trips to load
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Archived section toggle should be present
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
|
|
});
|
|
|
|
// Click to expand
|
|
await user.click(screen.getByRole('button', { name: /archived/i }));
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-015: Clicking a trip card navigates to /trips/:id', () => {
|
|
it('clicking a trip card navigates to the trip page', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
// Mobile + desktop may render the same trip twice
|
|
expect(screen.getAllByText('Tokyo Trip').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
const tokyoTrip = screen.getAllByText('Tokyo Trip')[0];
|
|
await user.click(tokyoTrip);
|
|
|
|
expect(tokyoTrip).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-016: List view renders trip list items', () => {
|
|
it('switching to list view renders trips as list items', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Tokyo Trip').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Switch to list view
|
|
const viewToggle = screen.getByTitle(/list view/i);
|
|
await user.click(viewToggle);
|
|
|
|
// Non-spotlight trips should be visible in list view
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Tokyo Trip').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
const tokyoTrip = screen.getAllByText('Tokyo Trip')[0];
|
|
await user.click(tokyoTrip);
|
|
expect(tokyoTrip).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-017: List view delete and archive actions work', () => {
|
|
it('list view renders trips and action buttons are clickable', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Tokyo Trip').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Switch to list view
|
|
const viewToggle = screen.getByTitle(/list view/i);
|
|
await user.click(viewToggle);
|
|
|
|
// Non-spotlight trips render in list view
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Tokyo Trip').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
const allButtons = screen.getAllByRole('button');
|
|
expect(allButtons.length).toBeGreaterThan(4);
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-018: Copy trip creates a new trip', () => {
|
|
it('clicking copy on a trip card copies the trip', async () => {
|
|
server.use(
|
|
http.post('/api/trips/:id/copy', async () => {
|
|
const { buildTrip } = await import('../../tests/helpers/factories');
|
|
const trip = buildTrip({ title: 'Paris Adventure (Copy)', start_date: '2026-07-01', end_date: '2026-07-10' });
|
|
return HttpResponse.json({ trip });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Find copy buttons
|
|
const copyButtons = screen.getAllByRole('button', { name: /copy/i });
|
|
await user.click(copyButtons[0]);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure (Copy)')[0]).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-019: Widget settings dropdown opens and closes', () => {
|
|
it('clicking the settings button shows the widget toggles', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Find settings button — it's the gear icon button without title or text
|
|
const allBtns = screen.getAllByRole('button');
|
|
const settingsButton = allBtns.find(
|
|
btn => {
|
|
const title = btn.getAttribute('title');
|
|
const text = btn.textContent?.trim() || '';
|
|
// Settings gear: no title, no meaningful text, not the notification bell
|
|
return !title && !text && btn.querySelector('.lucide-settings');
|
|
}
|
|
);
|
|
|
|
expect(settingsButton).toBeDefined();
|
|
if (settingsButton) {
|
|
await user.click(settingsButton);
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Widgets:')).toBeInTheDocument();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-020: Archived section - restore trip', () => {
|
|
it('clicking restore in archived section moves trip back to active list', async () => {
|
|
const activeTrip = buildTrip({ title: 'Paris Adventure', start_date: '2026-07-01', end_date: '2026-07-10' });
|
|
const archivedTrip = buildTrip({ title: 'Old Rome Trip', start_date: '2024-01-01', end_date: '2024-01-07', is_archived: true });
|
|
const restoredTrip = { ...archivedTrip, is_archived: false };
|
|
|
|
server.use(
|
|
http.get('/api/trips', ({ request }) => {
|
|
const url = new URL(request.url);
|
|
if (url.searchParams.get('archived')) {
|
|
return HttpResponse.json({ trips: [archivedTrip] });
|
|
}
|
|
return HttpResponse.json({ trips: [activeTrip] });
|
|
}),
|
|
http.put('/api/trips/:id', async ({ request }) => {
|
|
const body = await request.json() as Record<string, unknown>;
|
|
if (body.is_archived === false) {
|
|
return HttpResponse.json({ trip: restoredTrip });
|
|
}
|
|
return HttpResponse.json({ trip: archivedTrip });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
|
|
});
|
|
|
|
// Expand archived section
|
|
await user.click(screen.getByRole('button', { name: /archived/i }));
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
|
|
});
|
|
|
|
// Click restore button
|
|
const restoreBtn = screen.getByRole('button', { name: /restore/i });
|
|
await user.click(restoreBtn);
|
|
|
|
// After restore, archived section should disappear (no more archived trips)
|
|
await waitFor(() => {
|
|
expect(screen.queryByRole('button', { name: /archived/i })).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-021: Create trip via form submission', () => {
|
|
it('submitting the create form adds the trip to the list', async () => {
|
|
const newTrip = buildTrip({ title: 'New Trip Test', start_date: '2027-01-01', end_date: '2027-01-05' });
|
|
server.use(
|
|
http.post('/api/trips', async () => {
|
|
return HttpResponse.json({ trip: newTrip });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByRole('button', { name: /new trip/i }).length).toBeGreaterThan(0);
|
|
});
|
|
|
|
await user.click(screen.getAllByRole('button', { name: /new trip/i })[0]);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText(/create new trip/i).length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Fill in the title
|
|
const titleInput = screen.getByPlaceholderText(/e\.g\. Summer in Japan/i);
|
|
await user.clear(titleInput);
|
|
await user.type(titleInput, 'New Trip Test');
|
|
|
|
// Submit the form
|
|
const submitBtn = screen.getAllByRole('button').find(btn => btn.textContent?.toLowerCase().includes('create'));
|
|
if (submitBtn) {
|
|
await user.click(submitBtn);
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('New Trip Test').length).toBeGreaterThan(0);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-022: Error state on load failure', () => {
|
|
it('shows error toast when trips API fails', async () => {
|
|
server.use(
|
|
http.get('/api/trips', () => {
|
|
return HttpResponse.json({ error: 'Server error' }, { status: 500 });
|
|
}),
|
|
);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
// Page should still render header
|
|
expect(screen.getByText(/my trips/i)).toBeInTheDocument();
|
|
|
|
// Wait for loading to complete (error path)
|
|
await waitFor(() => {
|
|
// After error, loading state resolves and empty state or the title remains
|
|
expect(screen.queryByText(/my trips/i)).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-023: SpotlightCard shows progress bar for ongoing trip', () => {
|
|
it('renders progress bar and live badge when trip is currently ongoing', async () => {
|
|
const today = new Date().toISOString().split('T')[0];
|
|
const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
|
|
const nextWeek = new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0];
|
|
|
|
const ongoingTrip = buildTrip({
|
|
title: 'Current Voyage',
|
|
start_date: yesterday,
|
|
end_date: nextWeek,
|
|
day_count: 9,
|
|
place_count: 3,
|
|
shared_count: 1,
|
|
});
|
|
|
|
server.use(
|
|
http.get('/api/trips', ({ request }) => {
|
|
const url = new URL(request.url);
|
|
if (url.searchParams.get('archived')) return HttpResponse.json({ trips: [] });
|
|
return HttpResponse.json({ trips: [ongoingTrip] });
|
|
}),
|
|
);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Current Voyage').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Live badge text appears (mobile + desktop spotlight)
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText(/live now/i).length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Progress bar label "Trip progress" appears
|
|
expect(screen.getAllByText(/trip progress/i).length).toBeGreaterThan(0);
|
|
|
|
// "days left" label appears inside the progress section
|
|
expect(screen.getAllByText(/days left/i).length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-024: SpotlightCard shows countdown for upcoming trip', () => {
|
|
it('renders countdown badge for a future trip', async () => {
|
|
const inFiveDays = new Date(Date.now() + 5 * 86400000).toISOString().split('T')[0];
|
|
const inTenDays = new Date(Date.now() + 10 * 86400000).toISOString().split('T')[0];
|
|
|
|
const upcomingTrip = buildTrip({
|
|
title: 'Upcoming Safari',
|
|
start_date: inFiveDays,
|
|
end_date: inTenDays,
|
|
place_count: 2,
|
|
shared_count: 0,
|
|
});
|
|
|
|
server.use(
|
|
http.get('/api/trips', ({ request }) => {
|
|
const url = new URL(request.url);
|
|
if (url.searchParams.get('archived')) return HttpResponse.json({ trips: [] });
|
|
return HttpResponse.json({ trips: [upcomingTrip] });
|
|
}),
|
|
);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Upcoming Safari').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Badge should show "X days left" countdown (not "Live now")
|
|
expect(screen.queryByText(/live now/i)).not.toBeInTheDocument();
|
|
// The SpotlightCard renders a badge with the countdown text containing "days"
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText(/days/i).length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-025: Mobile Quick Actions section renders', () => {
|
|
it('shows New Trip quick action button on mobile', async () => {
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Mobile Quick Actions: "New Trip" button rendered in the quick-actions grid
|
|
// getAllByText because it appears in both mobile quick-actions and desktop header
|
|
const newTripButtons = screen.getAllByText(/new trip/i);
|
|
expect(newTripButtons.length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-026: Widget settings toggles currency and timezone', () => {
|
|
it('toggling currency widget off hides it from settings', async () => {
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Open widget settings
|
|
const allBtns = screen.getAllByRole('button');
|
|
const settingsButton = allBtns.find(
|
|
btn => {
|
|
const title = btn.getAttribute('title');
|
|
const text = btn.textContent?.trim() || '';
|
|
return !title && !text && btn.querySelector('.lucide-settings');
|
|
}
|
|
);
|
|
|
|
expect(settingsButton).toBeDefined();
|
|
if (settingsButton) {
|
|
await user.click(settingsButton);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Widgets:')).toBeInTheDocument();
|
|
});
|
|
|
|
// Both currency and timezone toggle labels should be visible
|
|
// Use getAllByText because labels may appear in both widget settings and quick actions
|
|
expect(screen.getAllByText(/currency/i).length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText(/timezone/i).length).toBeGreaterThan(0);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-027: Archived section expand and collapse', () => {
|
|
it('expands and then collapses the archived trips section', async () => {
|
|
const activeTrip = buildTrip({ title: 'Active Trip', start_date: '2026-08-01', end_date: '2026-08-10' });
|
|
const archivedTrip = buildTrip({ title: 'Old Archived Trip', start_date: '2024-03-01', end_date: '2024-03-07', is_archived: true });
|
|
|
|
server.use(
|
|
http.get('/api/trips', ({ request }) => {
|
|
const url = new URL(request.url);
|
|
if (url.searchParams.get('archived')) {
|
|
return HttpResponse.json({ trips: [archivedTrip] });
|
|
}
|
|
return HttpResponse.json({ trips: [activeTrip] });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
|
|
});
|
|
|
|
// Expand
|
|
await user.click(screen.getByRole('button', { name: /archived/i }));
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Old Archived Trip')).toBeInTheDocument();
|
|
});
|
|
|
|
// Collapse
|
|
await user.click(screen.getByRole('button', { name: /archived/i }));
|
|
await waitFor(() => {
|
|
expect(screen.queryByText('Old Archived Trip')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-028: Unarchive action restores trip to active list', () => {
|
|
it('clicking restore on an archived trip removes it from archived section', async () => {
|
|
const activeTrip = buildTrip({ title: 'My Active Trip', start_date: '2026-08-01', end_date: '2026-08-10' });
|
|
const archivedTrip = buildTrip({ title: 'Restored Trip', start_date: '2024-06-01', end_date: '2024-06-07', is_archived: true });
|
|
const restoredTrip = { ...archivedTrip, is_archived: false };
|
|
|
|
server.use(
|
|
http.get('/api/trips', ({ request }) => {
|
|
const url = new URL(request.url);
|
|
if (url.searchParams.get('archived')) {
|
|
return HttpResponse.json({ trips: [archivedTrip] });
|
|
}
|
|
return HttpResponse.json({ trips: [activeTrip] });
|
|
}),
|
|
http.put('/api/trips/:id', async ({ request }) => {
|
|
const body = await request.json() as Record<string, unknown>;
|
|
if (body.is_archived === false) {
|
|
return HttpResponse.json({ trip: restoredTrip });
|
|
}
|
|
return HttpResponse.json({ trip: archivedTrip });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
|
|
});
|
|
|
|
await user.click(screen.getByRole('button', { name: /archived/i }));
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Restored Trip')).toBeInTheDocument();
|
|
});
|
|
|
|
const restoreBtn = screen.getByRole('button', { name: /restore/i });
|
|
await user.click(restoreBtn);
|
|
|
|
// After restore, the archived section should disappear (no archived trips left)
|
|
await waitFor(() => {
|
|
expect(screen.queryByRole('button', { name: /archived/i })).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-029: Copy trip action creates a duplicate', () => {
|
|
it('clicking copy on a spotlight card duplicates the trip', async () => {
|
|
server.use(
|
|
http.post('/api/trips/:id/copy', async () => {
|
|
const trip = buildTrip({ title: 'Paris Adventure (Copy)', start_date: '2026-07-01', end_date: '2026-07-10' });
|
|
return HttpResponse.json({ trip });
|
|
}),
|
|
);
|
|
|
|
const user = userEvent.setup();
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
// Find copy buttons (may appear in mobile + desktop)
|
|
const copyButtons = screen.getAllByRole('button', { name: /copy/i });
|
|
expect(copyButtons.length).toBeGreaterThan(0);
|
|
await user.click(copyButtons[0]);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure (Copy)').length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-030: Empty state renders create button', () => {
|
|
it('shows empty state with create button when no trips exist', async () => {
|
|
server.use(
|
|
http.get('/api/trips', () => {
|
|
return HttpResponse.json({ trips: [] });
|
|
}),
|
|
);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText(/no trips yet/i)).toBeInTheDocument();
|
|
});
|
|
|
|
// Empty state should show a descriptive text and a create button
|
|
const createButtons = screen.getAllByRole('button');
|
|
const createBtn = createButtons.find(btn => btn.textContent?.toLowerCase().includes('trip'));
|
|
expect(createBtn).toBeDefined();
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-031: SpotlightCard shows stats for ongoing trip', () => {
|
|
it('renders duration stat and places/buddies stats for a live trip', async () => {
|
|
const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
|
|
const inFiveDays = new Date(Date.now() + 5 * 86400000).toISOString().split('T')[0];
|
|
|
|
const ongoingTrip = buildTrip({
|
|
title: 'Live Adventure',
|
|
start_date: yesterday,
|
|
end_date: inFiveDays,
|
|
place_count: 5,
|
|
shared_count: 2,
|
|
});
|
|
|
|
server.use(
|
|
http.get('/api/trips', ({ request }) => {
|
|
const url = new URL(request.url);
|
|
if (url.searchParams.get('archived')) return HttpResponse.json({ trips: [] });
|
|
return HttpResponse.json({ trips: [ongoingTrip] });
|
|
}),
|
|
);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Live Adventure').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Stats section: places count "5" and buddies count "2" appear
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('5').length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText('2').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Days stat label
|
|
expect(screen.getAllByText(/days/i).length).toBeGreaterThan(0);
|
|
// Places stat label
|
|
expect(screen.getAllByText(/places/i).length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
describe('FE-PAGE-DASH-032: Dark mode detection uses window.matchMedia', () => {
|
|
it('renders without error when dark_mode is set to auto', async () => {
|
|
// Seed settings with dark_mode = 'auto' to exercise the matchMedia branch
|
|
const { useSettingsStore } = await import('../store/settingsStore');
|
|
seedStore(useSettingsStore, {
|
|
settings: {
|
|
map_tile_url: '',
|
|
default_lat: 48.8566,
|
|
default_lng: 2.3522,
|
|
default_zoom: 10,
|
|
dark_mode: 'auto',
|
|
default_currency: 'USD',
|
|
language: 'en',
|
|
temperature_unit: 'fahrenheit',
|
|
time_format: '12h',
|
|
show_place_description: false,
|
|
route_calculation: false,
|
|
blur_booking_codes: false,
|
|
dashboard_currency: 'on',
|
|
dashboard_timezone: 'on',
|
|
},
|
|
updateSetting: vi.fn(),
|
|
} as any);
|
|
|
|
render(<DashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
// Page renders successfully with dark_mode = 'auto'
|
|
expect(screen.getByText(/my trips/i)).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|