@mmerterden/multi-agent-pipeline 20.36.0 → 20.37.1

package/pipeline/skills/shared/external/web-testing/SKILL.md

@@ -209,150 +209,11 @@ describe('useCounter', () => {
 
 ## MSW (Mock Service Worker)
 
-```typescript
-// src/mocks/handlers.ts
-import { http, HttpResponse } from 'msw';
-
-export const handlers = [
-  http.get('/api/users', () => {
-    return HttpResponse.json([
-      { id: '1', name: 'Alice', email: 'alice@example.com' },
-      { id: '2', name: 'Bob', email: 'bob@example.com' },
-    ]);
-  }),
-
-  http.get('/api/users/:id', ({ params }) => {
-    const { id } = params;
-    if (id === '999') {
-      return new HttpResponse(null, { status: 404 });
-    }
-    return HttpResponse.json({ id, name: 'Alice', email: 'alice@example.com' });
-  }),
-
-  http.post('/api/users', async ({ request }) => {
-    const body = await request.json();
-    return HttpResponse.json({ id: '3', ...body }, { status: 201 });
-  }),
-
-  http.delete('/api/users/:id', () => {
-    return new HttpResponse(null, { status: 204 });
-  }),
-];
-
-// src/mocks/server.ts
-import { setupServer } from 'msw/node';
-import { handlers } from './handlers';
-
-export const server = setupServer(...handlers);
-
-// src/test/setup.ts
-import { server } from '../mocks/server';
-
-beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
-afterEach(() => server.resetHandlers());
-afterAll(() => server.close());
-```
-
-```tsx
-// Using MSW in tests with per-test overrides
-import { http, HttpResponse } from 'msw';
-import { server } from '../mocks/server';
-
-describe('UserList', () => {
-  it('shows error state on API failure', async () => {
-    // Override handler for this test only
-    server.use(
-      http.get('/api/users', () => {
-        return new HttpResponse(null, { status: 500 });
-      })
-    );
-
-    render(<UserList />);
-    expect(await screen.findByText(/failed to load/i)).toBeInTheDocument();
-  });
-});
-```
+Code for this section: [Web testing examples](references/testing-examples.md).
 
 ## Playwright (E2E Testing)
 
-```typescript
-// playwright.config.ts
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './e2e',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
-  use: {
-    baseURL: 'http://localhost:3000',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-  },
-  projects: [
-    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
-    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
-    { name: 'mobile', use: { ...devices['iPhone 14'] } },
-  ],
-  webServer: {
-    command: 'npm run dev',
-    url: 'http://localhost:3000',
-    reuseExistingServer: !process.env.CI,
-  },
-});
-```
-
-```typescript
-// e2e/auth.spec.ts
-import { test, expect } from '@playwright/test';
-
-test.describe('Authentication', () => {
-  test('successful login redirects to dashboard', async ({ page }) => {
-    await page.goto('/login');
-
-    await page.getByLabel('Email').fill('user@example.com');
-    await page.getByLabel('Password').fill('password123');
-    await page.getByRole('button', { name: 'Sign in' }).click();
-
-    await expect(page).toHaveURL('/dashboard');
-    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
-  });
-
-  test('shows error for invalid credentials', async ({ page }) => {
-    await page.goto('/login');
-
-    await page.getByLabel('Email').fill('wrong@example.com');
-    await page.getByLabel('Password').fill('wrongpass');
-    await page.getByRole('button', { name: 'Sign in' }).click();
-
-    await expect(page.getByText('Invalid credentials')).toBeVisible();
-    await expect(page).toHaveURL('/login');
-  });
-});
-
-// e2e/checkout.spec.ts
-test('completes checkout flow', async ({ page }) => {
-  await page.goto('/products');
-
-  // Add item to cart
-  await page.getByRole('button', { name: 'Add to cart' }).first().click();
-  await expect(page.getByTestId('cart-count')).toHaveText('1');
-
-  // Navigate to checkout
-  await page.getByRole('link', { name: 'Cart' }).click();
-  await page.getByRole('button', { name: 'Checkout' }).click();
-
-  // Fill shipping info
-  await page.getByLabel('Address').fill('123 Main St');
-  await page.getByLabel('City').fill('New York');
-  await page.getByRole('button', { name: 'Place order' }).click();
-
-  // Verify confirmation
-  await expect(page.getByText('Order confirmed')).toBeVisible();
-});
-```
+Code for this section: [Web testing examples](references/testing-examples.md).
 
 ### Structure, error states and time
 
@@ -360,56 +221,16 @@ test('completes checkout flow', async ({ page }) => {
 is a subset by default: list what must be there, in order, and leave out the rest.
 Names take a regex, so localized copy does not break it.
 
-```typescript
-test('orders page structure', async ({ page }) => {
-  await page.goto('/orders');
-  await expect(page.getByRole('main')).toMatchAriaSnapshot(`
-    - heading "Orders" [level=1]
-    - list:
-      - listitem: /Order #\\d+/
-    - button /Save|Kaydet/
-  `);
-});
-```
+Error and empty states come from the network layer, not from a seeded backend.
 
-Error and empty states come from the network layer, not from a seeded backend:
-
-```typescript
-test('shows the empty state', async ({ page }) => {
-  await page.route('**/api/orders*', (route) => route.fulfill({ json: [] }));
-  await page.goto('/orders');
-  await expect(page.getByText('No orders yet')).toBeVisible();
-});
-
-test('shows the retry banner on a server error', async ({ page }) => {
-  await page.route('**/api/orders*', (route) => route.fulfill({ status: 500, body: 'boom' }));
-  await page.goto('/orders');
-  await expect(page.getByRole('button', { name: 'Retry' })).toBeVisible();
-});
-
-test('goes offline gracefully', async ({ page, context }) => {
-  await page.goto('/orders');
-  await context.setOffline(true);
-  await page.getByRole('button', { name: 'Refresh' }).click();
-  await expect(page.getByText('You are offline')).toBeVisible();
-});
-```
-
-Session expiry, countdowns and dates use the clock instead of waiting:
-
-```typescript
-test('logs out after 30 idle minutes', async ({ page }) => {
-  await page.clock.install({ time: new Date('2026-01-01T09:00:00') });
-  await page.goto('/dashboard');
-  await page.clock.fastForward('30:00');
-  await expect(page).toHaveURL('/login');
-});
-```
+Session expiry, countdowns and dates use the clock instead of waiting.
 
 The multi-agent-toolkit MCP server exposes the same capabilities to an agent
 driving a live browser (`web_route`, `web_network_state`, `web_clock`,
 `web_assert_aria`); `web_generate_locator` turns a snapshot ref into the
-`getByRole` / `getByTestId` locator to paste into a spec like the ones above.
+`getByRole` / `getByTestId` locator to paste into a spec like the ones in the reference.
+
+Code for this section: [Web testing examples](references/testing-examples.md).
 
 ## Do's
 
@@ -443,3 +264,7 @@ driving a live browser (`web_route`, `web_network_state`, `web_clock`,
 | Playwright timeout | Slow page load or wrong selector | Increase timeout, use more specific locators |
 | Snapshot test breaks on every change | Testing too much visual detail | Narrow snapshot scope or use targeted assertions |
 | "act() warning" | State update outside act | Wrap state updates in `act()` or use `findBy` queries |
+
+## References
+
+- [Web testing examples](references/testing-examples.md): open when setting up MSW handlers or writing Playwright tests.

package/pipeline/skills/shared/external/web-testing/references/testing-examples.md

@@ -0,0 +1,213 @@
+# Web testing examples
+
+<!-- toc -->
+- [MSW (Mock Service Worker)](#msw-mock-service-worker)
+- [Playwright (E2E Testing)](#playwright-e2e-testing)
+- [Structure, error states and time](#structure-error-states-and-time)
+<!-- /toc -->
+
+Full code for MSW handlers and Playwright end-to-end tests, including page objects, error states and time control. SKILL.md keeps the pyramid, the rules and troubleshooting.
+
+## MSW (Mock Service Worker)
+
+```typescript
+// src/mocks/handlers.ts
+import { http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.get('/api/users', () => {
+    return HttpResponse.json([
+      { id: '1', name: 'Alice', email: 'alice@example.com' },
+      { id: '2', name: 'Bob', email: 'bob@example.com' },
+    ]);
+  }),
+
+  http.get('/api/users/:id', ({ params }) => {
+    const { id } = params;
+    if (id === '999') {
+      return new HttpResponse(null, { status: 404 });
+    }
+    return HttpResponse.json({ id, name: 'Alice', email: 'alice@example.com' });
+  }),
+
+  http.post('/api/users', async ({ request }) => {
+    const body = await request.json();
+    return HttpResponse.json({ id: '3', ...body }, { status: 201 });
+  }),
+
+  http.delete('/api/users/:id', () => {
+    return new HttpResponse(null, { status: 204 });
+  }),
+];
+
+// src/mocks/server.ts
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);
+
+// src/test/setup.ts
+import { server } from '../mocks/server';
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
+```tsx
+// Using MSW in tests with per-test overrides
+import { http, HttpResponse } from 'msw';
+import { server } from '../mocks/server';
+
+describe('UserList', () => {
+  it('shows error state on API failure', async () => {
+    // Override handler for this test only
+    server.use(
+      http.get('/api/users', () => {
+        return new HttpResponse(null, { status: 500 });
+      })
+    );
+
+    render(<UserList />);
+    expect(await screen.findByText(/failed to load/i)).toBeInTheDocument();
+  });
+});
+```
+
+## Playwright (E2E Testing)
+
+```typescript
+// playwright.config.ts
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'mobile', use: { ...devices['iPhone 14'] } },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});
+```
+
+```typescript
+// e2e/auth.spec.ts
+import { test, expect } from '@playwright/test';
+
+test.describe('Authentication', () => {
+  test('successful login redirects to dashboard', async ({ page }) => {
+    await page.goto('/login');
+
+    await page.getByLabel('Email').fill('user@example.com');
+    await page.getByLabel('Password').fill('password123');
+    await page.getByRole('button', { name: 'Sign in' }).click();
+
+    await expect(page).toHaveURL('/dashboard');
+    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
+  });
+
+  test('shows error for invalid credentials', async ({ page }) => {
+    await page.goto('/login');
+
+    await page.getByLabel('Email').fill('wrong@example.com');
+    await page.getByLabel('Password').fill('wrongpass');
+    await page.getByRole('button', { name: 'Sign in' }).click();
+
+    await expect(page.getByText('Invalid credentials')).toBeVisible();
+    await expect(page).toHaveURL('/login');
+  });
+});
+
+// e2e/checkout.spec.ts
+test('completes checkout flow', async ({ page }) => {
+  await page.goto('/products');
+
+  // Add item to cart
+  await page.getByRole('button', { name: 'Add to cart' }).first().click();
+  await expect(page.getByTestId('cart-count')).toHaveText('1');
+
+  // Navigate to checkout
+  await page.getByRole('link', { name: 'Cart' }).click();
+  await page.getByRole('button', { name: 'Checkout' }).click();
+
+  // Fill shipping info
+  await page.getByLabel('Address').fill('123 Main St');
+  await page.getByLabel('City').fill('New York');
+  await page.getByRole('button', { name: 'Place order' }).click();
+
+  // Verify confirmation
+  await expect(page.getByText('Order confirmed')).toBeVisible();
+});
+```
+
+### Structure, error states and time
+
+`toMatchAriaSnapshot` checks a region's structure in one assertion. The template
+is a subset by default: list what must be there, in order, and leave out the rest.
+Names take a regex, so localized copy does not break it.
+
+```typescript
+test('orders page structure', async ({ page }) => {
+  await page.goto('/orders');
+  await expect(page.getByRole('main')).toMatchAriaSnapshot(`
+    - heading "Orders" [level=1]
+    - list:
+      - listitem: /Order #\\d+/
+    - button /Save|Kaydet/
+  `);
+});
+```
+
+Error and empty states come from the network layer, not from a seeded backend:
+
+```typescript
+test('shows the empty state', async ({ page }) => {
+  await page.route('**/api/orders*', (route) => route.fulfill({ json: [] }));
+  await page.goto('/orders');
+  await expect(page.getByText('No orders yet')).toBeVisible();
+});
+
+test('shows the retry banner on a server error', async ({ page }) => {
+  await page.route('**/api/orders*', (route) => route.fulfill({ status: 500, body: 'boom' }));
+  await page.goto('/orders');
+  await expect(page.getByRole('button', { name: 'Retry' })).toBeVisible();
+});
+
+test('goes offline gracefully', async ({ page, context }) => {
+  await page.goto('/orders');
+  await context.setOffline(true);
+  await page.getByRole('button', { name: 'Refresh' }).click();
+  await expect(page.getByText('You are offline')).toBeVisible();
+});
+```
+
+Session expiry, countdowns and dates use the clock instead of waiting:
+
+```typescript
+test('logs out after 30 idle minutes', async ({ page }) => {
+  await page.clock.install({ time: new Date('2026-01-01T09:00:00') });
+  await page.goto('/dashboard');
+  await page.clock.fastForward('30:00');
+  await expect(page).toHaveURL('/login');
+});
+```
+
+The multi-agent-toolkit MCP server exposes the same capabilities to an agent
+driving a live browser (`web_route`, `web_network_state`, `web_clock`,
+`web_assert_aria`); `web_generate_locator` turns a snapshot ref into the
+`getByRole` / `getByTestId` locator to paste into a spec like the ones above.