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,175 @@
+// FE-COMP-MEMBERS-001 to FE-COMP-MEMBERS-015
+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 TripMembersModal from './TripMembersModal';
+
+const defaultProps = {
+  isOpen: true,
+  onClose: vi.fn(),
+  tripId: 1,
+  tripTitle: 'Test Trip',
+};
+
+const ownerUser = buildUser({ id: 1, username: 'owner' });
+const memberUser = buildUser({ id: 2, username: 'alice' });
+
+beforeEach(() => {
+  resetAllStores();
+  server.use(
+    http.get('/api/trips/1/members', () =>
+      HttpResponse.json({
+        owner: { id: ownerUser.id, username: ownerUser.username, avatar_url: null },
+        members: [],
+        current_user_id: ownerUser.id,
+      })
+    ),
+    http.get('/api/trips/1/share-link', () =>
+      HttpResponse.json({ token: null })
+    ),
+    http.get('/api/auth/users', () =>
+      HttpResponse.json({ users: [memberUser] })
+    ),
+  );
+  seedStore(useAuthStore, { user: ownerUser, isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1, title: 'Test Trip' }) });
+});
+
+describe('TripMembersModal', () => {
+  it('FE-COMP-MEMBERS-001: renders without crashing', () => {
+    render(<TripMembersModal {...defaultProps} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMBERS-002: shows Share Trip title', () => {
+    render(<TripMembersModal {...defaultProps} />);
+    // members.shareTrip = "Share Trip"
+    expect(screen.getByText('Share Trip')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMBERS-003: shows owner username after load', async () => {
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByText('owner');
+  });
+
+  it('FE-COMP-MEMBERS-004: shows Owner label', async () => {
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByText('Owner');
+  });
+
+  it('FE-COMP-MEMBERS-005: shows Access section heading', async () => {
+    render(<TripMembersModal {...defaultProps} />);
+    // Text is "Access (1 person)" so use regex
+    await screen.findByText(/Access/i);
+  });
+
+  it('FE-COMP-MEMBERS-006: shows member when members are loaded', async () => {
+    server.use(
+      http.get('/api/trips/1/members', () =>
+        HttpResponse.json({
+          owner: { id: ownerUser.id, username: ownerUser.username, avatar_url: null },
+          members: [{ id: memberUser.id, username: memberUser.username, avatar_url: null }],
+          current_user_id: ownerUser.id,
+        })
+      )
+    );
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByText('alice');
+  });
+
+  it('FE-COMP-MEMBERS-007: shows Invite User section', async () => {
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByText('Invite User');
+  });
+
+  it('FE-COMP-MEMBERS-008: shows Invite button', async () => {
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByRole('button', { name: /Invite/i });
+  });
+
+  it('FE-COMP-MEMBERS-009: Cancel/close button is present', () => {
+    render(<TripMembersModal {...defaultProps} />);
+    // Modal has a close button (×)
+    const closeBtn = screen.queryByRole('button', { name: /close/i }) || document.querySelector('[aria-label="close"], button[title="Close"]');
+    // The modal renders at minimum a close button or can be closed by clicking overlay
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMBERS-010: shows member count of 1 with owner', async () => {
+    render(<TripMembersModal {...defaultProps} />);
+    // 1 person (just owner)
+    await screen.findByText(/1 person/i);
+  });
+
+  it('FE-COMP-MEMBERS-011: members count increases when member is added', async () => {
+    server.use(
+      http.get('/api/trips/1/members', () =>
+        HttpResponse.json({
+          owner: { id: ownerUser.id, username: ownerUser.username, avatar_url: null },
+          members: [{ id: memberUser.id, username: memberUser.username, avatar_url: null }],
+          current_user_id: ownerUser.id,
+        })
+      )
+    );
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByText(/2 persons/i);
+  });
+
+  it('FE-COMP-MEMBERS-012: shows "you" label next to current user', async () => {
+    render(<TripMembersModal {...defaultProps} />);
+    // Rendered as "(you)" — use regex to find it
+    await screen.findByText(/\(you\)/i);
+  });
+
+  it('FE-COMP-MEMBERS-013: shows remove access button for members (not owner)', async () => {
+    server.use(
+      http.get('/api/trips/1/members', () =>
+        HttpResponse.json({
+          owner: { id: ownerUser.id, username: ownerUser.username, avatar_url: null },
+          members: [{ id: memberUser.id, username: memberUser.username, avatar_url: null }],
+          current_user_id: ownerUser.id,
+        })
+      )
+    );
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByText('alice');
+    // Remove access button shown for members
+    expect(screen.getByTitle('Remove access')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMBERS-014: remove member calls DELETE API', async () => {
+    const user = userEvent.setup();
+    let deleteCalled = false;
+    // Mock window.confirm to return true so deletion proceeds
+    vi.spyOn(window, 'confirm').mockReturnValue(true);
+    server.use(
+      http.get('/api/trips/1/members', () =>
+        HttpResponse.json({
+          owner: { id: ownerUser.id, username: ownerUser.username, avatar_url: null },
+          members: [{ id: memberUser.id, username: memberUser.username, avatar_url: null }],
+          current_user_id: ownerUser.id,
+        })
+      ),
+      http.delete('/api/trips/1/members/:userId', () => {
+        deleteCalled = true;
+        return HttpResponse.json({ success: true });
+      })
+    );
+    render(<TripMembersModal {...defaultProps} />);
+    await screen.findByText('alice');
+    const removeBtn = screen.getByTitle('Remove access');
+    await user.click(removeBtn);
+    await waitFor(() => expect(deleteCalled).toBe(true));
+    vi.restoreAllMocks();
+  });
+
+  it('FE-COMP-MEMBERS-015: modal renders when isOpen is true', () => {
+    render(<TripMembersModal {...defaultProps} isOpen={true} />);
+    expect(screen.getByText('Share Trip')).toBeInTheDocument();
+  });
+});