The Enterprise Frontend Blueprint - PART 3: Testing Strategy for Large Frontend Monorepos

// libs/payments/data-access/src/payment.schema.ts (Zod 4)
import { z } from 'zod';

export const PaymentStatusSchema = z.enum(['pending', 'authorized', 'settled', 'failed', 'reversed']);

export const PaymentSchema = z.object({
  id: z.string().regex(/^pmt_[A-Za-z0-9]+$/),
  fromAccountId: z.string(),
  payeeId: z.string(),
  // Money is an integer in minor units (pence, cents) plus an ISO 4217 code.
  // Floating-point amounts are how rounding errors reach customer statements.
  amountMinor: z.number().int().positive(),
  currency: z.string().regex(/^[A-Z]{3}$/),
  status: PaymentStatusSchema,
  reference: z.string().max(18),
  createdAt: z.iso.datetime(),
});

export const CreatePaymentRequestSchema = PaymentSchema.pick({
  fromAccountId: true,
  payeeId: true,
  amountMinor: true,
  currency: true,
  reference: true,
});

export const PayeeSchema = z.object({ id: z.string(), name: z.string() });
export const ApiErrorSchema = z.object({ code: z.string(), message: z.string().optional() });

export type Payment = z.infer<typeof PaymentSchema>;
export type Payee = z.infer<typeof PayeeSchema>;
export type CreatePaymentRequest = z.infer<typeof CreatePaymentRequestSchema>;

// libs/payments/testing/fixtures/src/payment.builder.ts
import { Faker, en } from '@faker-js/faker';
import { PaymentSchema, type Payment } from '@acme/payments/data-access';

// Fixtures use obviously fake identifiers. Never copy real account numbers,
// card numbers, or customer names into test data, even "just for a quick test".
export class PaymentBuilder {
  private data: Payment;

  // One seeded generator per builder, so output never depends on test order.
  constructor(seed = 1) {
    const faker = new Faker({ locale: [en] });
    faker.seed(seed);
    this.data = {
      id: `pmt_${faker.string.alphanumeric(10)}`,
      fromAccountId: 'acc_test_001',
      payeeId: 'payee_test_001',
      amountMinor: faker.number.int({ min: 100, max: 500_000 }),
      currency: 'GBP',
      status: 'pending',
      reference: `INV-${faker.number.int({ min: 1000, max: 9999 })}`,
      createdAt: '2026-09-22T10:15:00.000Z',
    };
  }

  withId(id: string): this {
    this.data = { ...this.data, id };
    return this;
  }

  withStatus(status: Payment['status']): this {
    this.data = { ...this.data, status };
    return this;
  }

  withAmount(amountMinor: number, currency = 'GBP'): this {
    this.data = { ...this.data, amountMinor, currency };
    return this;
  }

  withPayee(payeeId: string): this {
    this.data = { ...this.data, payeeId };
    return this;
  }

  // Parsing here turns a stale fixture into a failure at the point of creation.
  build(): Payment {
    return PaymentSchema.parse(this.data);
  }
}

export const aPayment = (seed?: number) => new PaymentBuilder(seed);

// libs/payments/testing/msw/src/handlers/payments.handlers.ts (MSW 2.x)
import { http, HttpResponse } from 'msw';
import { CreatePaymentRequestSchema } from '@acme/payments/data-access';
import { aPayment } from '@acme/payments/testing/fixtures';

export const paymentsHandlers = [
  http.get('/api/v1/payees', () =>
    HttpResponse.json({
      items: [
        { id: 'payee_test_001', name: 'Northwind Utilities' },
        { id: 'payee_test_002', name: 'Contoso Lettings' },
      ],
    }),
  ),

  http.get('/api/v1/payments', () =>
    HttpResponse.json({
      items: [aPayment(1).withStatus('settled').build(), aPayment(2).build()],
    }),
  ),

  http.get('/api/v1/payments/:id', ({ params }) =>
    HttpResponse.json(aPayment().withId(String(params.id)).build()),
  ),

  http.post('/api/v1/payments', async ({ request }) => {
    // Mirrors the provider's documented rule: no key, no payment.
    if (!request.headers.get('Idempotency-Key')) {
      return HttpResponse.json({ code: 'missing_idempotency_key' }, { status: 400 });
    }
    // parse() throws on a malformed body; MSW turns the throw into a 500,
    // so a wrong request shape fails the test instead of passing silently.
    const body = CreatePaymentRequestSchema.parse(await request.json());
    const payment = aPayment().withAmount(body.amountMinor, body.currency).withPayee(body.payeeId).build();
    return HttpResponse.json(payment, { status: 201 });
  }),
];

