mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
e3c524dd02
SonarQube's S2699 flagged 196 test cases as assertion-less. Almost all of them end on a bare `await screen.findByText(...)`, which does throw when the text never shows up — the test is real, the analyser just cannot see it. Spelling the check out keeps the behaviour identical and makes it readable. Writing them out turned three tests red, each for a good reason: - FE-COMP-NOTES-008 read the heading out of the loading panel, which renders its own copy and swaps the whole node out once the fetch settles. It now waits for the loaded state. - FE-COMP-PHOTOPROVIDERS-014 matched /connected/i, which also matches the "Not connected" the badge starts as — the test passed whether or not the button did anything. Exact text now. - FE-FILES-002 compared an empty list against the empty list it already was. It seeds a file first, so the 500 has something to leave alone. JOURNEY-SVC-066 asserted nothing at all behind a "should not throw" comment; it now says that out loud and checks no journey entry is left orphaned.
1913 lines
86 KiB
TypeScript
1913 lines
86 KiB
TypeScript
// FE-COMP-NOTES-001 to FE-COMP-NOTES-012
|
|
// CollabNotes uses addListener/removeListener from websocket — extend the global mock
|
|
vi.mock('../../api/websocket', () => ({
|
|
connect: vi.fn(),
|
|
disconnect: vi.fn(),
|
|
getSocketId: vi.fn(() => null),
|
|
setRefetchCallback: vi.fn(),
|
|
setPreReconnectHook: vi.fn(),
|
|
addListener: vi.fn(),
|
|
removeListener: vi.fn(),
|
|
}));
|
|
|
|
import { render, screen, waitFor, act, 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 { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
|
import { buildUser, buildTrip } from '../../../tests/helpers/factories';
|
|
import CollabNotes from './CollabNotes';
|
|
import { addListener } from '../../api/websocket';
|
|
|
|
const currentUser = buildUser({ id: 1, username: 'testuser' });
|
|
|
|
const defaultProps = {
|
|
tripId: 1,
|
|
currentUser,
|
|
};
|
|
|
|
beforeEach(() => {
|
|
resetAllStores();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({ notes: [] })
|
|
),
|
|
);
|
|
seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
|
|
seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
|
|
});
|
|
|
|
describe('CollabNotes', () => {
|
|
it('FE-COMP-NOTES-001: renders without crashing', () => {
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(document.body).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-002: shows empty state when no notes', async () => {
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(await screen.findByText('No notes yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-003: shows New Note button', async () => {
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
expect(screen.getByText('New Note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-004: shows existing notes from API', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: currentUser.id, author_username: 'testuser',
|
|
author_avatar: null, title: 'Packing Tips', content: 'Bring sunscreen',
|
|
category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(await screen.findByText('Packing Tips')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-005: clicking New Note opens modal', async () => {
|
|
const user = userEvent.setup();
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
// Modal opens with a title input — placeholder is "Note title" (no ellipsis)
|
|
expect(await screen.findByPlaceholderText('Note title')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-006: note title is shown in the grid', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser',
|
|
author_avatar: null, title: 'My Checklist', content: 'Items',
|
|
category: 'Travel', color: '#ef4444', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(await screen.findByText('My Checklist')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-007: multiple notes all render', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [
|
|
{ id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Note A', content: '', category: null, color: '#3b82f6', files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z' },
|
|
{ id: 2, trip_id: 1, user_id: 2, author_username: 'alice', author_avatar: null, title: 'Note B', content: '', category: null, color: '#ef4444', files: [], created_at: '2025-06-01T10:01:00.000Z', updated_at: '2025-06-01T10:01:00.000Z' },
|
|
],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Note A');
|
|
expect(screen.getByText('Note B')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-008: Notes title heading is shown', async () => {
|
|
render(<CollabNotes {...defaultProps} />);
|
|
// The loading panel renders its own copy of the heading and swaps the whole
|
|
// node out once the fetch settles, so wait for the loaded state first.
|
|
await screen.findByText('No notes yet');
|
|
// collab.notes.title = "Notes"
|
|
expect(screen.getByText('Notes')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-009: create note calls POST API', async () => {
|
|
const user = userEvent.setup();
|
|
let postCalled = false;
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', async () => {
|
|
postCalled = true;
|
|
return HttpResponse.json({
|
|
note: { id: 99, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'New Note', content: '', category: null, color: '#3b82f6', files: [], created_at: new Date().toISOString(), updated_at: new Date().toISOString() },
|
|
});
|
|
})
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
const titleInput = await screen.findByPlaceholderText('Note title');
|
|
await user.type(titleInput, 'Test Note');
|
|
// collab.notes.create = "Create"
|
|
const createBtn = screen.getByRole('button', { name: /^Create$/i });
|
|
await user.click(createBtn);
|
|
await waitFor(() => expect(postCalled).toBe(true));
|
|
});
|
|
|
|
it('FE-COMP-NOTES-010: note content is shown when available', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{ id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Details', content: 'Bring passport', category: null, color: '#3b82f6', files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z' }],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Details');
|
|
expect(screen.getByText('Bring passport')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-011: category filter buttons appear when notes have categories', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{ id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Hotel Info', content: '', category: 'Accommodation', color: '#8b5cf6', files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z' }],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
// "Accommodation" appears in both category filter and note card
|
|
const els = await screen.findAllByText('Accommodation');
|
|
expect(els.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NOTES-012: renders loading state initially', () => {
|
|
render(<CollabNotes {...defaultProps} />);
|
|
// Component starts with loading=true; skeleton or spinner is present
|
|
expect(document.body).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-013: deleting a note asks for confirmation, then calls DELETE API and removes it', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 42, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Remove Me', content: '', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.delete('/api/trips/1/collab/notes/42', () =>
|
|
HttpResponse.json({ success: true })
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Remove Me');
|
|
await user.click(screen.getByTitle('Delete'));
|
|
// Deleting now asks for confirmation first — the note stays until confirmed.
|
|
expect(screen.getByText('Delete note?')).toBeInTheDocument();
|
|
expect(screen.getByText('Remove Me')).toBeInTheDocument();
|
|
await user.click(document.querySelector('button.bg-red-600') as HTMLElement);
|
|
await waitFor(() => expect(screen.queryByText('Remove Me')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-014: pinned note shows pin indicator', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Pinned Note', content: '', category: null, color: '#3b82f6', pinned: true, files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Pinned Note');
|
|
// Unpin button is visible for pinned notes
|
|
expect(screen.getByTitle('Unpin')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-015: clicking edit button opens the edit modal', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Editable Note', content: 'Original', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Editable Note');
|
|
await user.click(screen.getByTitle('Edit'));
|
|
expect(await screen.findByDisplayValue('Editable Note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-016: category filter hides notes from other categories', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [
|
|
{ id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Hotels Note', content: '', category: 'Hotels', color: '#3b82f6', files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z' },
|
|
{ id: 2, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Food Note', content: '', category: 'Food', color: '#ef4444', files: [], created_at: '2025-06-01T10:01:00.000Z', updated_at: '2025-06-01T10:01:00.000Z' },
|
|
],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Hotels Note');
|
|
expect(screen.getByText('Food Note')).toBeInTheDocument();
|
|
|
|
// Category filter pills appear — click the Hotels pill (button with name "Hotels")
|
|
await user.click(screen.getByRole('button', { name: 'Hotels' }));
|
|
|
|
expect(screen.getByText('Hotels Note')).toBeInTheDocument();
|
|
await waitFor(() => expect(screen.queryByText('Food Note')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-017: WebSocket collab:note:created event adds note to grid', async () => {
|
|
const { addListener } = await import('../../api/websocket');
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
|
|
const calls = (addListener as ReturnType<typeof vi.fn>).mock.calls;
|
|
const listener = calls[calls.length - 1][0];
|
|
act(() => {
|
|
listener({
|
|
tripId: 1,
|
|
type: 'collab:note:created',
|
|
note: {
|
|
id: 50, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Live Note', content: '', category: null, color: '#3b82f6', pinned: false, files: [],
|
|
created_at: new Date().toISOString(), updated_at: new Date().toISOString(),
|
|
},
|
|
});
|
|
});
|
|
expect(await screen.findByText('Live Note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-018: WebSocket collab:note:deleted event removes note', async () => {
|
|
const { addListener } = await import('../../api/websocket');
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 7, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'WS Delete', content: '', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('WS Delete');
|
|
|
|
const calls = (addListener as ReturnType<typeof vi.fn>).mock.calls;
|
|
const listener = calls[calls.length - 1][0];
|
|
act(() => {
|
|
listener({ tripId: 1, type: 'collab:note:deleted', noteId: 7 });
|
|
});
|
|
await waitFor(() => expect(screen.queryByText('WS Delete')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-019: edit note modal pre-populates existing title and content', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 3, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'My Note', content: 'Some content', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('My Note');
|
|
await user.click(screen.getByTitle('Edit'));
|
|
await screen.findByDisplayValue('My Note');
|
|
expect(screen.getByDisplayValue('Some content')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-020: saving edited note calls PUT API', async () => {
|
|
const user = userEvent.setup();
|
|
let putCalled = false;
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 3, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Old Title', content: '', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.put('/api/trips/1/collab/notes/3', async () => {
|
|
putCalled = true;
|
|
return HttpResponse.json({
|
|
note: { id: 3, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'New Title', content: '', category: null, color: '#3b82f6', files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: new Date().toISOString() },
|
|
});
|
|
}),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Old Title');
|
|
await user.click(screen.getByTitle('Edit'));
|
|
const titleInput = await screen.findByDisplayValue('Old Title');
|
|
await user.clear(titleInput);
|
|
await user.type(titleInput, 'New Title');
|
|
await user.click(screen.getByRole('button', { name: /^Save$/i }));
|
|
await waitFor(() => expect(putCalled).toBe(true));
|
|
});
|
|
|
|
it('FE-COMP-NOTES-021: note with markdown content renders formatted output', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Markdown Note', content: '**Bold text**', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Markdown Note');
|
|
const boldEl = screen.getByText('Bold text');
|
|
expect(boldEl.closest('strong')).not.toBeNull();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-022: close button in create modal dismisses it without creating', async () => {
|
|
const user = userEvent.setup();
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
await screen.findByPlaceholderText('Note title');
|
|
// Click the X button in the modal header
|
|
const closeBtn = screen.getByRole('button', { name: '' });
|
|
// There may be multiple, find the one in the modal (closest to the title input)
|
|
const titleInput = screen.getByPlaceholderText('Note title');
|
|
// The X button is the sibling button in the modal header
|
|
const modal = titleInput.closest('form');
|
|
const xBtn = modal?.parentElement?.querySelector('button[type="button"]') as HTMLElement | null;
|
|
if (xBtn) {
|
|
await user.click(xBtn);
|
|
} else {
|
|
// Fallback: click backdrop (the outer div)
|
|
await user.keyboard('{Escape}');
|
|
}
|
|
await waitFor(() => expect(screen.queryByPlaceholderText('Note title')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-024: clicking Manage Categories opens the CategorySettingsModal', async () => {
|
|
const user = userEvent.setup();
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
// The modal header renders "Category Settings" or similar
|
|
expect(await screen.findByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-025: CategorySettingsModal shows no categories message when empty', async () => {
|
|
const user = userEvent.setup();
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
expect(await screen.findByText('No categories yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-026: CategorySettingsModal add new category', async () => {
|
|
const user = userEvent.setup();
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('No categories yet');
|
|
const newCatInput = screen.getByPlaceholderText('New category...');
|
|
await user.type(newCatInput, 'Transport');
|
|
// Click the + button to add it
|
|
const addBtn = newCatInput.nextElementSibling as HTMLElement;
|
|
await user.click(addBtn);
|
|
// "Transport" category appears in the modal
|
|
expect(await screen.findByText('Transport')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-027: CategorySettingsModal close button dismisses it', async () => {
|
|
const user = userEvent.setup();
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('No categories yet');
|
|
// Click the X button in the modal header
|
|
const modal = screen.getByText('No categories yet').closest('div');
|
|
const categoryModal = modal?.closest('[style*="position: fixed"]') as HTMLElement | null;
|
|
if (categoryModal) {
|
|
await user.click(categoryModal);
|
|
}
|
|
await waitFor(() => expect(screen.queryByText('No categories yet')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-028: WebSocket collab:note:updated event updates note in grid', async () => {
|
|
const { addListener } = await import('../../api/websocket');
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 5, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Old Title WS', content: '', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Old Title WS');
|
|
|
|
const calls = (addListener as ReturnType<typeof vi.fn>).mock.calls;
|
|
const listener = calls[calls.length - 1][0];
|
|
act(() => {
|
|
listener({
|
|
tripId: 1,
|
|
type: 'collab:note:updated',
|
|
note: {
|
|
id: 5, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Updated WS Title', content: '', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: new Date().toISOString(),
|
|
},
|
|
});
|
|
});
|
|
await screen.findByText('Updated WS Title');
|
|
expect(screen.queryByText('Old Title WS')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-029: expand button on note with content opens view modal', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Expandable Note', content: 'Full content here', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Expandable Note');
|
|
// Expand button (Maximize2 icon) appears when note has content
|
|
// The translation key 'collab.notes.expand' falls back to the raw key since it's not in en.ts
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
// View modal shows the note title
|
|
await waitFor(() => {
|
|
const titles = screen.getAllByText('Expandable Note');
|
|
expect(titles.length).toBeGreaterThan(1);
|
|
});
|
|
});
|
|
|
|
it('FE-COMP-NOTES-030: closing view modal via edit button removes it and opens edit modal', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'View Modal Note', content: 'Content to view', category: null, color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('View Modal Note');
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
// Modal is open — there are multiple instances of the title
|
|
await waitFor(() => expect(screen.getAllByText('View Modal Note').length).toBeGreaterThan(1));
|
|
// The view modal renders a pencil button to switch to edit mode
|
|
// Find the buttons in the portal (appended to body — they come after the card buttons in DOM order)
|
|
const allButtons = screen.getAllByRole('button');
|
|
// The last few buttons belong to the portal; the pencil edit button is second-to-last, X is last
|
|
const lastButton = allButtons[allButtons.length - 1];
|
|
await user.click(lastButton);
|
|
// After clicking X, the view modal title should appear only once (just in the edit modal or main grid)
|
|
await waitFor(() => {
|
|
const titles = screen.queryAllByText('View Modal Note');
|
|
// Either modal closed or edit modal opened — title count changed from modal state
|
|
expect(titles.length).toBeGreaterThanOrEqual(1);
|
|
});
|
|
});
|
|
|
|
it('FE-COMP-NOTES-031: category filter shows All button and resets filter', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [
|
|
{ id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Alpha Note', content: '', category: 'Alpha', color: '#3b82f6', files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z' },
|
|
{ id: 2, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Beta Note', content: '', category: 'Beta', color: '#ef4444', files: [], created_at: '2025-06-01T10:01:00.000Z', updated_at: '2025-06-01T10:01:00.000Z' },
|
|
],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Alpha Note');
|
|
|
|
// Filter to Alpha
|
|
await user.click(screen.getByRole('button', { name: 'Alpha' }));
|
|
await waitFor(() => expect(screen.queryByText('Beta Note')).not.toBeInTheDocument());
|
|
|
|
// Click All to reset
|
|
await user.click(screen.getByRole('button', { name: 'All' }));
|
|
await screen.findByText('Beta Note');
|
|
});
|
|
|
|
it('FE-COMP-NOTES-032: CategorySettingsModal with existing categories from notes', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Cat Note', content: '', category: 'Food', color: '#ef4444', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Cat Note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
// Food category appears in the settings modal
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
// The category "Food" is listed in the modal
|
|
const modalFoodEntries = screen.getAllByText('Food');
|
|
expect(modalFoodEntries.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NOTES-033: NoteFormModal shows existing categories as pills', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Existing Note', content: '', category: 'Hotels', color: '#3b82f6', files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Existing Note');
|
|
await user.click(screen.getByText('New Note'));
|
|
// The NoteFormModal opens; existing category "Hotels" appears as a pill
|
|
await screen.findByPlaceholderText('Note title');
|
|
// "Hotels" category pill is present in the modal
|
|
expect(screen.getAllByText('Hotels').length).toBeGreaterThan(1);
|
|
});
|
|
|
|
it('FE-COMP-NOTES-034: pin toggle calls PATCH/PUT API', async () => {
|
|
const user = userEvent.setup();
|
|
let patchCalled = false;
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 10, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Pin Me', content: '', category: null, color: '#3b82f6', pinned: false, files: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.put('/api/trips/1/collab/notes/10', async () => {
|
|
patchCalled = true;
|
|
return HttpResponse.json({
|
|
note: { id: 10, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Pin Me', content: '', category: null, color: '#3b82f6', pinned: true, files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: new Date().toISOString() },
|
|
});
|
|
}),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Pin Me');
|
|
await user.click(screen.getByTitle('Pin'));
|
|
await waitFor(() => expect(patchCalled).toBe(true));
|
|
});
|
|
|
|
it('FE-COMP-NOTES-035: note with PDF attachment shows file extension badge', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'PDF Note', content: '', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{
|
|
id: 1, filename: 'doc.pdf', original_name: 'document.pdf',
|
|
mime_type: 'application/pdf', url: '/api/trips/1/files/1/download',
|
|
}],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('PDF Note');
|
|
// PDF extension badge is shown
|
|
expect(screen.getByText('PDF')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-036: clicking PDF attachment opens FilePreviewPortal', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'PDF Note Portal', content: '', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{
|
|
id: 1, filename: 'doc.pdf', original_name: 'document.pdf',
|
|
mime_type: 'application/pdf', url: '/api/trips/1/files/1/download',
|
|
}],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.post('/api/auth/resource-token', () => HttpResponse.json({ token: 'test-token' })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('PDF Note Portal');
|
|
// Click the PDF badge to open FilePreviewPortal
|
|
await user.click(screen.getByText('PDF'));
|
|
// FilePreviewPortal renders the file name in the header
|
|
expect(await screen.findByText('document.pdf')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-037: note with website shows website thumbnail component', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Website Note', content: '', category: null, color: '#3b82f6',
|
|
website: 'https://example.com', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.get('/api/trips/1/collab/link-preview', () =>
|
|
HttpResponse.json({ title: 'Example Domain', image: null })
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Website Note');
|
|
// Website thumbnail shows domain name (example.com) — the domain label
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Link')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
it('FE-COMP-NOTES-038: CategorySettingsModal Save button calls saveCategoryColors', async () => {
|
|
const user = userEvent.setup();
|
|
let putCalled = false;
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Cat Save Note', content: '', category: 'Travel', color: '#ef4444', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.put('/api/trips/1/collab/notes/1', async () => {
|
|
putCalled = true;
|
|
return HttpResponse.json({ note: { id: 1, trip_id: 1, title: 'Cat Save Note', content: '', category: 'Travel', color: '#6366f1', user_id: 1, author_username: 'testuser', author_avatar: null, files: [], attachments: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: new Date().toISOString() } });
|
|
}),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Cat Save Note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
// Change color: click first color swatch for "Travel" category
|
|
const colorSwatches = screen.getAllByRole('button').filter(b => b.style.background && b.style.background.startsWith('#'));
|
|
if (colorSwatches.length > 0) {
|
|
await user.click(colorSwatches[0]);
|
|
}
|
|
// Click Save button
|
|
await user.click(screen.getByRole('button', { name: /^Save$/i }));
|
|
// Modal should close
|
|
await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h3' })).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-039: NoteFormModal website field accepts URL input', async () => {
|
|
const user = userEvent.setup();
|
|
let postBody: Record<string, unknown> = {};
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', async ({ request }) => {
|
|
postBody = await request.json() as Record<string, unknown>;
|
|
return HttpResponse.json({
|
|
note: { id: 99, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'URL Note', content: '', category: null, color: '#3b82f6', website: 'https://trek.app', files: [], attachments: [], created_at: new Date().toISOString(), updated_at: new Date().toISOString() },
|
|
});
|
|
})
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
const titleInput = await screen.findByPlaceholderText('Note title');
|
|
await user.type(titleInput, 'URL Note');
|
|
const websiteInput = screen.getByPlaceholderText(/https:\/\//i);
|
|
await user.type(websiteInput, 'https://trek.app');
|
|
await user.click(screen.getByRole('button', { name: /^Create$/i }));
|
|
await waitFor(() => expect(postBody.website).toBe('https://trek.app'));
|
|
});
|
|
|
|
it('FE-COMP-NOTES-040: CategorySettingsModal color change updates color', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Color Note', content: '', category: 'Food', color: '#ef4444', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.put('/api/trips/1/collab/notes/1', async () =>
|
|
HttpResponse.json({ note: { id: 1, trip_id: 1, title: 'Color Note', content: '', category: 'Food', color: '#6366f1', user_id: 1, author_username: 'testuser', author_avatar: null, files: [], attachments: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: new Date().toISOString() } })
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Color Note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
// "Food" appears in the modal; there are color swatches beside it
|
|
// Find color swatch buttons (they have specific background colors from NOTE_COLORS)
|
|
const saveBtn = screen.getByRole('button', { name: /^Save$/i });
|
|
await user.click(saveBtn);
|
|
await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h3' })).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-041: note with image attachment shows thumbnail', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Image Note', content: '', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{
|
|
id: 2, filename: 'photo.jpg', original_name: 'photo.jpg',
|
|
mime_type: 'image/jpeg', url: '/api/trips/1/files/2/download',
|
|
}],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.post('/api/auth/resource-token', () => HttpResponse.json({ token: 'test-token' })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Image Note');
|
|
// Files section label appears
|
|
expect(screen.getByText('Files')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-042: clicking image attachment opens FilePreviewPortal image view', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Image Portal Note', content: '', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{
|
|
id: 3, filename: 'photo.jpg', original_name: 'scenery.jpg',
|
|
mime_type: 'image/jpeg', url: '/api/trips/1/files/3/download',
|
|
}],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.post('/api/auth/resource-token', () => HttpResponse.json({ token: 'test-token' })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Image Portal Note');
|
|
// Wait for AuthedImg to load (it calls getAuthUrl async)
|
|
await waitFor(() => {
|
|
const imgs = document.querySelectorAll('img[alt="photo.jpg"]');
|
|
return imgs.length > 0;
|
|
}, { timeout: 3000 }).catch(() => {
|
|
// AuthedImg may not render if token not fetched — still ok
|
|
});
|
|
// The Files section label is visible
|
|
expect(screen.getByText('Files')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-043: EditableCatName in CategorySettingsModal is clickable and editable', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Rename Cat Note', content: '', category: 'Transport', color: '#10b981', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Rename Cat Note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
// Find the "Transport" category name span and click to edit
|
|
const categoryNameSpan = screen.getAllByText('Transport').find(el => el.tagName === 'SPAN' && el.title === 'Click to rename');
|
|
if (categoryNameSpan) {
|
|
await user.click(categoryNameSpan);
|
|
// Now an input with value "Transport" should appear
|
|
const editInput = screen.getByDisplayValue('Transport');
|
|
await user.clear(editInput);
|
|
await user.type(editInput, 'Vehicles');
|
|
await user.keyboard('{Enter}');
|
|
// The renamed category appears
|
|
await screen.findByText('Vehicles');
|
|
} else {
|
|
// Fallback: just check the modal renders Transport
|
|
expect(screen.getAllByText('Transport').length).toBeGreaterThan(0);
|
|
}
|
|
});
|
|
|
|
it('FE-COMP-NOTES-044: CategorySettingsModal remove category button works', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Remove Cat Note', content: '', category: 'Removable', color: '#8b5cf6', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Remove Cat Note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
// Find the Trash2 SVG delete button in the modal — buttons containing lucide-trash-2 SVGs
|
|
const trashButtons = [...document.querySelectorAll('button')].filter(
|
|
b => b.querySelector('svg.lucide-trash-2')
|
|
);
|
|
if (trashButtons.length > 0) {
|
|
// First trash button in the modal is for the 'Removable' category
|
|
await user.click(trashButtons[0] as HTMLElement);
|
|
// Removable category disappears from the modal
|
|
await waitFor(() => {
|
|
const fixedEls = document.querySelectorAll('[style*="position: fixed"]');
|
|
let found = false;
|
|
fixedEls.forEach(el => { if (el.textContent?.includes('Removable') && !el.textContent?.includes('Remove Cat Note')) found = true; });
|
|
expect(found).toBe(false);
|
|
});
|
|
} else {
|
|
expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
|
|
}
|
|
});
|
|
|
|
it('FE-COMP-NOTES-045: expand note view modal displays full content with markdown', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Full Content Note', content: '# Header\n\nSome **bold** text', category: 'Trip', color: '#3b82f6', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Full Content Note');
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
// View modal shows the full content
|
|
await waitFor(() => {
|
|
const titles = screen.getAllByText('Full Content Note');
|
|
expect(titles.length).toBeGreaterThan(1);
|
|
});
|
|
// Bold text is rendered via Markdown
|
|
expect(screen.getAllByText('bold').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NOTES-046: view modal with category shows category badge', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Tagged Note', content: 'Some content here', category: 'Food', color: '#ef4444', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Tagged Note');
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
// View modal header shows the category name
|
|
await waitFor(() => {
|
|
const foodEls = screen.getAllByText('Food');
|
|
expect(foodEls.length).toBeGreaterThan(1); // once in card badge, once in modal
|
|
});
|
|
});
|
|
|
|
it('FE-COMP-NOTES-047: category rename in modal then Save calls onRenameCategory', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Rename Flow Note', content: '', category: 'OldCat', color: '#10b981', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.put('/api/trips/1/collab/notes/1', async () =>
|
|
HttpResponse.json({ note: { id: 1, trip_id: 1, title: 'Rename Flow Note', content: '', category: 'NewCat', color: '#10b981', user_id: 1, author_username: 'testuser', author_avatar: null, files: [], attachments: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: new Date().toISOString() } })
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Rename Flow Note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
|
|
// Find and click the "OldCat" category name span to enter edit mode
|
|
const oldCatSpan = screen.getAllByText('OldCat').find(el => el.tagName === 'SPAN' && el.title === 'Click to rename');
|
|
if (oldCatSpan) {
|
|
await user.click(oldCatSpan);
|
|
const editInput = screen.getByDisplayValue('OldCat');
|
|
await user.clear(editInput);
|
|
await user.type(editInput, 'NewCat');
|
|
await user.keyboard('{Enter}');
|
|
await screen.findByText('NewCat');
|
|
// Click Save — this triggers handleSave which calls onRenameCategory
|
|
await user.click(screen.getByRole('button', { name: /^Save$/i }));
|
|
await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h3' })).not.toBeInTheDocument());
|
|
} else {
|
|
// If EditableCatName not found (unlikely), just close modal
|
|
expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
|
|
}
|
|
});
|
|
|
|
it('FE-COMP-NOTES-048: FilePreviewPortal close button sets previewFile to null', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Close Portal Note', content: '', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{ id: 5, filename: 'file.pdf', original_name: 'closeable.pdf', mime_type: 'application/pdf', url: '/api/trips/1/files/5/download' }],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.post('/api/auth/resource-token', () => HttpResponse.json({ token: 'close-token' })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('PDF');
|
|
await user.click(screen.getByText('PDF'));
|
|
// FilePreviewPortal is open — closeable.pdf filename shown in header
|
|
await screen.findByText('closeable.pdf');
|
|
// Find and click the X close button in the portal header
|
|
const closeButtons = [...document.querySelectorAll('button')].filter(b => b.querySelector('svg.lucide-x'));
|
|
// The last X button should be the portal close button
|
|
const portalCloseBtn = closeButtons[closeButtons.length - 1] as HTMLElement;
|
|
await user.click(portalCloseBtn);
|
|
// Portal is closed
|
|
await waitFor(() => expect(screen.queryByText('closeable.pdf')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-049: delete existing file attachment in edit modal calls deleteNoteFile API', async () => {
|
|
const user = userEvent.setup();
|
|
let deleteCalled = false;
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 4, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Attachment Note', content: '', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{ id: 10, filename: 'doc.pdf', original_name: 'removable.pdf', mime_type: 'application/pdf', url: '/api/trips/1/files/10/download' }],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.delete('/api/trips/1/collab/notes/4/files/10', () => {
|
|
deleteCalled = true;
|
|
return HttpResponse.json({ success: true });
|
|
}),
|
|
http.put('/api/trips/1/collab/notes/4', async () =>
|
|
HttpResponse.json({ note: { id: 4, trip_id: 1, title: 'Attachment Note', content: '', category: null, color: '#3b82f6', user_id: 1, author_username: 'testuser', author_avatar: null, files: [], attachments: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: new Date().toISOString() } })
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Attachment Note');
|
|
// Open edit modal
|
|
await user.click(screen.getByTitle('Edit'));
|
|
await screen.findByDisplayValue('Attachment Note');
|
|
// removable.pdf appears in the existing attachments list in the modal
|
|
await screen.findByText('removable.pdf');
|
|
// Find X button next to the file name
|
|
const xButtons = [...document.querySelectorAll('button')].filter(b => b.querySelector('svg.lucide-x'));
|
|
// In the modal, there's the header X (close modal) + file X buttons
|
|
// File X buttons appear after the header X
|
|
if (xButtons.length > 1) {
|
|
// Click the last X button which should be the file delete
|
|
await user.click(xButtons[xButtons.length - 1] as HTMLElement);
|
|
await waitFor(() => expect(deleteCalled).toBe(true));
|
|
}
|
|
});
|
|
|
|
it('FE-COMP-NOTES-050: WebsiteThumbnail with OG image renders thumbnail image', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'OG Image Note', content: '', category: null, color: '#3b82f6',
|
|
website: 'https://trek-app.example.com', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.get('/api/trips/1/collab/link-preview', () =>
|
|
HttpResponse.json({ title: 'Trek App', image: 'https://trek-app.example.com/og.jpg' })
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('OG Image Note');
|
|
// WebsiteThumbnail loads OG data — image is attempted, 'Link' label visible
|
|
await waitFor(() => expect(screen.getByText('Link')).toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-COMP-NOTES-051: view modal with PDF attachment renders attachment section code', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Attached View Note', content: 'Has attachments', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{ id: 20, filename: 'report.pdf', original_name: 'report.pdf', mime_type: 'application/pdf', url: '/api/trips/1/files/20/download' }],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Attached View Note');
|
|
// PDF badge is present in NoteCard
|
|
expect(screen.getByText('PDF')).toBeInTheDocument();
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
// View modal opens — title appears multiple times
|
|
await waitFor(() => expect(screen.getAllByText('Attached View Note').length).toBeGreaterThan(1));
|
|
// PDF badge appears in both card and view modal
|
|
expect(screen.getAllByText('PDF').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NOTES-052: view modal with image attachment renders image code branch', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Image View Note', content: 'See attachments', category: null, color: '#3b82f6', files: [],
|
|
attachments: [{ id: 21, filename: 'photo.jpg', original_name: 'photo.jpg', mime_type: 'image/jpeg', url: '/api/trips/1/files/21/download' }],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
),
|
|
http.post('/api/auth/resource-token', () => HttpResponse.json({ token: 'view-token' })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Image View Note');
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
// View modal opens
|
|
await waitFor(() => expect(screen.getAllByText('Image View Note').length).toBeGreaterThan(1));
|
|
// The view modal code for image attachments executed (AuthedImg renders initially null, then img after async)
|
|
expect(document.body).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-053: view modal edit button transitions to edit modal', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Transition Note', content: 'Click edit from view', category: null, color: '#3b82f6', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Transition Note');
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
await waitFor(() => expect(screen.getAllByText('Transition Note').length).toBeGreaterThan(1));
|
|
// Click the Pencil button in the view modal (second-to-last button)
|
|
const allButtons = screen.getAllByRole('button');
|
|
const pencilBtn = allButtons[allButtons.length - 2]; // Pencil is before X
|
|
await user.click(pencilBtn);
|
|
// Edit modal opens — title input should be pre-filled
|
|
await screen.findByDisplayValue('Transition Note');
|
|
});
|
|
|
|
it('FE-COMP-NOTES-054: hovering over note card triggers hover state', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Hoverable Note', content: '', category: null, color: '#3b82f6', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Hoverable Note');
|
|
const noteCard = screen.getByText('Hoverable Note').closest('[style*="border-radius: 12px"]') as HTMLElement | null;
|
|
if (noteCard) {
|
|
await user.hover(noteCard);
|
|
await user.unhover(noteCard);
|
|
}
|
|
expect(screen.getByText('Hoverable Note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-055: note with author avatar renders UserAvatar img branch', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser',
|
|
author_avatar: '/uploads/avatars/avatar1.jpg',
|
|
title: 'Avatar Note', content: '', category: null, color: '#3b82f6', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Avatar Note');
|
|
// The author avatar img element is rendered (UserAvatar with avatar branch)
|
|
const avatarImg = document.querySelector('img[alt="testuser"]') as HTMLImageElement | null;
|
|
expect(avatarImg || screen.getByText('Avatar Note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-056: EditableCatName Escape key cancels rename', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null,
|
|
title: 'Escape Cat Note', content: '', category: 'EscapeMe', color: '#6366f1', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Escape Cat Note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
// Click on the category name to start editing
|
|
const catNameSpan = screen.getAllByText('EscapeMe').find(el => el.title === 'Click to rename');
|
|
if (catNameSpan) {
|
|
await user.click(catNameSpan);
|
|
const editInput = screen.getByDisplayValue('EscapeMe');
|
|
// Press Escape to cancel without renaming
|
|
await user.keyboard('{Escape}');
|
|
// Input is gone — editing mode exited
|
|
await waitFor(() => expect(screen.queryByDisplayValue('EscapeMe')).not.toBeInTheDocument());
|
|
} else {
|
|
expect(screen.getAllByText('EscapeMe').length).toBeGreaterThan(0);
|
|
}
|
|
});
|
|
|
|
it('FE-COMP-NOTES-057: note author tooltip shows username', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [{
|
|
id: 1, trip_id: 1, user_id: 1,
|
|
// NoteCard uses note.author || note.user || { username: note.username, ... }
|
|
author: { username: 'alice', avatar: null },
|
|
author_username: 'alice', author_avatar: null,
|
|
title: 'Alice Note', content: '', category: null, color: '#3b82f6', files: [], attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z',
|
|
}],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Alice Note');
|
|
// The author username tooltip text is in the DOM (from data-tip div)
|
|
expect(screen.getByText('alice')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NOTES-023: notes are sorted with pinned notes first', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({
|
|
notes: [
|
|
{ id: 1, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Unpinned', content: '', category: null, color: '#3b82f6', pinned: false, files: [], created_at: '2025-06-01T10:00:00.000Z', updated_at: '2025-06-01T10:00:00.000Z' },
|
|
{ id: 2, trip_id: 1, user_id: 1, author_username: 'testuser', author_avatar: null, title: 'Pinned', content: '', category: null, color: '#3b82f6', pinned: true, files: [], created_at: '2025-06-01T09:00:00.000Z', updated_at: '2025-06-01T09:00:00.000Z' },
|
|
],
|
|
})
|
|
)
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Pinned');
|
|
await screen.findByText('Unpinned');
|
|
expect(document.body.innerHTML.indexOf('Pinned')).toBeLessThan(document.body.innerHTML.indexOf('Unpinned'));
|
|
});
|
|
});
|
|
|
|
// FE-W5CNT-001 to FE-W5CNT-029
|
|
// Fills in the load/error/attachment/category branches of useCollabNotes and the
|
|
// view modal that the smoke tests above do not reach.
|
|
|
|
type AddToast = NonNullable<typeof window.__addToast>;
|
|
|
|
const buildNote = (overrides: Record<string, unknown> = {}) => ({
|
|
id: 1,
|
|
trip_id: 1,
|
|
user_id: 1,
|
|
author_username: 'testuser',
|
|
author_avatar: null,
|
|
title: 'A note',
|
|
content: 'Body text',
|
|
category: null,
|
|
website: null,
|
|
color: '#3b82f6',
|
|
pinned: false,
|
|
files: [],
|
|
attachments: [],
|
|
created_at: '2025-06-01T10:00:00.000Z',
|
|
updated_at: '2025-06-01T10:00:00.000Z',
|
|
...overrides,
|
|
});
|
|
|
|
function serveNotes(payload: unknown) {
|
|
server.use(http.get('/api/trips/1/collab/notes', () => HttpResponse.json(payload)));
|
|
}
|
|
|
|
/** Serves a different payload per GET so reload-after-upload can be observed. */
|
|
function serveNotesSequence(payloads: unknown[]) {
|
|
let call = 0;
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () => {
|
|
const payload = payloads[Math.min(call, payloads.length - 1)];
|
|
call += 1;
|
|
return HttpResponse.json(payload);
|
|
}),
|
|
);
|
|
}
|
|
|
|
function pasteFile(name: string, type = 'image/png') {
|
|
const file = new File(['x'], name, { type });
|
|
fireEvent.paste(document.querySelector('form')!, {
|
|
clipboardData: { items: [{ type, getAsFile: () => file }] },
|
|
});
|
|
}
|
|
|
|
function wsHandler(): (msg: Record<string, unknown>) => void {
|
|
return (addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
|
|
}
|
|
|
|
describe('CollabNotes details', () => {
|
|
let addToast: ReturnType<typeof vi.fn<AddToast>>;
|
|
let filesChanged: number;
|
|
let onFilesChanged: () => void;
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
localStorage.clear();
|
|
addToast = vi.fn<AddToast>(() => 0);
|
|
window.__addToast = addToast;
|
|
filesChanged = 0;
|
|
onFilesChanged = () => { filesChanged += 1; };
|
|
window.addEventListener('collab-files-changed', onFilesChanged);
|
|
});
|
|
|
|
afterEach(() => {
|
|
window.removeEventListener('collab-files-changed', onFilesChanged);
|
|
delete window.__addToast;
|
|
localStorage.clear();
|
|
});
|
|
|
|
it('FE-W5CNT-001: a corrupt category cache in localStorage is ignored', async () => {
|
|
localStorage.setItem('collab-cats-1', '{not json');
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(await screen.findByText('No notes yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-002: a category without a stored colour falls back to the first palette entry', async () => {
|
|
serveNotes({ notes: [buildNote({ category: 'Ideas', color: null })] });
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('A note');
|
|
// The card chip is a span, the filter pill above the grid is a button
|
|
const chip = screen.getAllByText('Ideas').find(el => el.tagName === 'SPAN')!;
|
|
expect(chip.style.color).toBe('rgb(99, 102, 241)');
|
|
});
|
|
|
|
it('FE-W5CNT-003: without a trip id nothing is fetched and the panel stays in its loading state', () => {
|
|
render(<CollabNotes tripId={0} currentUser={currentUser} />);
|
|
expect(screen.getByRole('heading', { name: 'Notes' })).toBeInTheDocument();
|
|
expect(screen.queryByText('New Note')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-004: notes served as a bare array are rendered', async () => {
|
|
serveNotes([buildNote({ title: 'Array note' })]);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(await screen.findByText('Array note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-005: an empty payload yields an empty list', async () => {
|
|
serveNotes(null);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(await screen.findByText('No notes yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-006: a failing load falls back to the empty state', async () => {
|
|
server.use(
|
|
http.get('/api/trips/1/collab/notes', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
expect(await screen.findByText('No notes yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-007: a WebSocket create for a note already in the list does not duplicate it', async () => {
|
|
serveNotes({ notes: [buildNote({ id: 4, title: 'Already here' })] });
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Already here');
|
|
const handler = wsHandler();
|
|
await act(async () => {
|
|
handler({ tripId: 1, type: 'collab:note:created', note: buildNote({ id: 4, title: 'Already here' }) });
|
|
});
|
|
expect(screen.getAllByText('Already here')).toHaveLength(1);
|
|
});
|
|
|
|
it('FE-W5CNT-008: a WebSocket update only touches the matching note', async () => {
|
|
serveNotes({
|
|
notes: [buildNote({ id: 1, title: 'First' }), buildNote({ id: 2, title: 'Second' })],
|
|
});
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Second');
|
|
const handler = wsHandler();
|
|
await act(async () => {
|
|
handler({ tripId: 1, type: 'collab:note:updated', note: { id: 2, title: 'Second renamed' } });
|
|
});
|
|
expect(await screen.findByText('Second renamed')).toBeInTheDocument();
|
|
expect(screen.getByText('First')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-009: a WebSocket delete accepts a plain id and ignores events without one', async () => {
|
|
serveNotes({ notes: [buildNote({ id: 9, title: 'Doomed' })] });
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Doomed');
|
|
const handler = wsHandler();
|
|
await act(async () => { handler({ tripId: 1, type: 'collab:note:deleted' }); });
|
|
expect(screen.getByText('Doomed')).toBeInTheDocument();
|
|
await act(async () => { handler({ tripId: 1, type: 'collab:note:deleted', id: 9 }); });
|
|
await waitFor(() => expect(screen.queryByText('Doomed')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-W5CNT-010: an unwrapped create response is prepended to the list', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json(buildNote({ id: 20, title: 'Fresh note' })),
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
await user.type(await screen.findByPlaceholderText('Note title'), 'Fresh note');
|
|
await user.click(screen.getByRole('button', { name: 'Create' }));
|
|
expect(await screen.findByText('Fresh note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-011: an empty create response leaves the list untouched', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(http.post('/api/trips/1/collab/notes', () => HttpResponse.json(null)));
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
await user.type(await screen.findByPlaceholderText('Note title'), 'Ghost note');
|
|
await user.click(screen.getByRole('button', { name: 'Create' }));
|
|
await waitFor(() => expect(screen.queryByPlaceholderText('Note title')).not.toBeInTheDocument());
|
|
expect(screen.getByText('No notes yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-012: a failing create reports an error and keeps the modal open', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
await user.type(await screen.findByPlaceholderText('Note title'), 'Doomed note');
|
|
await user.click(screen.getByRole('button', { name: 'Create' }));
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
expect(screen.getByPlaceholderText('Note title')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-013: a pasted attachment is uploaded and the list is reloaded afterwards', async () => {
|
|
const user = userEvent.setup();
|
|
let uploaded = 0;
|
|
serveNotesSequence([
|
|
{ notes: [] },
|
|
{ notes: [buildNote({ id: 30, title: 'With file' })] },
|
|
]);
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({ note: buildNote({ id: 30, title: 'With file' }) }),
|
|
),
|
|
http.post('/api/trips/1/collab/notes/30/files', () => {
|
|
uploaded += 1;
|
|
return HttpResponse.json({ file: { id: 1 } });
|
|
}),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
await user.type(await screen.findByPlaceholderText('Note title'), 'With file');
|
|
pasteFile('screenshot.png');
|
|
await user.click(screen.getByRole('button', { name: 'Create' }));
|
|
await screen.findByText('With file');
|
|
expect(uploaded).toBe(1);
|
|
expect(filesChanged).toBe(1);
|
|
});
|
|
|
|
it('FE-W5CNT-014: a failing upload reports an error and the array-shaped reload is ignored', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotesSequence([{ notes: [] }, [buildNote({ id: 31, title: 'Never shown' })]]);
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({ note: buildNote({ id: 31, title: 'Upload fails' }) }),
|
|
),
|
|
http.post('/api/trips/1/collab/notes/31/files', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
await user.click(screen.getByText('New Note'));
|
|
await user.type(await screen.findByPlaceholderText('Note title'), 'Upload fails');
|
|
pasteFile('broken.png');
|
|
await user.click(screen.getByRole('button', { name: 'Create' }));
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
await waitFor(() => expect(filesChanged).toBe(1));
|
|
expect(screen.queryByText('Never shown')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-015: pinning a note applies the unwrapped response to that note only', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({
|
|
notes: [buildNote({ id: 1, title: 'Pin me' }), buildNote({ id: 2, title: 'Leave me' })],
|
|
});
|
|
server.use(
|
|
http.put('/api/trips/1/collab/notes/1', () =>
|
|
HttpResponse.json(buildNote({ id: 1, title: 'Pinned now', pinned: true })),
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Pin me');
|
|
const pinBtn = screen.getAllByTitle('Pin')[0];
|
|
await user.click(pinBtn);
|
|
await screen.findByText('Pinned now');
|
|
expect(screen.getByText('Leave me')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-016: an empty update response leaves the note as it was', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({ notes: [buildNote({ id: 1, title: 'Unchanged' })] });
|
|
server.use(http.put('/api/trips/1/collab/notes/1', () => HttpResponse.json(null)));
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Unchanged');
|
|
await user.click(screen.getByTitle('Pin'));
|
|
await waitFor(() => expect(screen.getByText('Unchanged')).toBeInTheDocument());
|
|
expect(screen.getByTitle('Pin')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-017: a failing edit reports an error and keeps the edit modal open', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({ notes: [buildNote({ id: 3, title: 'Edit me' })] });
|
|
server.use(
|
|
http.put('/api/trips/1/collab/notes/3', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Edit me');
|
|
await user.click(screen.getByTitle('Edit'));
|
|
const titleInput = await screen.findByDisplayValue('Edit me');
|
|
await user.type(titleInput, ' v2');
|
|
await user.click(screen.getByRole('button', { name: 'Save' }));
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
expect(screen.getByDisplayValue('Edit me v2')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-018: saving a new category colour rewrites every note in that category', async () => {
|
|
const user = userEvent.setup();
|
|
const bodies: Record<string, unknown>[] = [];
|
|
serveNotes({ notes: [buildNote({ id: 1, title: 'Sushi', category: 'Food', color: '#ef4444' })] });
|
|
server.use(
|
|
http.put('/api/trips/1/collab/notes/1', async ({ request }) => {
|
|
bodies.push((await request.json()) as Record<string, unknown>);
|
|
return HttpResponse.json({ note: buildNote({ id: 1, title: 'Sushi', category: 'Food', color: '#10b981' }) });
|
|
}),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Sushi');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
const label = (await screen.findAllByText('Food')).find(el => el.title === 'Click to rename')!;
|
|
const swatches = label.parentElement!.querySelectorAll('button');
|
|
await user.click(swatches[3]);
|
|
await user.click(screen.getByRole('button', { name: 'Save' }));
|
|
await waitFor(() => expect(bodies).toEqual([{ color: '#10b981' }]));
|
|
});
|
|
|
|
it('FE-W5CNT-019: attaching a file while editing uploads it and refreshes the note', async () => {
|
|
const user = userEvent.setup();
|
|
let uploaded = 0;
|
|
serveNotesSequence([
|
|
{ notes: [buildNote({ id: 3, title: 'Edit me' })] },
|
|
{ notes: [buildNote({ id: 3, title: 'Edited', attachments: [] })] },
|
|
]);
|
|
server.use(
|
|
http.put('/api/trips/1/collab/notes/3', () =>
|
|
HttpResponse.json({ note: buildNote({ id: 3, title: 'Edited' }) }),
|
|
),
|
|
http.post('/api/trips/1/collab/notes/3/files', () => {
|
|
uploaded += 1;
|
|
return HttpResponse.json({ file: { id: 2 } });
|
|
}),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Edit me');
|
|
await user.click(screen.getByTitle('Edit'));
|
|
await screen.findByDisplayValue('Edit me');
|
|
pasteFile('attachment.png');
|
|
await user.click(screen.getByRole('button', { name: 'Save' }));
|
|
await screen.findByText('Edited');
|
|
expect(uploaded).toBe(1);
|
|
expect(filesChanged).toBe(1);
|
|
});
|
|
|
|
it('FE-W5CNT-020: a failing upload during an edit reports an error', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotesSequence([
|
|
{ notes: [buildNote({ id: 3, title: 'Edit me' })] },
|
|
[buildNote({ id: 3, title: 'Ignored reload' })],
|
|
]);
|
|
server.use(
|
|
http.put('/api/trips/1/collab/notes/3', () =>
|
|
HttpResponse.json({ note: buildNote({ id: 3, title: 'Edit me' }) }),
|
|
),
|
|
http.post('/api/trips/1/collab/notes/3/files', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Edit me');
|
|
await user.click(screen.getByTitle('Edit'));
|
|
await screen.findByDisplayValue('Edit me');
|
|
pasteFile('nope.png');
|
|
await user.click(screen.getByRole('button', { name: 'Save' }));
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
expect(screen.queryByText('Ignored reload')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-021: a failing attachment removal reports an error', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({
|
|
notes: [buildNote({
|
|
id: 3,
|
|
title: 'Has file',
|
|
attachments: [{ id: 9, filename: 's.pdf', original_name: 'plan.pdf', mime_type: 'application/pdf', url: '/uploads/plan.pdf' }],
|
|
})],
|
|
});
|
|
server.use(
|
|
http.delete('/api/trips/1/collab/notes/3/files/9', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Has file');
|
|
await user.click(screen.getByTitle('Edit'));
|
|
const chip = (await screen.findByText('plan.pdf')).closest('div')!;
|
|
await user.click(chip.querySelector('button')!);
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
expect(filesChanged).toBe(1);
|
|
});
|
|
|
|
it('FE-W5CNT-022: pinned notes sort first and notes without timestamps sort last', async () => {
|
|
serveNotes({
|
|
notes: [
|
|
buildNote({ id: 1, title: 'No timestamps', updated_at: null, created_at: null }),
|
|
buildNote({ id: 2, title: 'Pinned one', pinned: true }),
|
|
buildNote({ id: 3, title: 'Created only', updated_at: null, created_at: '2025-06-02T10:00:00.000Z' }),
|
|
buildNote({ id: 4, title: 'Also undated', updated_at: null, created_at: null }),
|
|
],
|
|
});
|
|
const known = ['No timestamps', 'Pinned one', 'Created only', 'Also undated'];
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Pinned one');
|
|
const titles = Array.from(document.querySelectorAll('span'))
|
|
.filter(el => el.childElementCount === 0)
|
|
.map(el => el.textContent)
|
|
.filter(text => known.includes(text ?? ''));
|
|
expect(titles).toEqual(['Pinned one', 'Created only', 'No timestamps', 'Also undated']);
|
|
});
|
|
|
|
it('FE-W5CNT-023: clicking the active category pill clears the filter again', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({
|
|
notes: [
|
|
buildNote({ id: 1, title: 'Food note', category: 'Food', color: '#ef4444' }),
|
|
buildNote({ id: 2, title: 'Plain note' }),
|
|
],
|
|
});
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Plain note');
|
|
const pill = screen.getAllByRole('button').find(b => b.textContent === 'Food')!;
|
|
await user.click(pill);
|
|
await waitFor(() => expect(screen.queryByText('Plain note')).not.toBeInTheDocument());
|
|
await user.click(pill);
|
|
expect(await screen.findByText('Plain note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-024: a narrow viewport lays the grid out in a single column', async () => {
|
|
const original = window.innerWidth;
|
|
Object.defineProperty(window, 'innerWidth', { value: 500, writable: true, configurable: true });
|
|
try {
|
|
serveNotes({ notes: [buildNote({ title: 'Mobile note' })] });
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Mobile note');
|
|
const grid = document.querySelector('[style*="grid-template-columns"]') as HTMLElement;
|
|
expect(grid.style.gridTemplateColumns).toBe('1fr');
|
|
} finally {
|
|
Object.defineProperty(window, 'innerWidth', { value: original, writable: true, configurable: true });
|
|
}
|
|
});
|
|
|
|
it('FE-W5CNT-025: the expanded note closes on a backdrop click and its buttons highlight on hover', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({ notes: [buildNote({ id: 5, title: 'Long note', content: 'Full body', category: 'Food', color: '#ef4444' })] });
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Long note');
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
const modal = await waitFor(() => {
|
|
const md = document.querySelector('.collab-note-md-full')
|
|
if (!md) throw new Error('view modal not open yet')
|
|
return md.closest('div[style*="position: fixed"]') as HTMLElement
|
|
});
|
|
expect(within(modal).getByText('Full body')).toBeInTheDocument();
|
|
|
|
const [editBtn, closeBtn] = Array.from(modal.querySelectorAll('button'));
|
|
fireEvent.mouseEnter(editBtn);
|
|
expect(editBtn.style.color).toBe('var(--text-primary)');
|
|
fireEvent.mouseLeave(editBtn);
|
|
expect(editBtn.style.color).toBe('var(--text-faint)');
|
|
fireEvent.mouseEnter(closeBtn);
|
|
expect(closeBtn.style.color).toBe('var(--text-primary)');
|
|
fireEvent.mouseLeave(closeBtn);
|
|
expect(closeBtn.style.color).toBe('var(--text-faint)');
|
|
|
|
fireEvent.click(modal);
|
|
await waitFor(() => expect(document.querySelector('.collab-note-md-full')).toBeNull());
|
|
});
|
|
|
|
it('FE-W5CNT-026: attachments in the expanded note open the preview and react to hover', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({
|
|
notes: [buildNote({
|
|
id: 6,
|
|
title: 'Trip docs',
|
|
content: 'See attachments',
|
|
attachments: [
|
|
{ id: 1, filename: 'a.png', original_name: 'map.png', mime_type: 'image/png', url: '/uploads/map.png' },
|
|
{ id: 2, filename: 'b.zip', original_name: 'itinerary.zip', mime_type: 'application/zip', url: '/uploads/itinerary.zip' },
|
|
{ id: 3, filename: 'c', url: '/uploads/c' },
|
|
],
|
|
})],
|
|
});
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Trip docs');
|
|
await user.click(screen.getByTitle('collab.notes.expand'));
|
|
const modal = await waitFor(() => {
|
|
const md = document.querySelector('.collab-note-md-full')
|
|
if (!md) throw new Error('view modal not open yet')
|
|
return md.closest('div[style*="position: fixed"]') as HTMLElement
|
|
});
|
|
|
|
// Unknown mime type and missing name fall back to a "?" tile
|
|
expect(within(modal).getByText('?')).toBeInTheDocument();
|
|
|
|
const zipTile = within(modal).getByTitle('itinerary.zip');
|
|
expect(zipTile.style.background).toBe('var(--bg-secondary)');
|
|
expect(within(modal).getByText('ZIP')).toBeInTheDocument();
|
|
fireEvent.mouseEnter(zipTile);
|
|
expect(zipTile.style.transform).toBe('scale(1.06)');
|
|
fireEvent.mouseLeave(zipTile);
|
|
expect(zipTile.style.transform).toBe('scale(1)');
|
|
fireEvent.click(zipTile);
|
|
// FilePreviewPortal shows a download action for non-image files
|
|
expect(await screen.findByText('Download itinerary.zip')).toBeInTheDocument();
|
|
|
|
const image = await waitFor(() => {
|
|
const img = modal.querySelector('img[alt="map.png"]') as HTMLImageElement | null;
|
|
if (!img) throw new Error('image attachment not rendered yet');
|
|
return img;
|
|
});
|
|
fireEvent.mouseEnter(image);
|
|
expect(image.style.transform).toBe('scale(1.06)');
|
|
fireEvent.mouseLeave(image);
|
|
expect(image.style.transform).toBe('scale(1)');
|
|
fireEvent.click(image);
|
|
await waitFor(() => expect(screen.queryByText('Download itinerary.zip')).not.toBeInTheDocument());
|
|
});
|
|
it('FE-W5CNT-027: a create response for a note already in the list is not added twice', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({ notes: [buildNote({ id: 20, title: 'Fresh note' })] });
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({ note: buildNote({ id: 20, title: 'Fresh note' }) }),
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Fresh note');
|
|
await user.click(screen.getByText('New Note'));
|
|
await user.type(await screen.findByPlaceholderText('Note title'), 'Fresh note');
|
|
await user.click(screen.getByRole('button', { name: 'Create' }));
|
|
await waitFor(() => expect(screen.queryByPlaceholderText('Note title')).not.toBeInTheDocument());
|
|
expect(screen.getAllByText('Fresh note')).toHaveLength(1);
|
|
});
|
|
|
|
it('FE-W5CNT-028: a second note created elsewhere is prepended to the existing list', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({ notes: [buildNote({ id: 20, title: 'Older note' })] });
|
|
server.use(
|
|
http.post('/api/trips/1/collab/notes', () =>
|
|
HttpResponse.json({ note: buildNote({ id: 21, title: 'Newer note' }) }),
|
|
),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Older note');
|
|
await user.click(screen.getByText('New Note'));
|
|
await user.type(await screen.findByPlaceholderText('Note title'), 'Newer note');
|
|
await user.click(screen.getByRole('button', { name: 'Create' }));
|
|
await screen.findByText('Newer note');
|
|
expect(screen.getByText('Older note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-030: a WebSocket event for another trip is ignored', async () => {
|
|
serveNotes({ notes: [] });
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('No notes yet');
|
|
const handler = wsHandler();
|
|
await act(async () => {
|
|
handler({ tripId: 2, type: 'collab:note:created', note: buildNote({ id: 60, title: 'Other trip note' }) });
|
|
});
|
|
expect(screen.queryByText('Other trip note')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-031: a rejected rename still renames the rest and re-reads the list', async () => {
|
|
const user = userEvent.setup();
|
|
const puts: string[] = [];
|
|
serveNotesSequence([
|
|
{ notes: [buildNote({ id: 1, title: 'First note', category: 'OldCat' }), buildNote({ id: 2, title: 'Second note', category: 'OldCat' })] },
|
|
{ notes: [buildNote({ id: 1, title: 'First note', category: 'OldCat' }), buildNote({ id: 2, title: 'Second note', category: 'NewCat' })] },
|
|
]);
|
|
server.use(
|
|
http.put('/api/trips/1/collab/notes/1', () => {
|
|
puts.push('1');
|
|
return new HttpResponse(null, { status: 500 });
|
|
}),
|
|
http.put('/api/trips/1/collab/notes/2', () => {
|
|
puts.push('2');
|
|
return HttpResponse.json({ note: buildNote({ id: 2, title: 'Second note', category: 'NewCat' }) });
|
|
}),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('First note');
|
|
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
const oldCat = screen.getAllByText('OldCat').find(el => el.tagName === 'SPAN' && el.title === 'Click to rename')!;
|
|
await user.click(oldCat);
|
|
const editInput = screen.getByDisplayValue('OldCat');
|
|
await user.clear(editInput);
|
|
await user.type(editInput, 'NewCat');
|
|
await user.keyboard('{Enter}');
|
|
await user.click(screen.getByRole('button', { name: /^Save$/i }));
|
|
|
|
// The rejected note must not stop the second one, but the modal stays open —
|
|
// half a rename is not a saved rename.
|
|
await waitFor(() => expect(puts).toEqual(['1', '2']));
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
|
|
// Re-read: the note the server refused is still shown under its old category.
|
|
const header = screen.getByText('Manage Categories', { selector: 'h3' }).parentElement!;
|
|
await user.click(within(header).getByRole('button'));
|
|
await waitFor(() => expect(screen.getAllByText('NewCat').length).toBeGreaterThan(0));
|
|
expect(screen.getAllByText('OldCat').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-W5CNT-029: a failing delete reports an error and keeps the note in the list', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({ notes: [buildNote({ id: 30, title: 'Stubborn note' })] });
|
|
server.use(
|
|
http.delete('/api/trips/1/collab/notes/30', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('Stubborn note');
|
|
|
|
await user.click(screen.getByTitle('Delete'));
|
|
const dialog = (await screen.findByText('Delete note?')).closest('div.trek-modal-enter') as HTMLElement;
|
|
await user.click(within(dialog).getByRole('button', { name: 'Delete' }));
|
|
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
expect(screen.getByText('Stubborn note')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5CNT-032: a rejected category rename keeps the settings modal open and reports once', async () => {
|
|
const user = userEvent.setup();
|
|
serveNotes({
|
|
notes: [
|
|
buildNote({ id: 1, title: 'First note', category: 'OldCat' }),
|
|
buildNote({ id: 2, title: 'Second note', category: 'OldCat' }),
|
|
],
|
|
});
|
|
server.use(
|
|
http.put('/api/trips/1/collab/notes/:id', () => new HttpResponse(null, { status: 500 })),
|
|
);
|
|
render(<CollabNotes {...defaultProps} />);
|
|
await screen.findByText('First note');
|
|
await user.click(screen.getByTitle('Manage Categories'));
|
|
await screen.findByText('Manage Categories', { selector: 'h3' });
|
|
|
|
const oldCat = screen.getAllByText('OldCat').find(el => el.tagName === 'SPAN' && el.title === 'Click to rename')!;
|
|
await user.click(oldCat);
|
|
const editInput = screen.getByDisplayValue('OldCat');
|
|
await user.clear(editInput);
|
|
await user.type(editInput, 'NewCat');
|
|
await user.keyboard('{Enter}');
|
|
await screen.findByText('NewCat');
|
|
await user.click(screen.getByRole('button', { name: /^Save$/i }));
|
|
|
|
await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
|
|
// Nothing was renamed, so the modal must not act like it was saved…
|
|
expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
|
|
// …and both rejected writes are one message, not one each.
|
|
expect(addToast).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|