Description

Storybook+Playwright tests cannot validate analytics calls because MSW doesn't expose request assertions and Playwright's page.waitForRequest() cannot access request payloads due to chromium#6479.

Changes

Enhanced EndpointHarness with request capture

All MSW endpoints now automatically capture requests with:

• getCapturedRequests() / getLastCapturedRequest() - Access captured request data (URL, method, headers, parsed body, timestamp)
• getCapturedRequestCount() - Get request count
• waitForNextRequest(timeout) - Async wait for next request
• clearCapturedRequests() - Clear captured requests

Added MockAnalyticsApi

New mock for analytics endpoint *.analytics.org.coveo.com/rest/organizations/:orgId/events/v1:

import { MockAnalyticsApi } from '@/storybook-utils/api/analytics/mock';

const analyticsHarness = new MockAnalyticsApi();

const meta: Meta = {
  parameters: {
    msw: {
      handlers: [...analyticsHarness.handlers],
    },
  },
};

export const TracksClick: Story = {
  play: async ({ canvasElement }) => {
    analyticsHarness.clearAllRequests();
    
    await userEvent.click(element);
    
    const request = await analyticsHarness.eventsEndpoint.waitForNextRequest();
    expect(request.body).toMatchObject({
      eventType: 'ec.productClick',
      eventValue: 'expected-value',
    });
  },
};

Added AnalyticsHelper for Playwright e2e tests

New helper class for accessing captured requests in Playwright e2e tests that load stories in an iframe:

import { AnalyticsHelper } from '@/playwright-utils/analytics-helper';

test('should send analytics', async ({ productLink, page }) => {
  const analyticsHelper = new AnalyticsHelper(page);
  await analyticsHelper.clearRequests();
  
  await productLink.anchor().first().click();
  
  const request = await analyticsHelper.waitForRequest();
  expect(request.body).toMatchObject({
    eventType: 'ec.productClick',
  });
});

The AnalyticsHelper bridges the MSW harness running in the Storybook iframe to Playwright test context via page.evaluate(), providing async methods: clearRequests(), getRequests(), getLastRequest(), getRequestCount(), and waitForRequest().

Documentation and examples

• ANALYTICS_TRACKING.md - Comprehensive guide with migration examples for both Storybook play functions and Playwright e2e tests
• README.md / USAGE.md - Updated with request tracking patterns
• storybook-pages/examples/analytics-tracking.new.stories.tsx - Working examples
• atomic-product-link.e2e.ts - Added new test demonstrating Playwright e2e usage

Request tracking works for all endpoints, not just analytics. 100% backward compatible. Supports both Storybook play functions and Playwright e2e tests in iframe context.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.