// libs/payments/testing/msw/src/scenarios.ts
import { delay, http, HttpResponse, type RequestHandler } from 'msw';
import { aPayment } from '@acme/payments/testing/fixtures';
import { paymentsSecurity } from './security.scenarios'; // added in the security section

type PaymentScenario =
  | 'happy' | 'empty' | 'insufficient-funds' | 'duplicate-request'
  | 'error-500' | 'slow' | 'unauthorized';

const payments: Record<PaymentScenario, RequestHandler[]> = {
  happy: [],
  empty: [http.get('/api/v1/payments', () => HttpResponse.json({ items: [] }))],
  'insufficient-funds': [
    http.post('/api/v1/payments', () =>
      HttpResponse.json(
        { code: 'insufficient_funds', message: 'Available balance is lower than the payment amount.' },
        { status: 422 },
      ),
    ),
  ],
  'duplicate-request': [
    http.post('/api/v1/payments', () =>
      HttpResponse.json({ code: 'idempotency_key_reused' }, { status: 409 }),
    ),
  ],
  'error-500': [http.all('/api/v1/*', () => HttpResponse.json({ code: 'internal' }, { status: 500 }))],
  slow: [
    http.post('/api/v1/payments', async () => {
      await delay(2500);
      return HttpResponse.json(aPayment().build(), { status: 201 });
    }),
  ],
  unauthorized: [http.all('/api/v1/*', () => HttpResponse.json({ code: 'unauthorized' }, { status: 401 }))],
};

export const scenarios = { payments, paymentsSecurity };
type Scenarios = typeof scenarios;

// Accepts the Node server or the browser worker; both expose use().
export function applyScenario<D extends keyof Scenarios>(
  target: { use: (...handlers: RequestHandler[]) => void },
  domain: D,
  name: keyof Scenarios[D],
): void {
  target.use(...(scenarios[domain][name] as RequestHandler[]));
}

// libs/payments/feature-transfer/vitest.config.ts (Vitest 3.2+ "projects")
// Angular workspaces: use the @angular/build:unit-test builder instead (see note below).
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      {
        extends: true,
        test: {
          name: 'unit',
          environment: 'node',
          include: ['src/**/*.spec.ts'],
          exclude: ['src/**/*.integration.spec.ts'],
        },
      },
      {
        extends: true,
        test: {
          name: 'integration',
          environment: 'jsdom',
          include: ['src/**/*.integration.spec.ts'],
          setupFiles: ['../testing/msw/src/vitest.setup.ts'],
        },
      },
    ],
  },
});

// libs/payments/testing/drivers/src/transfer.driver.ts
import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';

export class TransferDriver {
  private readonly user = userEvent.setup();

  async choosePayee(name: string): Promise<void> {
    await screen.findByRole('option', { name }); // payees load asynchronously
    await this.user.selectOptions(screen.getByLabelText(/payee/i), name);
  }

  async fillAmount(value: string): Promise<void> {
    const input = screen.getByLabelText(/amount/i);
    await this.user.clear(input);
    await this.user.type(input, value);
  }

  async submit(): Promise<void> {
    await this.user.click(this.submitButton());
  }

  isSubmitDisabled(): boolean {
    return this.submitButton().hasAttribute('disabled');
  }

  amountValue(): string {
    return (screen.getByLabelText(/amount/i) as HTMLInputElement).value;
  }

  async statusText(): Promise<string> {
    return (await screen.findByRole('status')).textContent?.trim() ?? '';
  }

  async alertText(): Promise<string> {
    return (await screen.findByRole('alert')).textContent?.trim() ?? '';
  }

  private submitButton(): HTMLElement {
    return screen.getByRole('button', { name: /send payment/i });
  }
}

