2 Commits

Author	SHA1	Message	Date
shankar0123	76e9380389	fix(web): Hotfix #17 — skip backend-dependent e2e specs in CI (e2e.yml turns green) ... The "Frontend E2E (informational)" workflow has been red on every push since Phase 8 (commit a9e229b) shipped TEST-H1+H2. The workflow's own header acknowledges this is non-blocking: "The job is intentionally NOT in the merge gate. It runs on every push to surface flakiness early; merge eligibility comes from ci.yml's existing gates (Vitest, lint, build, the 34 CI guards)." But the red badge on every commit is noise. Two ground-truthed root causes (NOT regressions from any recent commit): (1) NO BACKEND IN CI. playwright.config.ts:48-53 only spins up `npm run dev` (Vite frontend). The Vite dev-server proxy forwards /api/v1/* and /health to a backend that doesn't exist in the CI environment → ECONNREFUSED flood throughout the run log. 6 specs need backend data to drive AuthGate bootstrap / lazy palette mount / settings reload: - 01-login-redirect (3 tests): all 3 depend on AuthGate deciding to redirect to /login, which requires /api/v1/auth/info to resolve - 02-dashboard-shell (2 of 4): the palette tests need the Dashboard page to hydrate past loading state → React.lazy palette chunk only mounts after backend data lands - 03-settings-timestamp-pref (1 of 3): the reload+persist test calls page.reload() which re-runs AuthProvider's 4-endpoint bootstrap (2) NO VISUAL-REGRESSION BASELINES COMMITTED. 04-visual- regression.spec.ts uses Playwright `toHaveScreenshot()` against PNG baselines that don't exist (`find web/src/__tests__/e2e -name '*.png'` returns 0). First-run = "snapshot doesn't exist, writing actual" = expected fail. The e2e.yml workflow exposes an `update_snapshots` dispatch input for the controlled first-run pass, but on default push runs that flag is false → tests fail. Operator choice (2026-05-14): "skip backend-dependent specs" over spinning up backend in CI (1-2 days of CI engineering, premature per the e2e.yml comment's "do not promote to required-for-merge in this phase" guidance) or dropping the e2e job from push triggers entirely (loses early-flakiness signal). ═══════════════════════════ CHANGES ═══════════════════════════════ web/src/__tests__/e2e/01-login-redirect.spec.ts: describe-level test.skip(NEEDS_BACKEND, '...') guard. All 3 tests in this file depend on AuthGate. web/src/__tests__/e2e/02-dashboard-shell.spec.ts: Per-test test.skip(NEEDS_BACKEND, '...') on the 2 palette tests (47, 59). Sidebar IA test (31) and breadcrumb test (70) stay ungated — both passed in CI today because they don't depend on Dashboard data resolving. web/src/__tests__/e2e/03-settings-timestamp-pref.spec.ts: Per-test test.skip(NEEDS_BACKEND, '...') on the reload+persist test (39). Card-render (28) and invalid-IANA-fallback (54) tests stay ungated — both passed. web/src/__tests__/e2e/04-visual-regression.spec.ts: describe-level skip guard. All 5 tests need both backend AND committed baselines; neither exists in CI today. The workflow_ dispatch update_snapshots input is the controlled-update path when both prereqs land. Skip condition is `!process.env.CERTCTL_E2E_BACKEND_URL && !!process.env.CI`: • In CI without a backend → skip • Locally where operator runs `make demo` + `npm run e2e` → no CI env var, so skip evaluates false → all tests run • In CI WITH a backend set via CERTCTL_E2E_BACKEND_URL env → tests run; this is the path the e2e.yml's "next steps" will use when backend-in-CI infra lands ═══════════════════════════ AUDIT FRAMING ════════════════════════ This is honest signal, not test deletion: • 11 tests don't run in CI today; they're SKIPPED with a clear operator-facing reason and an env-var unlock path. • The 5 tests that DO run in CI today (sidebar IA, breadcrumb, timestamp card render, invalid-IANA fallback, smoke "login renders brand") continue to run and protect the no-backend- needed surface. • The "1-2 weeks of green runs" promotion criterion in e2e.yml's header is now achievable for the no-backend subset. ═══════════════════════════ VERIFICATION ═══════════════════════════ • npx tsc --noEmit — exit 0 • Visual diff of skip-guard patterns across 4 files — consistent NEEDS_BACKEND const + test.skip(...) + operator-facing reason • Falsifiable proof: the next push's e2e workflow run should show 5 passing + 11 skipped + 0 failed; exit 0; informational job goes from RED to GREEN. Ground-truth: origin/master tip 7268d12 (FE-M6 just pushed) verified via GitHub API BEFORE commit.	2026-05-14 20:54:43 +00:00
shankar0123	a9e229bd2a	feat(frontend): Phase 8 Test Pyramid Investment — TEST-H1 + TEST-H2 + TEST-H3 (scaffold) + TEST-M1 ... Closes the structural test-pyramid gaps that protect every future phase from regression. Pragmatic-scope decision: Storybook deps were NOT installable in the sandbox (disk pressure on the shared 9.8 GB local partition); the config + stories ship as scaffolding + package.json deps so the operator's `npm install` on workstation materializes them. Everything else (E2E specs, visual regression, Vitest multi-page flows) runs in this session. ═════════════════════════ AUDIT VERIFICATION ═════════════════════════ • Q1 (e2e/README intact + zero Playwright wired) — PARTIALLY STALE: Phase 3 TEST-M3 already shipped playwright.config.ts + smoke.spec.ts + @playwright/test 1.49.0 + the `npm run e2e` script. Phase 8's TEST-H1 work LAYERS on top — adding the 3 priority flow specs the audit cited. • Q2 (no test-pyramid SaaS deps) — PARTIALLY STALE: @playwright/ test already installed; storybook + chromatic confirmed absent. • Q3 (9 shared components) — STALE: 22 production shared components today (Phase 1 + 4 + 5 + 6 added 13 more since the audit was written). • Q4-Q6 (Vite + Vitest + Tooltip API + CI gates) — all accurate. ═════════════════════════════ CLOSURES ═══════════════════════════════ TEST-M1 (multi-page Vitest flows) — FULL CLOSE • web/src/__tests__/multi-page-flows.test.tsx — 3 flow tests: 1. Certs list → row click → CertificateDetailPage continuity 2. Direct deep-link to /certificates/:id (no list pre-fetch) 3. Issuers list → row click → IssuerDetailPage continuity • Mocks api/client via vi.importActual + override pattern so the pages compile + run without listing every export (the per-page test pattern was whack-a-mole). • 3/3 green in 6.83s. TEST-H1 (Playwright priority flows) — REPRESENTATIVE COVERAGE • web/src/__tests__/e2e/01-login-redirect.spec.ts — login redirect + API-key form rendering + invalid-key error banner (Phase 1 UX-H3 Banner contract). Happy-path login skipped pending live CERTCTL_E2E_API_KEY in CI env. • web/src/__tests__/e2e/02-dashboard-shell.spec.ts — Phase 3 IA contract: 7 semantic sidebar groups + cmd+k palette open + search routing + breadcrumb trail. • web/src/__tests__/e2e/03-settings-timestamp-pref.spec.ts — Phase 6 I18N-H3 settings card: utc/local/custom mode + reload- persists + invalid-IANA-tz graceful fallback (the error case the audit's DO NOT rule mandates). • 2 audit-cited flows deferred (archive cert + bulk renew) — require live cert seed data; Phase 3 smoke.spec.ts pattern extends naturally when CI seeds a demo deployment. TEST-H2 (visual regression) — PLAYWRIGHT PATH (zero new SaaS) • web/src/__tests__/e2e/04-visual-regression.spec.ts — 5 page screenshots: /login, /, /certificates, /issuers, /auth/settings. Baselines regenerated via `--update-snapshots` on first run; operator commits the PNGs. Data-heavy regions (charts, table bodies, identity card) are masked to catch LAYOUT regressions not DATA differences. • Phase 6 default UTC mode is pinned via init-script so visible timestamps in the baselines are deterministic across CI runs + timezones. TEST-H3 (Storybook) — SCAFFOLD + 8 STORIES (full install deferred to operator workstation due to sandbox disk) • web/.storybook/main.ts + preview.ts — Vite-builder config, addon-a11y enabled (catches UX-H4 + UX-L4 + UX-M6 per-component). Story discovery: `src/**/*.stories.@(ts|tsx)`. • 8 stories shipped: StatusBadge (11 enum variants — the source- of-truth catalog), Skeleton (4 variants + custom-table), FormField (5 variants incl. error + textarea), ModalDialog (3 variants), Banner (4 severities), EmptyState (4 variants), Timestamp (3 modes), Tooltip (top/bottom placement). • 14 more stories deferred as rolling follow-up (DataTable, PageHeader, Breadcrumbs, ErrorBoundary, ErrorState, ExternalLink, AuthGate, Layout, Combobox, Toaster, ConfirmDialog, FormField expansions, CommandPalette, CommandPaletteHost). The lever (config + addon-a11y + first 8 stories) is in place; per-component follow-up is mechanical. Storybook DEPS — PACKAGE.JSON ONLY, LOCKFILE PENDING: The sandbox's local 9.8 GB partition is wedged at 100% (shared across 28 other sessions; can't free space). storybook + @storybook/react-vite + @storybook/addon-a11y are added to package.json devDependencies AND scripts (storybook + storybook: build), but `npm install` couldn't complete here. Operator: run `cd web && npm install` on your workstation before pushing — the lockfile updates atomically there, then push as one commit. The .stories.tsx files reference @storybook/react types which WILL fail typecheck until install completes; tsconfig.json excludes them from the build typecheck (added `src/**/*.stories. tsx` + `src/**/*.stories.ts` to the exclude list) so the existing `npm run build` stays green in the meantime. Wire-up (Makefile + CI workflow) • Makefile `e2e-test:` target ALREADY EXISTS from Phase 3 TEST-M3 (audit's request for this target was stale). • .github/workflows/e2e.yml — informational job (per the audit's DO NOT "promote to required-for-merge in this phase"). Runs on push to master + every PR touching web/. Uploads playwright- report + visual-regression diff artifacts on failure. Workflow- dispatch input lets the operator regenerate baselines via --update-snapshots without editing the workflow file. ═══════════════════════════ VERIFICATION ═════════════════════════════ • npx tsc --noEmit — exits 0 (stories + e2e specs excluded via tsconfig.json; both have their own type contexts: Storybook provides @storybook/react types after install, Playwright specs use @playwright/test). • New Vitest tests: multi-page-flows 3/3 + existing component suites unaffected (verified Skeleton 6/6 + FormField 7/7 + multi-page 3/3 = 16/16 green in 6.83s). • npx vite build — ✓ in 3.39s. Bundle profile unchanged. • All 34 CI guards pass locally (bash scripts/ci-guards/*.sh loop — no new guards in this phase). • Cleanup tasks: deleted dev/auditable-codebase-bundle branch + git gc --prune=now --aggressive (60M → 29M .git on host). ═══════════════════════════ RESIDUAL RISK ════════════════════════════ • Playwright flakiness on CI — well-documented in industry. The e2e.yml job is marked informational (continue-on-error: true) until 1-2 weeks of green runs accumulate. • Storybook story drift: every new shared component needs a sibling .stories.tsx. No CI guard enforces this today; tracked for follow-up. • Visual-regression baseline pollution: a careless --update- snapshots run rewrites baselines without review. The workflow- dispatch input is the controlled-update path; manual operator discipline is the failure mode. • Storybook lockfile pending operator install. Tests + build stay green in the meantime via tsconfig exclude rule.	2026-05-14 17:56:54 +00:00