feat(web): add groups page with RouteManager and route handler proxies

Implements the Groups & Routes admin page with a client-side RouteManager component (add/delete sync routes via fetch), server-side groups page that pre-fetches groups/routes from the API, and Next.js Route Handler proxies for /api/routes (GET, POST) and /api/routes/[id] (DELETE). Adds a custom jest environment that polyfills Node 18+ native fetch into the jsdom sandbox so tests can use jest.spyOn(global, 'fetch'). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-28 01:37:13 +05:30
parent 71e2b0681c
commit 1389a65e18
8 changed files with 300 additions and 1 deletions
@@ -0,0 +1,77 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { RouteManager } from './RouteManager';
+
+const groups = [
+  { id: 'grp_1', name: 'Alpha', platform: 'whatsapp' },
+  { id: 'grp_2', name: 'Beta', platform: 'whatsapp' },
+];
+
+const routes = [
+  {
+    id: 'rt_1',
+    sourceGroupId: 'grp_1',
+    targetGroupId: 'grp_2',
+    sourceGroup: { name: 'Alpha' },
+    targetGroup: { name: 'Beta' },
+  },
+];
+
+let fetchSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  fetchSpy = jest.spyOn(global, 'fetch');
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('RouteManager', () => {
+  it('renders existing routes with source → target names', () => {
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+  });
+
+  it('renders two group select dropdowns for adding a route', () => {
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    expect(screen.getAllByRole('combobox')).toHaveLength(2);
+  });
+
+  it('calls POST /api/routes when Add route is submitted', async () => {
+    fetchSpy.mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({ id: 'rt_new', sourceGroupId: 'grp_1', targetGroupId: 'grp_2', sourceGroup: { name: 'Alpha' }, targetGroup: { name: 'Beta' } }),
+        { status: 201, headers: { 'Content-Type': 'application/json' } },
+      ),
+    );
+    render(<RouteManager groups={groups} initialRoutes={[]} />);
+    const [sourceSelect, targetSelect] = screen.getAllByRole('combobox');
+    fireEvent.change(sourceSelect, { target: { value: 'grp_1' } });
+    fireEvent.change(targetSelect, { target: { value: 'grp_2' } });
+    fireEvent.click(screen.getByRole('button', { name: /add route/i }));
+    await waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledWith(
+        '/api/routes',
+        expect.objectContaining({ method: 'POST' }),
+      );
+    });
+  });
+
+  it('shows a delete button for each existing route', () => {
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+  });
+
+  it('calls DELETE /api/routes/:id when a route is deleted', async () => {
+    fetchSpy.mockResolvedValueOnce(new Response(null, { status: 204 }));
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    fireEvent.click(screen.getByRole('button', { name: /delete/i }));
+    await waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledWith(
+        '/api/routes/rt_1',
+        expect.objectContaining({ method: 'DELETE' }),
+      );
+    });
+  });
+});