// libs/payments/feature-transfer/src/transfer-form.integration.spec.ts
import { describe, expect, it } from 'vitest';
import { applyScenario, server } from '@acme/payments/testing/msw';
import { TransferDriver } from '@acme/payments/testing/drivers';
import { mountTransferForm } from './testing/mount-transfer-form';

describe('Transfer form', () => {
  it('confirms a submitted payment', async () => {
    await mountTransferForm();
    const transfer = new TransferDriver();

    await transfer.choosePayee('Northwind Utilities');
    await transfer.fillAmount('250.00');
    await transfer.submit();

    expect(await transfer.statusText()).toMatch(/payment submitted/i);
  });

  it('explains insufficient funds and keeps the entered amount', async () => {
    applyScenario(server, 'payments', 'insufficient-funds');
    await mountTransferForm();
    const transfer = new TransferDriver();

    await transfer.choosePayee('Northwind Utilities');
    await transfer.fillAmount('250.00');
    await transfer.submit();

    expect(await transfer.alertText()).toMatch(/available balance/i);
    expect(transfer.amountValue()).toBe('250.00');
  });

  it('blocks a second submission while the first is in flight', async () => {
    applyScenario(server, 'payments', 'slow');
    await mountTransferForm();
    const transfer = new TransferDriver();

    await transfer.choosePayee('Northwind Utilities');
    await transfer.fillAmount('250.00');
    await transfer.submit();

    expect(transfer.isSubmitDisabled()).toBe(true);
  });
});

{
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": ["default", "!{projectRoot}/**/*.spec.ts", "!{projectRoot}/vitest.config.ts"],
    "sharedGlobals": ["{workspaceRoot}/tsconfig.base.json"],
    "apiContract": ["{workspaceRoot}/contracts/openapi/**/*"]
  },
  "targetDefaults": {
    "test-unit": {
      "cache": true,
      "inputs": ["default", "^production"]
    },
    "test-integration": {
      "cache": true,
      "inputs": ["default", "^production", "apiContract"]
    },
    "test-contract": {
      "cache": true,
      "inputs": ["default", "^production", "apiContract"],
      "outputs": ["{projectRoot}/pacts"]
    },
    "e2e": {
      "cache": false
    }
  }
}

// libs/payments/data-access/src/payments-client.ts
import type { z } from 'zod';
import { ApiContractError, reportContractViolation } from '@acme/shared/api-client'; // from Part 1
import { ApiErrorSchema, PaymentSchema, type CreatePaymentRequest, type Payment } from './payment.schema';

export class PaymentsApiError extends Error {
  constructor(readonly status: number, readonly code: string) {
    super(code);
  }
}

// Same safeParse-report-throw pattern as Part 1's validatedGet.
function validate<T extends z.ZodType>(schema: T, data: unknown, endpoint: string): z.infer<T> {
  const result = schema.safeParse(data);
  if (!result.success) {
    reportContractViolation(endpoint, result.error);
    throw new ApiContractError(`Contract violation: ${endpoint}`, result.error);
  }
  return result.data;
}

// Framework-agnostic fetch client; Angular apps can wrap it in a service.
export function createPaymentsClient(baseUrl = globalThis.location?.origin ?? '') {
  async function send(path: string, init?: RequestInit): Promise<unknown> {
    const res = await fetch(`${baseUrl}${path}`, init);
    const body: unknown = await res.json();
    if (!res.ok) {
      const error = ApiErrorSchema.safeParse(body);
      throw new PaymentsApiError(res.status, error.success ? error.data.code : 'unknown_error');
    }
    return body;
  }

  return {
    async createPayment(input: CreatePaymentRequest, idempotencyKey: string): Promise<Payment> {
      const body = await send('/api/v1/payments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Idempotency-Key': idempotencyKey },
        body: JSON.stringify(input),
      });
      return validate(PaymentSchema, body, 'POST /api/v1/payments');
    },
    async getPayment(id: string): Promise<Payment> {
      const body = await send(`/api/v1/payments/${encodeURIComponent(id)}`);
      return validate(PaymentSchema, body, 'GET /api/v1/payments/:id');
    },
  };
}

// libs/payments/data-access/src/payments.pact.spec.ts (Pact JS, V4 spec)
import path from 'node:path';
import { describe, expect, it } from 'vitest';
import { MatchersV3, PactV4 } from '@pact-foundation/pact';
import { createPaymentsClient, PaymentsApiError } from './payments-client';

