Skip to content

feat(frontend-mock): phase 3 — exchange ui test surface#2

Merged
qa-ashutosh merged 1 commit into
mainfrom
feat/phase-3-frontend-mock
Apr 27, 2026
Merged

feat(frontend-mock): phase 3 — exchange ui test surface#2
qa-ashutosh merged 1 commit into
mainfrom
feat/phase-3-frontend-mock

Conversation

@qa-ashutosh
Copy link
Copy Markdown
Owner

Summary

Implements @qrypto/frontend-mock — a minimal but realistic exchange UI that serves as the dedicated test surface for @qrypto/e2e-suite. Five pages covering the full user journey: login+2FA, trading, wallet, KYC, and account management.

This is not a product. It is a QA-owned test surface — every element exists to support a specific e2e test scenario.

See docs/adr/004-frontend-mock-rationale.md for the full argument on why a QA architect builds their own test surface instead of coupling e2e tests to the production UI.

Type of change

  • feat — new capability

Scope

frontend-mock

What ships

  • Five fully implemented pages with realistic exchange UI
  • Dark terminal design system (IBM Plex Mono, electric amber accent)
  • data-testid on every interactive element — full reference in README.md
  • Error states rendered as first-class testable elements
  • Vite dev proxy to mock-server — zero CORS config
  • Live order book + ticker polling on trading page
  • Mobile viewport support at 375px
  • docs/adr/004-frontend-mock-rationale.md
  • packages/mock-server/API.md — full API reference doc
  • root package.json v0.3.0 with author and repository metadata

How to run

Terminal 1: npm run mock:start
Terminal 2: npm run frontend:start
Opens at http://localhost:3000

Checklist

  • npm run build --workspace=packages/frontend-mock passes
  • npm run typecheck passes
  • npm run lint passes
  • npm run format:check passes
  • CHANGELOG.md updated to v0.3.0
  • root package.json bumped to v0.3.0

- five pages: login+2fa, trading, wallet, kyc, account
- dark terminal aesthetic: ibm plex mono, electric amber accent, scanline overlay
- data-testid on every interactive element — placed for e2e test scenarios
- error states as first-class citizens — every failure path is testable
- vite dev proxy to mock-server — no cors, no hardcoded ports in components
- live order book and ticker polling (2s interval) on trading page
- withdrawal form with kyc gate, aml gate, and 2fa validation
- kyc status rendering for all five state machine states
- session list with per-session revocation on account page
- mobile viewport support at 375px
- packages/frontend-mock/README.md with data-testid reference table
- packages/mock-server/API.md — full production-grade api reference
- docs/adr/004-frontend-mock-rationale.md — why qa architects build their own test surface
- root package.json bumped to v0.3.0 with author, repository, lint-staged metadata
- changelog updated to v0.3.0
@qa-ashutosh qa-ashutosh merged commit 03f9376 into main Apr 27, 2026
2 checks passed
@qa-ashutosh qa-ashutosh deleted the feat/phase-3-frontend-mock branch April 27, 2026 04:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant