maaz519
1389a65e18
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>
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
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' }),
|
|
);
|
|
});
|
|
});
|
|
});
|