const { datetime, integer, like, regex } = MatchersV3;
const UUID = '^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$';
const KEY = '8f14e45f-ceea-4e6a-9f3a-1d2c3b4a5e6f';
const input = { fromAccountId: 'acc_001', payeeId: 'payee_77', amountMinor: 25000, currency: 'GBP', reference: 'INV-1042' };

const pact = new PactV4({
  consumer: 'payments-web',
  provider: 'payments-api',
  dir: path.resolve(process.cwd(), 'pacts'),
});

describe('payments-api contract', () => {
  it('creates a payment when funds are available', async () => {
    await pact
      .addInteraction()
      .given('account acc_001 has an available balance of at least 25000 minor units')
      .uponReceiving('a request to create a GBP payment')
      .withRequest('POST', '/api/v1/payments', (builder) => {
        builder.headers({ 'Content-Type': 'application/json', 'Idempotency-Key': regex(UUID, KEY) });
        builder.jsonBody({ ...input, amountMinor: integer(25000), reference: like('INV-1042') });
      })
      .willRespondWith(201, (builder) => {
        builder.headers({ 'Content-Type': 'application/json' });
        builder.jsonBody({
          id: regex('^pmt_[A-Za-z0-9]+$', 'pmt_9f2c1a7b3d'), amountMinor: integer(25000),
          fromAccountId: like('acc_001'), payeeId: like('payee_77'),
          currency: regex('^[A-Z]{3}$', 'GBP'), status: regex('^(pending|authorized)$', 'pending'),
          reference: like('INV-1042'), createdAt: datetime("yyyy-MM-dd'T'HH:mm:ss.SSSX", '2026-09-22T10:15:00.000Z'),
        });
      })
      .executeTest(async (mockServer) => {
        const payment = await createPaymentsClient(mockServer.url).createPayment(input, KEY);
        expect(payment.status).toBe('pending');
      });
  });

  it('rejects a payment larger than the available balance', async () => {
    await pact
      .addInteraction()
      .given('account acc_001 has an available balance below 25000 minor units')
      .uponReceiving('a request to create a payment that exceeds the balance')
      .withRequest('POST', '/api/v1/payments', (builder) => {
        builder.headers({ 'Content-Type': 'application/json', 'Idempotency-Key': regex(UUID, KEY) });
        builder.jsonBody(input);
      })
      .willRespondWith(422, (builder) => {
        builder.jsonBody({ code: 'insufficient_funds', message: like('Available balance is lower than the payment amount.') });
      })
      .executeTest(async (mockServer) => {
        const call = createPaymentsClient(mockServer.url).createPayment(input, KEY);
        await expect(call).rejects.toBeInstanceOf(PaymentsApiError);
      });
  });
});

# .github/workflows/contracts.yml
name: contracts
on:
  pull_request:
  push:
    branches: [main]

env:
  PACT_BROKER_BASE_URL: ${{ vars.PACT_BROKER_BASE_URL }}
  PACT_BROKER_TOKEN: ${{ secrets.PACT_BROKER_TOKEN }}
  VERSION: ${{ github.event.pull_request.head.sha || github.sha }}
  BRANCH: ${{ github.head_ref || github.ref_name }}
  # Pinned through a repository variable; Part 2's rule of no floating tags applies here too.
  PACT_CLI: pactfoundation/pact-cli:${{ vars.PACT_CLI_TAG }}

jobs:
  consumer-contracts:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: pnpm/action-setup@v4
        with:
          version: 10.17.1 # pinned, as in Part 2
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx run payments-data-access:test-contract

      - name: Publish pacts
        run: >
          docker run --rm -v "$PWD:$PWD" -w "$PWD"
          -e PACT_BROKER_BASE_URL -e PACT_BROKER_TOKEN "$PACT_CLI"
          publish libs/payments/data-access/pacts
          --consumer-app-version "$VERSION" --branch "$BRANCH"

      - name: Can payments-web deploy to production?
        run: >
          docker run --rm -e PACT_BROKER_BASE_URL -e PACT_BROKER_TOKEN "$PACT_CLI"
          broker can-i-deploy --pacticipant payments-web --version "$VERSION"
          --to-environment production --retry-while-unknown 12 --retry-interval 10

