test(ci): run both frontend suites, and repair what that turned up

[0xdevcollins]

Neither apps/dashboard nor apps/checkout ran tests in CI. The dashboard's suite had been broken on main for some time and the checkout's had never executed at all — which is how nineteen call sites kept a doubled /v1 prefix until someone opened a network panel. The assertions that would have caught it were sitting in files no runner touched.

Both now run in a test-frontend job. Getting there took three infrastructure fixes and four stale-assertion sites.

Dashboard — infrastructure

@useroutr/ui failed to resolve (2 suites never collected). The alias existed but pointed one level short: ../packages/ui/src from apps/dashboard resolves to apps/packages. Moved to array form with regex find entries so subpath imports (@useroutr/ui/globals.css) aren't rewritten onto the index file.

Target container is not a DOM element (5 tests) was not an environment problem — jsdom was configured correctly and the sibling suite passed. The test spied on document.createElement with a blanket mockReturnValue, so the createElement('div') that testing-library's render() makes for its own container got the fake anchor instead. Same for document.body.appendChild. Both spies now pass through anything that isn't the download anchor, plus an afterEach to restore them — they wrap the live document, so without it each test layered another spy on the previous one's.

Dashboard — assertions that encoded real behaviour changes

Test	Was	Now
PayoutStatusBadge ×5	toHaveClass("pending"|"processing"|…)	The tone name is no longer emitted as a class — BrandStatusBadge maps it to Tailwind tokens. Each status asserts the pair it actually resolves to: PENDING → bg-warning/10 text-warning, CANCELLED → bg-secondary text-muted-foreground (shared with neutral, deliberately).
usePayouts ×4	/v1/payouts, /v1/payouts/:id/retry|cancel	/payouts, /payouts/:id/retry|cancel. api.ts sets BASE_URL = ${origin}/v1, so callers pass bare paths — these were the pre-fix paths.
BatchGroupHeader ×1	getByText('(1)')	Threw on multiple matches: three payouts with three distinct statuses render three chips. Now asserts all three plus each status label. Surfaced only because the suite finally loaded.

Nothing was loosened or skipped.

Checkout

No test script, no runner, no config — vitest, jsdom and testing-library added to match the dashboard's versions.

The test file had drifted much further than the missing runner suggested. It was written against a CryptoPayment with a "Select network" / "Select token" two-step picker over ETH/BASE/BNB and USDC/USDT/ETH. The current component has no token picker at all, and offers Stellar plus the five CCTP chains under "Send USDC from". Assertions rewritten against the shipped component; QuoteCountdown's three were still accurate and pass unchanged.

The mocks were stale to match — wagmi's useConnect/useBalance and a useQuote hook the component doesn't use were mocked, while useChainId, useSendTransaction, @rainbow-me/rainbowkit and next/navigation weren't. It also wrapped renders in WagmiProvider while mocking wagmi without exporting it, which would have rendered undefined. Provider dropped (every wagmi hook is mocked); QueryClientProvider stays and the two crypto hooks are left real so they exercise their own wiring against a mocked api client.

Not done

packages/types has no test script and no test files on main, so there was nothing to wire up — a job for it would fail immediately. Its tests and a test-packages job live on fix/single-v1-prefix (237b615), unmerged. I test-merged that branch against this one: no conflicts, and the two jobs compose.

Verification

From a clean npm ci:

• apps/dashboard — 6 files, 38 tests, all passing
• apps/checkout — 1 file, 8 tests, all passing
• npm run lint clean in both apps (0 errors; pre-existing warnings only)
• next build still passes for checkout, since vitest.config.ts lands inside its tsconfig include glob
• Workflow YAML parses; jobs are lint, test-api, test-frontend, test-contracts-soroban, build

One thing left alone: CancelConfirmationModal nests a <div> and <p> inside Radix's description <p>, which React warns is a hydration risk. The suite passes — it's invalid markup, not a test failure — so it belongs in its own change.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
useroutr-www	Ready	Preview	Aug 9, 2026 2:51pm