Testing infra: factories, snapshot, a11y coverage, web vitals

e2e/a11y.spec.ts

@@ -14,6 +14,7 @@ const PAGES: Array<{ path: string; name: string }> = [
   { path: '/', name: 'Home' },
   { path: '/dashboard', name: 'Dashboard' },
   { path: '/invoice/new', name: 'New Invoice' },
+  { path: '/settings', name: 'Settings' },
 ];
 
 async function runAxe(page: Page) {

src/__tests__/stores.test.ts

@@ -2,18 +2,9 @@ import { beforeEach, describe, expect, it } from "vitest";
 import { useWalletStore } from "@/lib/stores/walletStore";
 import { useInvoiceStore } from "@/lib/stores/invoiceStore";
 import { useUIStore } from "@/lib/stores/uiStore";
-import type { Invoice } from "@stellar-split/sdk";
-
-const mockInvoice: Invoice = {
-  id: "1",
-  creator: "GABC",
-  recipients: [{ address: "GDEF", amount: 10_000_000n }],
-  token: "token",
-  deadline: 9999999999,
-  funded: 0n,
-  status: "Pending",
-  payments: [],
-};
+import { createMockInvoice } from "@/test/factories";
+
+const mockInvoice = createMockInvoice();
 
 beforeEach(() => {
   useWalletStore.setState({

src/app/layout.tsx

@@ -25,6 +25,7 @@ import OfflineBanner from "@/components/OfflineBanner";
 import WalletSecurityCenter from "@/components/security/WalletSecurityCenter";
 import { getNonce } from "@/lib/csp";
 import TransitionProvider from "@/components/layout/TransitionProvider";
+import WebVitalsReporter from "@/components/WebVitalsReporter";
 
 const themeBootstrap = `
 (function () {
@@ -132,6 +133,7 @@ export default function RootLayout({
                       <UserPreferencesProvider>
                         <FiatRateProvider>
                           <ShortcutRegistryProvider>
+                            <WebVitalsReporter />
                             <Navbar />
                             <SimulationBanner />
                             <UpgradeBanner />

src/components/WebVitalsReporter.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useReportWebVitals } from "next/web-vitals";
+import * as Sentry from "@sentry/nextjs";
+
+/**
+ * Forwards Core Web Vitals (CLS, LCP, FID/INP, TTFB, FCP) to Sentry as
+ * measurements on the active span, so real-user performance can be
+ * monitored and benchmarked over time alongside the existing Sentry
+ * tracing (tracesSampleRate) setup.
+ */
+export default function WebVitalsReporter() {
+  useReportWebVitals((metric) => {
+    Sentry.setMeasurement(metric.name, metric.value, "millisecond");
+  });
+
+  return null;
+}

src/components/__tests__/StatusBadge.snapshot.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import StatusBadge from "@/components/StatusBadge";
+
+/**
+ * Snapshot test for StatusBadge — a small, stable, presentational
+ * component (no internal randomness, derives entirely from props via
+ * STATUS_CONFIG). Guards against unintended markup/className regressions.
+ */
+describe("StatusBadge (snapshot)", () => {
+  it("renders a Pending badge consistently", () => {
+    const { container } = render(<StatusBadge status="Pending" size="md" />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders a Released badge at lg size consistently", () => {
+    const { container } = render(<StatusBadge status="Released" size="lg" />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/test/factories.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared test data factories / fixtures.
+ *
+ * Several test files hand-roll ad-hoc `mockInvoice` objects with slightly
+ * different (and sometimes inconsistent) shapes. This module centralizes a
+ * baseline factory so new and existing tests can build on one consistent
+ * shape via overrides, instead of copy-pasting and drifting.
+ */
+import type { Invoice } from "@stellar-split/sdk";
+
+export function createMockInvoice(overrides: Partial<Invoice> = {}): Invoice {
+  return {
+    id: "1",
+    creator: "GABC",
+    recipients: [{ address: "GDEF", amount: 10_000_000n }],
+    token: "token",
+    deadline: 9999999999,
+    funded: 0n,
+    status: "Pending",
+    payments: [],
+    ...overrides,
+  } as Invoice;
+}