mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-20 13:51:45 +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,5 +1,5 @@
|
||||
// FE-COMP-TODO-001 to FE-COMP-TODO-015
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
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';
|
||||
@@ -186,4 +186,238 @@ describe('TodoListPanel', () => {
|
||||
// Task with category 'JobCat' remains visible
|
||||
expect(screen.getByText('JobTask')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-016: Overdue filter shows items with past due_date', async () => {
|
||||
const items = [
|
||||
buildTodoItem({ name: 'Overdue Task', checked: 0, due_date: '2020-01-01' }),
|
||||
buildTodoItem({ name: 'Future Task', checked: 0, due_date: '2099-12-31' }),
|
||||
];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
const overdueBtn = screen.getAllByRole('button').find(
|
||||
b => b.textContent?.includes('Overdue') || b.getAttribute('title') === 'Overdue'
|
||||
);
|
||||
expect(overdueBtn).toBeTruthy();
|
||||
fireEvent.click(overdueBtn!);
|
||||
expect(screen.getByText('Overdue Task')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Future Task')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-017: My Tasks filter shows only items assigned to current user', async () => {
|
||||
// Use default current_user_id: 1 from beforeEach; assign one item to user 1
|
||||
const items = [
|
||||
buildTodoItem({ name: 'Mine', assigned_user_id: 1, checked: 0 }),
|
||||
buildTodoItem({ name: 'Others', assigned_user_id: 9, checked: 0 }),
|
||||
];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
// Wait for members API to resolve and set currentUserId=1 (My Tasks count badge shows 1)
|
||||
await waitFor(() => {
|
||||
const btns = screen.getAllByRole('button');
|
||||
const btn = btns.find(b => b.textContent?.includes('My Tasks'));
|
||||
expect(btn?.textContent).toMatch(/1/);
|
||||
}, { timeout: 3000 });
|
||||
const myBtn = screen.getAllByRole('button').find(
|
||||
b => b.textContent?.includes('My Tasks') || b.getAttribute('title') === 'My Tasks'
|
||||
);
|
||||
expect(myBtn).toBeTruthy();
|
||||
fireEvent.click(myBtn!);
|
||||
expect(screen.getByText('Mine')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Others')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-018: Sort by priority button reorders tasks', async () => {
|
||||
const user = userEvent.setup();
|
||||
const items = [
|
||||
buildTodoItem({ name: 'Low Prio', priority: 3, checked: 0 }),
|
||||
buildTodoItem({ name: 'High Prio', priority: 1, checked: 0 }),
|
||||
];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
const sortBtn = screen.getAllByRole('button').find(
|
||||
b => b.textContent?.includes('Priority') || b.getAttribute('title') === 'Priority'
|
||||
);
|
||||
expect(sortBtn).toBeTruthy();
|
||||
await user.click(sortBtn!);
|
||||
const html = document.body.innerHTML;
|
||||
expect(html.indexOf('High Prio')).toBeLessThan(html.indexOf('Low Prio'));
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-019: Detail pane shows task name and allows editing', async () => {
|
||||
const user = userEvent.setup();
|
||||
const items = [buildTodoItem({ id: 11, name: 'Edit Me', checked: 0 })];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
await user.click(screen.getByText('Edit Me'));
|
||||
// Detail pane opens; the name input should have the task's name
|
||||
await waitFor(() => {
|
||||
const input = screen.getByDisplayValue('Edit Me');
|
||||
expect(input).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-020: Saving task name in detail pane calls PUT API', async () => {
|
||||
const user = userEvent.setup();
|
||||
let putCalled = false;
|
||||
server.use(
|
||||
http.put('/api/trips/1/todo/11', () => {
|
||||
putCalled = true;
|
||||
return HttpResponse.json({ item: buildTodoItem({ id: 11, name: 'Renamed' }) });
|
||||
}),
|
||||
);
|
||||
const items = [buildTodoItem({ id: 11, name: 'Edit Me', checked: 0 })];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
await user.click(screen.getByText('Edit Me'));
|
||||
// Wait for detail pane to open
|
||||
const nameInput = await screen.findByDisplayValue('Edit Me');
|
||||
await user.clear(nameInput);
|
||||
await user.type(nameInput, 'Renamed');
|
||||
// Click Save changes button
|
||||
const saveBtn = screen.getAllByRole('button').find(
|
||||
b => b.textContent?.includes('Save changes') || b.textContent?.includes('Save')
|
||||
);
|
||||
if (saveBtn) {
|
||||
await user.click(saveBtn);
|
||||
await waitFor(() => expect(putCalled).toBe(true));
|
||||
}
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-021: Priority P3 badge is shown for priority=3 items', () => {
|
||||
const items = [buildTodoItem({ name: 'Low Task', priority: 3, checked: 0 })];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
expect(screen.getByText('P3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-022: Deleting a task from the detail pane calls delete API and closes pane', async () => {
|
||||
const user = userEvent.setup();
|
||||
let deleteCalled = false;
|
||||
server.use(
|
||||
http.delete('/api/trips/1/todo/20', () => {
|
||||
deleteCalled = true;
|
||||
return HttpResponse.json({ success: true });
|
||||
}),
|
||||
);
|
||||
const items = [buildTodoItem({ id: 20, name: 'Delete Me', checked: 0 })];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
await user.click(screen.getByText('Delete Me'));
|
||||
// Wait for detail pane to open
|
||||
const deleteBtn = await screen.findByText('Delete');
|
||||
await user.click(deleteBtn);
|
||||
// API was called and detail pane closed (Save changes button disappears)
|
||||
await waitFor(() => {
|
||||
expect(deleteCalled).toBe(true);
|
||||
expect(screen.queryByText('Save changes')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-023: Due date is shown in task list row when set', () => {
|
||||
const items = [buildTodoItem({ name: 'Due Task', due_date: '2030-06-15', checked: 0 })];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
// formatDate returns locale-specific string (e.g., "Sat, Jun 15") — check for month/day
|
||||
const html = document.body.innerHTML;
|
||||
// The date badge should contain Jun 15 or similar representation
|
||||
expect(html).toMatch(/Jun/);
|
||||
expect(html).toMatch(/15/);
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-024: Closing the detail pane via X button hides it', async () => {
|
||||
const user = userEvent.setup();
|
||||
const items = [buildTodoItem({ id: 30, name: 'Close Pane Task', checked: 0 })];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
await user.click(screen.getByText('Close Pane Task'));
|
||||
// Wait for detail pane to appear (shows "Task" header and "Save changes")
|
||||
await screen.findByText('Task');
|
||||
// Find the X close button in the detail pane
|
||||
const allButtons = screen.getAllByRole('button');
|
||||
// The X button in the detail pane header has no text content (just icon)
|
||||
// It appears after the task row, so find buttons near the detail pane header
|
||||
// The detail pane has a header with title "Task" and an X button
|
||||
// We look for a button that closes the pane by finding ones with no text
|
||||
const closeBtn = allButtons.find(b => {
|
||||
const text = b.textContent?.trim();
|
||||
return text === '' && b.closest('[style*="border-left"]');
|
||||
});
|
||||
if (closeBtn) {
|
||||
await user.click(closeBtn);
|
||||
await waitFor(() => expect(screen.queryByText('Save changes')).not.toBeInTheDocument());
|
||||
}
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-025: New category input appears when clicking "Add category" button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<TodoListPanel tripId={1} items={[]} />);
|
||||
// Find and click the "Add category" button
|
||||
const addCatBtn = screen.getAllByRole('button').find(
|
||||
b => b.textContent?.includes('Add category') || b.getAttribute('title') === 'Add category'
|
||||
);
|
||||
expect(addCatBtn).toBeTruthy();
|
||||
await user.click(addCatBtn!);
|
||||
// A text input for category name should appear
|
||||
await waitFor(() => {
|
||||
const input = screen.getByPlaceholderText('Category name');
|
||||
expect(input).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-026: Adding a new category creates a filter button for it', async () => {
|
||||
const user = userEvent.setup();
|
||||
server.use(
|
||||
http.post('/api/trips/1/todo', () =>
|
||||
HttpResponse.json({ item: buildTodoItem({ category: 'Errands', name: 'New Item' }) })
|
||||
),
|
||||
);
|
||||
render(<TodoListPanel tripId={1} items={[]} />);
|
||||
const addCatBtn = screen.getAllByRole('button').find(
|
||||
b => b.textContent?.includes('Add category') || b.getAttribute('title') === 'Add category'
|
||||
);
|
||||
await user.click(addCatBtn!);
|
||||
const categoryInput = await screen.findByPlaceholderText('Category name');
|
||||
await user.type(categoryInput, 'Errands');
|
||||
await user.keyboard('{Enter}');
|
||||
// The Errands filter button should appear after the API call
|
||||
await waitFor(() => {
|
||||
const errands = screen.queryAllByText('Errands');
|
||||
expect(errands.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-027: Overdue count badge appears on Overdue filter for overdue items', () => {
|
||||
const items = [buildTodoItem({ name: 'Old Task', checked: 0, due_date: '2020-01-01' })];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
// The overdue count badge '1' should appear near the Overdue filter button
|
||||
const overdueArea = screen.getAllByRole('button').find(
|
||||
b => b.textContent?.includes('Overdue') || b.getAttribute('title') === 'Overdue'
|
||||
);
|
||||
expect(overdueArea).toBeTruthy();
|
||||
// The count badge with '1' should be in the DOM (rendered inside the sidebar button)
|
||||
expect(overdueArea!.textContent).toMatch(/1/);
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-028: Creating a new task via NewTaskPane calls POST API', async () => {
|
||||
const user = userEvent.setup();
|
||||
let postCalled = false;
|
||||
server.use(
|
||||
http.post('/api/trips/1/todo', () => {
|
||||
postCalled = true;
|
||||
return HttpResponse.json({ item: buildTodoItem({ id: 99, name: 'Brand New Task' }) });
|
||||
}),
|
||||
);
|
||||
render(<TodoListPanel tripId={1} items={[]} />);
|
||||
// Open the new task pane
|
||||
await user.click(screen.getByText('Add new task...'));
|
||||
// Wait for "Create task" button to appear
|
||||
await screen.findByText('Create task');
|
||||
// Type a task name in the autoFocus input (Task name placeholder)
|
||||
const nameInput = screen.getByPlaceholderText('Task name');
|
||||
await user.type(nameInput, 'Brand New Task');
|
||||
// Click the Create task button
|
||||
await user.click(screen.getByText('Create task'));
|
||||
await waitFor(() => expect(postCalled).toBe(true));
|
||||
});
|
||||
|
||||
it('FE-COMP-TODO-029: Task with description shows description preview in list', () => {
|
||||
const items = [buildTodoItem({
|
||||
name: 'Described Task',
|
||||
description: 'This is a task description',
|
||||
checked: 0,
|
||||
})];
|
||||
render(<TodoListPanel tripId={1} items={items} />);
|
||||
expect(screen.getByText('This is a task description')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user