// orval.config.ts (Orval 8)
import { defineConfig } from 'orval';

const spec = './contracts/openapi/payments.yaml';
const endpoints = './libs/payments/data-access/src/generated/endpoints';

export default defineConfig({
  paymentsClient: {
    input: { target: spec },
    output: {
      mode: 'tags-split',
      client: 'fetch', // 'angular' generates HttpClient services instead
      target: endpoints,
      schemas: './libs/payments/data-access/src/generated/model',
      mock: true, // emits *.msw.ts handlers next to each endpoint file
    },
  },
  paymentsZod: {
    input: { target: spec },
    output: {
      mode: 'tags-split',
      client: 'zod',
      target: endpoints,
      fileExtension: '.zod.ts',
    },
  },
});

// apps/banking-web-e2e/src/payments/cut-off-and-status.spec.ts
import { expect, test } from '@playwright/test';

// playwright.config.ts sets timezoneId: 'Europe/London', so these times mean
// London time on every CI runner. September dates are BST (UTC+1).
test.describe('Payment timing', () => {
  test('a payment after the cut-off shows the next business day', async ({ page }) => {
    await page.clock.setFixedTime(new Date('2026-09-25T16:31:00Z')); // Friday 17:31 London
    await page.goto('/payments/new');
    await expect(page.getByText(/arrives monday 28 september/i)).toBeVisible();
  });

  test('status polling reaches settled without real waiting', async ({ page }) => {
    await page.clock.install({ time: new Date('2026-09-22T09:00:00Z') });
    const statuses = ['pending', 'pending', 'settled'];

    await page.route('**/api/v1/payments/pmt_test0001', (route) =>
      route.fulfill({
        json: {
          id: 'pmt_test0001',
          fromAccountId: 'acc_test_001',
          payeeId: 'payee_test_001',
          amountMinor: 25000,
          currency: 'GBP',
          status: statuses.shift() ?? 'settled',
          reference: 'INV-1042',
          createdAt: '2026-09-22T09:00:00.000Z',
        },
      }),
    );

    await page.goto('/payments/pmt_test0001');
    await expect(page.getByRole('status')).toHaveText(/pending/i);

    // The page polls every 5 seconds. Advance the clock instead of sleeping.
    await page.clock.runFor(10_000);
    await expect(page.getByRole('status')).toHaveText(/settled/i);
  });
});

// apps/banking-web-e2e/playwright.config.ts (Playwright 1.61+)
// Run from the project root (Nx sets cwd to {projectRoot}).
import { readFileSync } from 'node:fs';
import { defineConfig, devices } from '@playwright/test';

type QuarantineEntry = { title: string; owner: string; ticket: string; expiresAt: string };
const { entries } = JSON.parse(readFileSync('tests/quarantine.json', 'utf8')) as { entries: QuarantineEntry[] };

const escape = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// Expired entries drop out, so the test blocks again until someone acts on it.
const active = entries.filter((entry) => new Date(entry.expiresAt) > new Date());
const quarantined = active.length > 0 ? new RegExp(active.map((e) => escape(e.title)).join('|')) : /$^/;

export default defineConfig({
  testDir: './src',
  retries: process.env.CI ? 1 : 0, // one retry lets Playwright label a result as flaky
  failOnFlakyTests: process.env.PW_BLOCKING === '1',
  reporter: [['list'], ['json', { outputFile: 'results/report.json' }]],
  use: {
    baseURL: process.env.E2E_BASE_URL ?? 'http://localhost:4200',
    trace: 'on-first-retry',
    timezoneId: 'Europe/London',
    locale: 'en-GB',
    reducedMotion: 'reduce',
  },
  expect: { toHaveScreenshot: { animations: 'disabled' } },
  projects: [
    { name: 'blocking', use: { ...devices['Desktop Chrome'] }, grepInvert: quarantined },
    { name: 'quarantine', use: { ...devices['Desktop Chrome'] }, grep: quarantined },
  ],
});

# .github/workflows/e2e.yml
name: e2e
on:
  pull_request:
  push:
    branches: [main]

env:
  E2E_BASE_URL: ${{ vars.E2E_PREVIEW_URL }}

