test: add comprehensive coverage for OAuth scopes, MCP, and core services

Adds new and expanded test suites across client and server to cover the OAuth 2.1 scope system, MCP session manager, collab service, unified memories helpers, OIDC service, budget slice, and OAuth authorize page. Also extends SonarQube coverage exclusions to include bootstrapping files (migrations, scheduler, main.tsx, types.ts) that are not meaningfully testable.
2026-06-19 21:31:46 +00:00 · 2026-04-11 14:07:56 +02:00
parent 1585c472c2
commit 7a22d742ab
19 changed files with 2676 additions and 10 deletions
@@ -1,4 +1,4 @@
-// FE-COMP-INTEGRATIONS-001 to FE-COMP-INTEGRATIONS-018
+// FE-COMP-INTEGRATIONS-001 to FE-COMP-INTEGRATIONS-032
 import { render, screen, waitFor } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
@@ -7,6 +7,7 @@ import { useAuthStore } from '../../store/authStore';
 import { useAddonStore } from '../../store/addonStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { buildUser } from '../../../tests/helpers/factories';
+import { ToastContainer } from '../shared/Toast';
 import IntegrationsTab from './IntegrationsTab';

 function enableMcp() {
@@ -40,6 +41,8 @@ beforeEach(() => {
  server.use(
    http.get('/api/auth/mcp-tokens', () => HttpResponse.json({ tokens: [] })),
    http.get('/api/addons', () => HttpResponse.json({ addons: [] })),
+    http.get('/api/oauth/clients', () => HttpResponse.json({ clients: [] })),
+    http.get('/api/oauth/sessions', () => HttpResponse.json({ sessions: [] })),
  );
 });

@@ -379,4 +382,273 @@ describe('IntegrationsTab', () => {
    await screen.findByText(/Register OAuth 2\.1 clients/i);
    expect(screen.queryByText('No tokens yet. Create one to connect MCP clients.')).toBeNull();
  });
+
+  it('FE-COMP-INTEGRATIONS-021: OAuth client list renders when clients exist', async () => {
+    server.use(
+      http.get('/api/oauth/clients', () =>
+        HttpResponse.json({
+          clients: [
+            {
+              id: 'client-1',
+              client_id: 'clid-abc',
+              name: 'My OAuth App',
+              redirect_uris: ['http://localhost'],
+              allowed_scopes: ['trips:read', 'places:read'],
+              created_at: '2025-01-01T00:00:00Z',
+            },
+          ],
+        })
+      )
+    );
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('My OAuth App');
+    expect(screen.getByText(/clid-abc/)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-INTEGRATIONS-022: scope expansion toggle shows more/fewer scopes', async () => {
+    const user = userEvent.setup();
+    const scopes = ['trips:read', 'trips:write', 'places:read', 'places:write', 'budget:read', 'budget:write', 'packing:read'];
+    server.use(
+      http.get('/api/oauth/clients', () =>
+        HttpResponse.json({
+          clients: [
+            { id: 'c1', client_id: 'cid', name: 'Big App', redirect_uris: ['http://localhost'], allowed_scopes: scopes, created_at: '2025-01-01T00:00:00Z' },
+          ],
+        })
+      )
+    );
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('Big App');
+    // "+2 more" button visible (7 scopes, 5 shown)
+    const moreBtn = screen.getByText(/^\+\d+$/);
+    await user.click(moreBtn);
+    // Show less / collapse button now visible
+    expect(screen.getByText('−')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-INTEGRATIONS-023: active OAuth sessions section renders when sessions exist', async () => {
+    server.use(
+      http.get('/api/oauth/sessions', () =>
+        HttpResponse.json({
+          sessions: [
+            {
+              id: 10,
+              client_name: 'Claude Desktop',
+              scopes: ['trips:read'],
+              access_token_expires_at: '2025-12-31T00:00:00Z',
+            },
+          ],
+        })
+      )
+    );
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('Claude Desktop');
+    expect(screen.getByText(/trips:read/)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-INTEGRATIONS-024: Create OAuth Client modal opens and shows presets', async () => {
+    const user = userEvent.setup();
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /New Client/i }));
+    await screen.findByText('Register OAuth Client');
+    expect(screen.getByText('Claude.ai')).toBeInTheDocument();
+    expect(screen.getByText('Claude Desktop')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-INTEGRATIONS-025: clicking a preset fills form fields', async () => {
+    const user = userEvent.setup();
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /New Client/i }));
+    await screen.findByText('Register OAuth Client');
+    // Presets render as buttons — click "Claude.ai" preset
+    const presetBtns = screen.getAllByRole('button', { name: /Claude\.ai/i });
+    await user.click(presetBtns[0]);
+    // Name field should be filled with 'Claude.ai'
+    const nameInput = screen.getByPlaceholderText(/Claude Web, My MCP App/i);
+    expect((nameInput as HTMLInputElement).value).toBe('Claude.ai');
+  });
+
+  it('FE-COMP-INTEGRATIONS-026: creating client shows success view with client_id and secret', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/oauth/clients', () =>
+        HttpResponse.json({
+          client: {
+            id: 'new-id',
+            client_id: 'clid-new',
+            client_secret: 'secret-value',
+            name: 'Test Client',
+            redirect_uris: ['http://localhost'],
+            allowed_scopes: ['trips:read'],
+            created_at: '2025-01-01T00:00:00Z',
+          },
+        })
+      )
+    );
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /New Client/i }));
+    await screen.findByText('Register OAuth Client');
+
+    const nameInput = screen.getByPlaceholderText(/Claude Web, My MCP App/i);
+    await user.type(nameInput, 'Test Client');
+    const uriInput = screen.getByPlaceholderText(/https:\/\/your-app/i);
+    await user.type(uriInput, 'http://localhost');
+    await user.click(screen.getByRole('button', { name: /Register Client/i }));
+    // Success view shows client credentials (there may be multiple matches in list + modal)
+    await screen.findAllByText(/clid-new/);
+    const secretEls = await screen.findAllByText(/secret-value/);
+    expect(secretEls.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-INTEGRATIONS-027: Done button closes created-client modal', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/oauth/clients', () =>
+        HttpResponse.json({
+          client: {
+            id: 'n2',
+            client_id: 'clid-n2',
+            client_secret: 'secret-n2',
+            name: 'TC2',
+            redirect_uris: ['http://localhost'],
+            allowed_scopes: ['trips:read'],
+            created_at: '2025-01-01T00:00:00Z',
+          },
+        })
+      )
+    );
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /New Client/i }));
+    await screen.findByText('Register OAuth Client');
+    await user.type(screen.getByPlaceholderText(/Claude Web, My MCP App/i), 'TC2');
+    await user.type(screen.getByPlaceholderText(/https:\/\/your-app/i), 'http://localhost');
+    await user.click(screen.getByRole('button', { name: /Register Client/i }));
+    await screen.findAllByText(/clid-n2/);
+    // Check the "Client Registered" modal title is visible before Done
+    expect(screen.getByText('Client Registered')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /^Done$/i }));
+    await waitFor(() => {
+      expect(screen.queryByText('Client Registered')).toBeNull();
+    });
+  });
+
+  it('FE-COMP-INTEGRATIONS-028: delete OAuth client confirmation removes client from list', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/oauth/clients', () =>
+        HttpResponse.json({
+          clients: [
+            { id: 'del-1', client_id: 'cid-del', name: 'Delete Me', redirect_uris: ['http://localhost'], allowed_scopes: ['trips:read'], created_at: '2025-01-01T00:00:00Z' },
+          ],
+        })
+      ),
+      http.delete('/api/oauth/clients/del-1', () => HttpResponse.json({ success: true }))
+    );
+    enableMcp();
+    render(<><ToastContainer /><IntegrationsTab /></>);
+    await screen.findByText('Delete Me');
+    await user.click(screen.getByTitle('Delete Client'));
+    // Confirmation modal
+    await screen.findByRole('heading', { name: 'Delete Client' });
+    const confirmBtns = screen.getAllByRole('button', { name: /Delete Client/i });
+    // Modal confirm button is last in DOM (modal renders after list)
+    await user.click(confirmBtns[confirmBtns.length - 1]);
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Me')).toBeNull();
+    });
+  });
+
+  it('FE-COMP-INTEGRATIONS-029: rotate secret confirmation shows new secret', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/oauth/clients', () =>
+        HttpResponse.json({
+          clients: [
+            { id: 'rot-1', client_id: 'cid-rot', name: 'Rotate Me', redirect_uris: ['http://localhost'], allowed_scopes: ['trips:read'], created_at: '2025-01-01T00:00:00Z' },
+          ],
+        })
+      ),
+      http.post('/api/oauth/clients/rot-1/rotate', () =>
+        HttpResponse.json({ client_secret: 'new-rotated-secret' })
+      )
+    );
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('Rotate Me');
+    await user.click(screen.getByTitle('Rotate Secret'));
+    await screen.findByText('Rotate Secret');
+    // Confirm — button text is 'Rotate'
+    const rotateBtns = screen.getAllByRole('button', { name: /^Rotate$/i });
+    await user.click(rotateBtns[rotateBtns.length - 1]);
+    await screen.findByText(/new-rotated-secret/);
+  });
+
+  it('FE-COMP-INTEGRATIONS-030: revoke OAuth session removes it from list', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/oauth/sessions', () =>
+        HttpResponse.json({
+          sessions: [
+            { id: 99, client_name: 'Revoke App', scopes: ['trips:read'], access_token_expires_at: '2025-12-31T00:00:00Z' },
+          ],
+        })
+      ),
+      http.delete('/api/oauth/sessions/99', () => HttpResponse.json({ success: true }))
+    );
+    enableMcp();
+    render(<><ToastContainer /><IntegrationsTab /></>);
+    await screen.findByText('Revoke App');
+    await user.click(screen.getByText('Revoke'));
+    // Confirmation modal
+    await screen.findByText('Revoke Session');
+    const revokeBtns = screen.getAllByRole('button', { name: /^Revoke$/i });
+    // Modal confirm button is last in DOM
+    await user.click(revokeBtns[revokeBtns.length - 1]);
+    await waitFor(() => {
+      expect(screen.queryByText('Revoke App')).toBeNull();
+    });
+  });
+
+  it('FE-COMP-INTEGRATIONS-031: Register Client button disabled when name or URI is empty', async () => {
+    const user = userEvent.setup();
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /New Client/i }));
+    await screen.findByText('Register OAuth Client');
+    const createBtn = screen.getByRole('button', { name: /Register Client/i });
+    expect(createBtn).toBeDisabled();
+    // Type only name, not URI → still disabled
+    await user.type(screen.getByPlaceholderText(/Claude Web, My MCP App/i), 'Test');
+    expect(createBtn).toBeDisabled();
+  });
+
+  it('FE-COMP-INTEGRATIONS-032: error toast shown when create OAuth client fails', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/oauth/clients', () =>
+        HttpResponse.json({ error: 'server error' }, { status: 500 })
+      )
+    );
+    enableMcp();
+    render(<><ToastContainer /><IntegrationsTab /></>);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /New Client/i }));
+    await screen.findByText('Register OAuth Client');
+    await user.type(screen.getByPlaceholderText(/Claude Web, My MCP App/i), 'Fail Client');
+    await user.type(screen.getByPlaceholderText(/https:\/\/your-app/i), 'http://localhost');
+    await user.click(screen.getByRole('button', { name: /Register Client/i }));
+    await screen.findByText(/Failed to register/i);
+  });
 });