test(front): add test suite frontend (WIP)

2026-06-21 14:21:46 +00:00 · 2026-04-07 12:31:09 +02:00
parent 96080e8a03
commit 3c31902885
97 changed files with 16973 additions and 4 deletions
@@ -0,0 +1,158 @@
+// FE-COMP-CHAT-001 to FE-COMP-CHAT-012
+// jsdom doesn't implement scrollTo — mock it to prevent uncaught exceptions from CollabChat's scrollToBottom
+beforeAll(() => {
+  Element.prototype.scrollTo = vi.fn() as any;
+});
+
+// CollabChat 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(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip } from '../../../tests/helpers/factories';
+import CollabChat from './CollabChat';
+
+const currentUser = buildUser({ id: 1, username: 'testuser' });
+
+const defaultProps = {
+  tripId: 1,
+  currentUser,
+};
+
+beforeEach(() => {
+  resetAllStores();
+  server.use(
+    http.get('/api/trips/1/collab/messages', () =>
+      HttpResponse.json({ messages: [], total: 0 })
+    ),
+  );
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
+});
+
+describe('CollabChat', () => {
+  it('FE-COMP-CHAT-001: renders without crashing', () => {
+    render(<CollabChat {...defaultProps} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-002: shows empty state when no messages', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+  });
+
+  it('FE-COMP-CHAT-003: shows message input placeholder', async () => {
+    render(<CollabChat {...defaultProps} />);
+    // Wait for loading to complete
+    await screen.findByText('Start the conversation');
+    expect(screen.getByPlaceholderText('Type a message...')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-004: shows send button (ArrowUp icon, no title)', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    // Send button has no title attr — verify buttons exist in the toolbar area
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-CHAT-005: shows existing messages from API', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: currentUser.id, username: 'testuser',
+            avatar_url: null, text: 'Hello world!', created_at: '2025-06-01T10:00:00.000Z',
+            reactions: {}, reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Hello world!');
+  });
+
+  it('FE-COMP-CHAT-006: typing in input updates text field', async () => {
+    const user = userEvent.setup();
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const input = screen.getByPlaceholderText('Type a message...');
+    await user.type(input, 'Test message');
+    expect((input as HTMLTextAreaElement).value).toBe('Test message');
+  });
+
+  it('FE-COMP-CHAT-007: submitting message via Enter calls POST API', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.post('/api/trips/1/collab/messages', async () => {
+        postCalled = true;
+        return HttpResponse.json({
+          id: 2, trip_id: 1, user_id: 1, username: 'testuser',
+          avatar_url: null, text: 'New message', created_at: new Date().toISOString(),
+          reactions: {}, reply_to: null, deleted: false, edited: false,
+        });
+      })
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const input = screen.getByPlaceholderText('Type a message...');
+    // Enter key sends message (Shift+Enter = newline, Enter = send)
+    await user.type(input, 'New message{Enter}');
+    await waitFor(() => expect(postCalled).toBe(true));
+  });
+
+  it('FE-COMP-CHAT-008: message input area is present after loading', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    expect(screen.getByPlaceholderText('Type a message...')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-009: shows hint text in empty state', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText(/Share ideas, plans/i);
+  });
+
+  it('FE-COMP-CHAT-010: chat container renders', () => {
+    render(<CollabChat {...defaultProps} />);
+    expect(document.body.children.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-CHAT-011: multiple messages all render', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [
+            { id: 1, trip_id: 1, user_id: 1, username: 'testuser', avatar_url: null, text: 'First message', created_at: '2025-06-01T10:00:00.000Z', reactions: {}, reply_to: null, deleted: false, edited: false },
+            { id: 2, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null, text: 'Second message', created_at: '2025-06-01T10:01:00.000Z', reactions: {}, reply_to: null, deleted: false, edited: false },
+          ],
+          total: 2,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('First message');
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-012: shows emoji button in the toolbar', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    // Emoji button is a button in the toolbar
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+});
@@ -0,0 +1,176 @@
+// 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(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip } from '../../../tests/helpers/factories';
+import CollabNotes from './CollabNotes';
+
+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} />);
+    await screen.findByText('No notes yet');
+  });
+
+  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} />);
+    await screen.findByText('Packing Tips');
+  });
+
+  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)
+    await screen.findByPlaceholderText('Note title');
+  });
+
+  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} />);
+    await screen.findByText('My Checklist');
+  });
+
+  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} />);
+    // collab.notes.title = "Notes"
+    await screen.findByText('Notes');
+  });
+
+  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();
+  });
+});