jobs:
  e2e:
    strategy:
      fail-fast: false
      matrix:
        project: [blocking, quarantine]
    runs-on: ubuntu-latest
    # The quarantine suite reports but never fails the pull request.
    continue-on-error: ${{ matrix.project == 'quarantine' }}
    env:
      PW_BLOCKING: ${{ matrix.project == 'blocking' && vars.PW_BLOCKING || '0' }}
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 10.17.1
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps chromium
      - name: Run ${{ matrix.project }} suite
        working-directory: apps/banking-web-e2e
        run: pnpm exec playwright test --project=${{ matrix.project }} --pass-with-no-tests
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: e2e-${{ matrix.project }}-${{ github.sha }}-${{ github.run_attempt }}
          path: apps/banking-web-e2e/results/report.json
          retention-days: 14

{
  "$schema": "./quarantine.schema.json",
  "entries": [
    {
      "title": "Payment status shows settled after polling",
      "file": "src/payments/status.spec.ts",
      "owner": "@acme/payments-web",
      "ticket": "PAY-2141",
      "reason": "Polling races with status updates on shared staging",
      "addedAt": "2026-09-15",
      "expiresAt": "2026-10-15"
    },
    {
      "title": "Statements downloads a PDF for last month",
      "file": "src/accounts/statements.spec.ts",
      "owner": "@acme/accounts-web",
      "ticket": "ACC-988",
      "reason": "Download event missed under CPU contention on 2-core runners",
      "addedAt": "2026-09-18",
      "expiresAt": "2026-10-18"
    }
  ]
}

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "E2E quarantine list",
  "type": "object",
  "required": ["entries"],
  "properties": {
    "$schema": { "type": "string" },
    "entries": {
      "type": "array",
      "maxItems": 25,
      "items": {
        "type": "object",
        "additionalProperties": false,
        "required": ["title", "file", "owner", "ticket", "reason", "addedAt", "expiresAt"],
        "properties": {
          "title": { "type": "string", "minLength": 5 },
          "file": { "type": "string", "pattern": "\\.spec\\.ts$" },
          "owner": { "type": "string", "pattern": "^@[a-z0-9-]+/[a-z0-9-]+$" },
          "ticket": { "type": "string", "pattern": "^[A-Z]+-[0-9]+$" },
          "reason": { "type": "string", "minLength": 15 },
          "addedAt": { "type": "string", "format": "date" },
          "expiresAt": { "type": "string", "format": "date" }
        }
      }
    }
  }
}

// scripts/detect-flaky.ts
// Usage: node scripts/detect-flaky.ts results/*.json > flaky-candidates.json
import { readFileSync } from 'node:fs';

type Result = { error?: { message?: string } };
type PwTest = { status: 'expected' | 'unexpected' | 'flaky' | 'skipped'; results: Result[] };
type Spec = { title: string; tests: PwTest[] };
type Suite = { title: string; specs?: Spec[]; suites?: Suite[] };
type Stat = { runs: number; flaky: number; failed: number; signatures: Set<string> };

const stats = new Map<string, Stat>();

