mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 21:31:46 +00:00
test: expand frontend test suite to 82% coverage
Adds ~45 new and updated test files covering Admin, Collab, Dashboard, Map, Memories, PDF, Photos, Planner, Settings, Vacay, Weather components, pages, stores, and a WebSocket integration test.
This commit is contained in:
jubnl
@@ -1,12 +1,28 @@
|
||||
// FE-COMP-PLACEFORM-001 to FE-COMP-PLACEFORM-015
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
// FE-COMP-PLACEFORM-001 to FE-COMP-PLACEFORM-036
|
||||
import { render, screen, waitFor, fireEvent, within } 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 { usePermissionsStore } from '../../store/permissionsStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildTrip, buildPlace, buildCategory } from '../../../tests/helpers/factories';
|
||||
import { buildUser, buildTrip, buildPlace, buildCategory, buildAssignment } from '../../../tests/helpers/factories';
|
||||
import PlaceFormModal from './PlaceFormModal';
|
||||
|
||||
// Mock CustomTimePicker so we get a simple text input instead of the portal-heavy UI
|
||||
vi.mock('../shared/CustomTimePicker', () => ({
|
||||
default: ({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) => (
|
||||
<input
|
||||
data-testid="time-picker"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={placeholder ?? '00:00'}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
|
||||
const defaultProps = {
|
||||
isOpen: true,
|
||||
onClose: vi.fn(),
|
||||
@@ -121,4 +137,299 @@ describe('PlaceFormModal', () => {
|
||||
// Category label is present
|
||||
expect(screen.getByText('Category')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// ── Form initialization ──────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-016: prefillCoords populates lat/lng/name', () => {
|
||||
render(
|
||||
<PlaceFormModal
|
||||
{...defaultProps}
|
||||
place={null}
|
||||
prefillCoords={{ lat: 48.8566, lng: 2.3522, name: 'Paris', address: 'Paris, France' }}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByDisplayValue('48.8566')).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue('Paris')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-017: form resets when isOpen changes from place to null', () => {
|
||||
const place = buildPlace({ name: 'Old Place' });
|
||||
const { rerender } = render(<PlaceFormModal {...defaultProps} place={place} isOpen={true} />);
|
||||
expect(screen.getByDisplayValue('Old Place')).toBeInTheDocument();
|
||||
|
||||
rerender(<PlaceFormModal {...defaultProps} place={null} isOpen={false} />);
|
||||
expect(screen.queryByDisplayValue('Old Place')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// ── Maps search ──────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-018: maps search populates results via button click', async () => {
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.post('/api/maps/search', () =>
|
||||
HttpResponse.json({
|
||||
places: [{ name: 'Eiffel Tower', address: 'Paris', lat: '48.8584', lng: '2.2945' }],
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const searchInput = screen.getByPlaceholderText('Search places...');
|
||||
await user.type(searchInput, 'Eiffel Tower');
|
||||
|
||||
// The search button is the sibling button of the search input
|
||||
const searchRow = searchInput.closest('.flex')!;
|
||||
const searchBtn = within(searchRow).getByRole('button');
|
||||
await user.click(searchBtn);
|
||||
|
||||
await screen.findByText('Eiffel Tower');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-019: pressing Enter in search input triggers search', async () => {
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.post('/api/maps/search', () =>
|
||||
HttpResponse.json({
|
||||
places: [{ name: 'Eiffel Tower', address: 'Paris', lat: '48.8584', lng: '2.2945' }],
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const searchInput = screen.getByPlaceholderText('Search places...');
|
||||
await user.type(searchInput, 'Eiffel Tower');
|
||||
await user.keyboard('{Enter}');
|
||||
|
||||
await screen.findByText('Eiffel Tower');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-020: clicking a maps result fills the form', async () => {
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.post('/api/maps/search', () =>
|
||||
HttpResponse.json({
|
||||
places: [{ name: 'Eiffel Tower', address: 'Paris', lat: '48.8584', lng: '2.2945' }],
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const searchInput = screen.getByPlaceholderText('Search places...');
|
||||
await user.type(searchInput, 'Eiffel Tower');
|
||||
await user.keyboard('{Enter}');
|
||||
|
||||
const resultBtn = await screen.findByText('Eiffel Tower');
|
||||
await user.click(resultBtn);
|
||||
|
||||
expect(screen.getByDisplayValue('Eiffel Tower')).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue('48.8584')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-021: maps search error shows toast', async () => {
|
||||
const addToast = vi.fn();
|
||||
window.__addToast = addToast;
|
||||
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.post('/api/maps/search', () => HttpResponse.json({ error: 'fail' }, { status: 500 })),
|
||||
);
|
||||
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const searchInput = screen.getByPlaceholderText('Search places...');
|
||||
await user.type(searchInput, 'someplace');
|
||||
await user.keyboard('{Enter}');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(addToast).toHaveBeenCalledWith(
|
||||
expect.stringMatching(/search failed/i),
|
||||
'error',
|
||||
undefined,
|
||||
);
|
||||
});
|
||||
|
||||
delete window.__addToast;
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-022: hasMapsKey=false shows OSM active message', () => {
|
||||
// hasMapsKey is false by default in beforeEach
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
expect(screen.getByText(/OpenStreetMap/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// ── Category ─────────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-023: category selector renders options', () => {
|
||||
// The component conditionally shows CustomSelect (showNewCategory=false) or text input
|
||||
// Default state shows CustomSelect; no visible "+" trigger exists in current code
|
||||
const cats = [buildCategory({ name: 'Beaches' }), buildCategory({ name: 'Museums' })];
|
||||
render(<PlaceFormModal {...defaultProps} categories={cats} />);
|
||||
// The "No category" placeholder text from CustomSelect should be visible
|
||||
expect(screen.getByText(/No category/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-024: onCategoryCreated is called when creating a category', async () => {
|
||||
const onCategoryCreated = vi.fn().mockResolvedValue({ id: 99, name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
|
||||
// Directly invoke handleCreateCategory by setting showNewCategory via the category name input
|
||||
// Since there's no UI trigger for showNewCategory, we test that the prop is accepted
|
||||
// and category creation works by checking the modal renders correctly
|
||||
render(<PlaceFormModal {...defaultProps} onCategoryCreated={onCategoryCreated} />);
|
||||
expect(screen.getByText('Category')).toBeInTheDocument();
|
||||
// onCategoryCreated not called unless the new-category form is shown and submitted
|
||||
expect(onCategoryCreated).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// ── Time section (edit mode only) ────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-025: time section is NOT shown in create mode', () => {
|
||||
render(<PlaceFormModal {...defaultProps} place={null} />);
|
||||
// English labels are 'Start' and 'End' (places.startTime / places.endTime)
|
||||
expect(screen.queryByText(/^Start$/i)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/^End$/i)).not.toBeInTheDocument();
|
||||
// Also verify no time pickers rendered
|
||||
expect(screen.queryByTestId('time-picker')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-026: time section IS shown in edit mode', () => {
|
||||
const place = buildPlace({ name: 'Test' });
|
||||
render(<PlaceFormModal {...defaultProps} place={place} assignmentId={null} />);
|
||||
// Time pickers are rendered when editing
|
||||
expect(screen.getAllByTestId('time-picker').length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-027: end-before-start error disables submit', () => {
|
||||
// Build a place with end_time before place_time
|
||||
const place = buildPlace({ name: 'Test', place_time: '14:00', end_time: '13:00' });
|
||||
render(<PlaceFormModal {...defaultProps} place={place} assignmentId={null} />);
|
||||
|
||||
// hasTimeError = true → submit button disabled
|
||||
const submitBtn = screen.getByRole('button', { name: /^Update$/i });
|
||||
expect(submitBtn).toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-028: time collision warning appears when assignments overlap', () => {
|
||||
// Create an assignment for the "current" place being edited
|
||||
const currentPlace = buildPlace({ name: 'My Event', place_time: '12:30', end_time: '13:30' });
|
||||
const conflictingPlace = buildPlace({ name: 'Other Event', place_time: '13:00', end_time: '14:00' });
|
||||
|
||||
const currentAssignment = buildAssignment({ id: 10, day_id: 5, place: currentPlace });
|
||||
const otherAssignment = buildAssignment({ id: 20, day_id: 5, place: conflictingPlace });
|
||||
|
||||
render(
|
||||
<PlaceFormModal
|
||||
{...defaultProps}
|
||||
place={currentPlace}
|
||||
assignmentId={10}
|
||||
dayAssignments={[currentAssignment, otherAssignment]}
|
||||
/>,
|
||||
);
|
||||
|
||||
// English translation: 'places.timeCollision' = 'Time overlap with:'
|
||||
expect(screen.getByText(/Time overlap with:/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// ── File attachments ──────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-029: file attachment section shown when canUploadFiles=true', () => {
|
||||
// Default: permissions={} → not configured → allow → canUploadFiles=true
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
expect(screen.getByText('Attach')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-030: file attachment section hidden when canUploadFiles=false', () => {
|
||||
// Set file_upload to 'admin' level; non-admin user cannot upload
|
||||
seedStore(usePermissionsStore, { permissions: { file_upload: 'admin' } });
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
expect(screen.queryByText('Attach')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-031: pending files list shows file names after adding', async () => {
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
expect(fileInput).toBeTruthy();
|
||||
|
||||
const file = new File(['x'], 'photo.jpg', { type: 'image/jpeg' });
|
||||
fireEvent.change(fileInput, { target: { files: [file] } });
|
||||
|
||||
await screen.findByText('photo.jpg');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-032: removing a pending file removes it from the list', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
|
||||
const file = new File(['x'], 'remove-me.jpg', { type: 'image/jpeg' });
|
||||
fireEvent.change(fileInput, { target: { files: [file] } });
|
||||
await screen.findByText('remove-me.jpg');
|
||||
|
||||
// The X button is inside the file item's container div
|
||||
const fileItem = screen.getByText('remove-me.jpg').closest('div.flex')!;
|
||||
const removeBtn = within(fileItem).getByRole('button');
|
||||
await user.click(removeBtn);
|
||||
|
||||
expect(screen.queryByText('remove-me.jpg')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// ── Submit ────────────────────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-033: onSave receives parsed lat/lng as numbers', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue(undefined);
|
||||
|
||||
render(<PlaceFormModal {...defaultProps} onSave={onSave} />);
|
||||
await user.type(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), 'Notre Dame');
|
||||
|
||||
const latInput = screen.getByPlaceholderText(/Latitude/i);
|
||||
await user.clear(latInput);
|
||||
await user.type(latInput, '48.853');
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /^Add$/i }));
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalled());
|
||||
expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ lat: 48.853 }));
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-034: onSave error shows toast', async () => {
|
||||
const addToast = vi.fn();
|
||||
window.__addToast = addToast;
|
||||
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockRejectedValue(new Error('Server error'));
|
||||
|
||||
render(<PlaceFormModal {...defaultProps} onSave={onSave} />);
|
||||
await user.type(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), 'Notre Dame');
|
||||
await user.click(screen.getByRole('button', { name: /^Add$/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(addToast).toHaveBeenCalledWith('Server error', 'error', undefined);
|
||||
});
|
||||
|
||||
delete window.__addToast;
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-035: save button shows "Saving..." while saving', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockReturnValue(new Promise(() => {})); // never resolves
|
||||
|
||||
render(<PlaceFormModal {...defaultProps} onSave={onSave} />);
|
||||
await user.type(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), 'Notre Dame');
|
||||
await user.click(screen.getByRole('button', { name: /^Add$/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /saving/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-036: lat/lng paste splits "48.8566, 2.3522" into lat and lng fields', () => {
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const latInput = screen.getByPlaceholderText(/Latitude/i);
|
||||
|
||||
fireEvent.paste(latInput, {
|
||||
clipboardData: {
|
||||
getData: () => '48.8566, 2.3522',
|
||||
},
|
||||
});
|
||||
|
||||
expect(screen.getByDisplayValue('48.8566')).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue('2.3522')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user