// Strip volatile details so one root cause produces one signature.
const fingerprint = (message = '') =>
  (message.split('\n')[0] ?? '')
    .replace(/\u001b\[[0-9;]*m/g, '')
    .replace(/\b[0-9a-f]{8,}\b/gi, '<id>')
    .replace(/\d+(\.\d+)?m?s\b/g, '<time>')
    .replace(/\d+/g, '<n>')
    .slice(0, 160);

function walk(suite: Suite, path: string[], depth: number): void {
  // depth 0 is the file; quarantine titles use describe + test titles only.
  const here = depth > 0 && suite.title ? [...path, suite.title] : path;
  for (const spec of suite.specs ?? []) {
    for (const test of spec.tests) {
      const key = [...here, spec.title].join(' ');
      const stat = stats.get(key) ?? { runs: 0, flaky: 0, failed: 0, signatures: new Set<string>() };
      stat.runs += 1;
      if (test.status === 'flaky') stat.flaky += 1;
      if (test.status === 'unexpected') stat.failed += 1;
      for (const result of test.results) if (result.error?.message) stat.signatures.add(fingerprint(result.error.message));
      stats.set(key, stat);
    }
  }
  for (const child of suite.suites ?? []) walk(child, here, depth + 1);
}

for (const file of process.argv.slice(2)) {
  const report = JSON.parse(readFileSync(file, 'utf8')) as { suites: Suite[] };
  for (const suite of report.suites) walk(suite, [], 0);
}

// Passed on retry, or failed in some runs and passed in others: flaky by Google's definition.
const candidates = [...stats]
  .filter(([, s]) => s.flaky > 0 || (s.failed > 0 && s.failed < s.runs))
  .map(([title, s]) => ({ title, runs: s.runs, flakyRate: Number(((s.flaky + s.failed) / s.runs).toFixed(3)), signatures: [...s.signatures] }))
  .sort((a, b) => b.flakyRate - a.flakyRate);

console.log(JSON.stringify({ generatedAt: new Date().toISOString(), candidates }, null, 2));

# .github/workflows/burn-in.yml
name: burn-in
on:
  pull_request:
    paths: ['apps/banking-web-e2e/**']

jobs:
  burn-in:
    runs-on: ubuntu-latest
    env:
      E2E_BASE_URL: ${{ vars.E2E_PREVIEW_URL }}
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: pnpm/action-setup@v4
        with:
          version: 10.17.1 # pinned, as in Part 2
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps chromium

      - name: Validate quarantine list
        run: >
          pnpm exec ajv validate --spec=draft2020 -c ajv-formats
          -s apps/banking-web-e2e/tests/quarantine.schema.json
          -d apps/banking-web-e2e/tests/quarantine.json

      - name: Run changed specs ten times
        working-directory: apps/banking-web-e2e
        run: >
          pnpm exec playwright test --project=blocking
          --only-changed=origin/${{ github.base_ref }}
          --repeat-each=10 --retries=0 --workers=2 --pass-with-no-tests

// libs/payments/testing/msw/src/security.scenarios.ts (registered in scenarios.ts)
import { http, HttpResponse, type RequestHandler } from 'msw';
import { aPayment } from '@acme/payments/testing/fixtures';

export type SecurityScenario =
  | 'xss-payee' | 'amount-mismatch' | 'lost-response-once'
  | 'session-expired' | 'step-up-required' | 'rate-limited';

export const paymentsSecurity: Record<SecurityScenario, RequestHandler[]> = {
  'xss-payee': [
    http.get('/api/v1/payees', () =>
      HttpResponse.json({ items: [{ id: 'payee_test_001', name: '<img src=x onerror=alert(1)>Northwind' }] }),
    ),
  ],
  // The server accepted 2.50 while the customer typed 250.00.
  'amount-mismatch': [
    http.post('/api/v1/payments', () => HttpResponse.json(aPayment().withAmount(250).build(), { status: 201 })),
  ],
  // First attempt fails at the network level, later attempts reach the default handler.
  'lost-response-once': [http.post('/api/v1/payments', () => HttpResponse.error(), { once: true })],
  'session-expired': [
    http.all('/api/v1/*', () => HttpResponse.json({ code: 'session_expired' }, { status: 401 })),
  ],
  'step-up-required': [
    http.post('/api/v1/payments', () =>
      HttpResponse.json({ code: 'step_up_required', message: 'Additional verification needed.' }, { status: 403 }),
    ),
  ],
  'rate-limited': [
    http.post('/api/v1/payments', () =>
      HttpResponse.json({ code: 'rate_limited' }, { status: 429, headers: { 'Retry-After': '30' } }),
    ),
  ],
};

// libs/payments/feature-transfer/src/transfer-form.security.integration.spec.ts
import { afterEach, describe, expect, it } from 'vitest';
import { applyScenario, server } from '@acme/payments/testing/msw';
import { TransferDriver } from '@acme/payments/testing/drivers';
import { mountTransferForm } from './testing/mount-transfer-form';

describe('Transfer form security behaviour', () => {
  afterEach(() => server.events.removeAllListeners());

  it('renders a hostile payee name as text', async () => {
    applyScenario(server, 'paymentsSecurity', 'xss-payee');
    await mountTransferForm();
    const transfer = new TransferDriver();

    await transfer.choosePayee('<img src=x onerror=alert(1)>Northwind');
    await transfer.fillAmount('10.00');
    await transfer.submit();

    expect(await transfer.statusText()).toContain('<img src=x onerror=alert(1)>Northwind');
    expect(document.querySelector('img[src="x"]')).toBeNull();
  });

  it('never reports success when the confirmed amount differs', async () => {
    applyScenario(server, 'paymentsSecurity', 'amount-mismatch');
    await mountTransferForm();
    const transfer = new TransferDriver();

    await transfer.choosePayee('Northwind Utilities');
    await transfer.fillAmount('250.00');
    await transfer.submit();

    expect(await transfer.alertText()).toMatch(/£2\.50/);
    expect(document.querySelector('[role="status"]')?.textContent ?? '').not.toMatch(/submitted/i);
  });

  it('reuses the idempotency key when the customer retries', async () => {
    const keys: string[] = [];
    server.events.on('request:start', ({ request }) => {
      if (request.method === 'POST') keys.push(request.headers.get('Idempotency-Key') ?? 'missing');
    });
    applyScenario(server, 'paymentsSecurity', 'lost-response-once');
    await mountTransferForm();
    const transfer = new TransferDriver();

    await transfer.choosePayee('Northwind Utilities');
    await transfer.fillAmount('250.00');
    await transfer.submit();
    await transfer.alertText(); // network error shown, form still filled
    await transfer.submit();
    await transfer.statusText();

    expect(keys).toHaveLength(2);
    expect(keys[0]).toBe(keys[1]);
  });
});

// apps/banking-web-e2e/src/security/payment-page-scripts.spec.ts
import { readFileSync } from 'node:fs';
import { expect, test } from '@playwright/test';

type Inventory = { page: string; allowed: { prefix: string; owner: string; justification: string }[] };
const inventory = JSON.parse(readFileSync('src/security/payment-page-scripts.json', 'utf8')) as Inventory;

test('payment page loads only inventoried scripts and sends a strict CSP', async ({ page }) => {
  const scripts = new Set<string>();
  page.on('request', (request) => {
    if (request.resourceType() === 'script') {
      const url = new URL(request.url());
      scripts.add(`${url.origin}${url.pathname}`);
    }
  });

  const response = await page.goto(inventory.page);
  // Wait for late-loading tags too; this is one of the few places networkidle is worth it.
  await page.waitForLoadState('networkidle');

  const csp = response?.headers()['content-security-policy'] ?? '';
  const scriptSrc = csp.split(';').map((d) => d.trim()).find((d) => d.startsWith('script-src')) ?? '';
  expect(scriptSrc, 'payment page must send a script-src policy').not.toBe('');
  // A strict CSP uses nonces or hashes. 'unsafe-inline' may still appear as a fallback
  // for old browsers, which modern browsers ignore when a nonce or hash is present.
  expect(scriptSrc).toMatch(/'nonce-[^']+'|'sha(256|384|512)-/);

  const unexpected = [...scripts].filter((src) => !inventory.allowed.some((a) => src.startsWith(a.prefix)));
  expect(unexpected, 'scripts missing from the payment page inventory').toEqual([]);

  // Inline scripts must carry the per-response nonce issued with the CSP.
  await expect(page.locator('script:not([src]):not([nonce])')).toHaveCount(0);
});

{
  "overrides": [
    {
      "files": ["*.ts"],
      "excludedFiles": ["*.spec.ts"],
      "rules": {
        "@nx/enforce-module-boundaries": ["error", {
          "depConstraints": [
            { "sourceTag": "type:testing", "onlyDependOnLibsWithTags": ["type:testing", "type:data-access", "type:util"] },
            { "sourceTag": "type:feature", "onlyDependOnLibsWithTags": ["type:ui", "type:util", "type:data-access"] }
          ]
        }]
      }
    },
    {
      "files": ["*.spec.ts"],
      "rules": {
        "@nx/enforce-module-boundaries": ["error", {
          "depConstraints": [
            { "sourceTag": "type:feature", "onlyDependOnLibsWithTags": ["type:ui", "type:util", "type:data-access", "type:testing"] },
            { "sourceTag": "type:data-access", "onlyDependOnLibsWithTags": ["type:data-access", "type:util", "type:testing"] }
          ]
        }]
      }
    }
  ]
}