[codex] Add web UI smoke gate

[midagedev]

Summary

• add a Playwright-backed web smoke command that builds Billtap, starts an isolated local server, seeds checkout data, and checks dashboard/checkout/portal pages
• wire the web smoke into the CI release gate with Chromium installation
• update release/test docs and README command lists

Validation

• npm ci
• npm run smoke:web:install
• git diff --check
• go test ./...
• npm run typecheck
• npm run smoke:web

Notes

• Keeps the existing Z.ai PR review workflow unchanged.
• Uses an isolated .billtap/web-smoke SQLite database and random local port.

[claude]

APPROVE

요약

이 PR은 Billtap의 주요 UI 경로(/app/dashboard/, /app/checkout/, /app/portal/)에 대한 Playwright 기반 smoke 테스트를 추가합니다. 변경사항은 격리된 테스트 환경에서 기존 API를 올바르게 사용하며, billing state, webhook semantics, production boundary에 어떠한 regression도 도입하지 않습니다.

✅ 통과된 리뷰 우선순위

1. Billing State Correctness

• smoke-web.mjs:78-105: 기존 Stripe-compatible API(/v1/customers, /v1/products, /v1/prices, /v1/checkout/sessions, /api/checkout/sessions/:id/complete)를 통해 billing object를 생성하고 state transition을 트리거합니다. 새로운 billing behavior를 도입하지 않습니다.

2. Webhook Reliability

• 이 PR은 webhook handling, signature, retry, idempotency에 어떠한 변경도 하지 않습니다.

3. Safety

• smoke-web.mjs:21-22: .billtap/web-smoke/web-smoke-{PID}.db로 프로세스별 격리된 SQLite database 사용
• smoke-web.mjs:19-20: 127.0.0.1의 random local port에만 바인딩
• smoke-web.mjs:250-257: 테스트 후 database file cleanup 포함 (-journal, -shm, -wal 포함)
• smoke-web.mjs:39-44: 서버 종료 시 SIGTERM 후 SIGKILL fallback, 5초 타임아웃으로 clean shutdown 보장
• 테스트 데이터는 web-smoke@example.test 등 명확한 test data입니다.
• 실제 결제 처리 경로를 사용하지 않습니다.

4. Scenario/Fixture Contract

• 이 PR은 기존 scenario/fixture system을 수정하지 않습니다. 단순히 HTTP API를 통해 billing object를 생성할 뿐입니다.

5. UI/API Coherence

• smoke-web.mjs:58-75: 각 UI 경로가 실제 billing state와 동기화되는지 확인합니다.
  • Dashboard: "Debug workspace", "Billing objects", "Object timeline" text 확인
  • Checkout: seeded session으로 방문하여 "Checkout session", "Outcome selector", "Complete checkout" 확인
  • Portal: seeded customer로 방문하여 "Subscription management", "Current subscription", "Cancellation" 확인
• smoke-web.mjs:147-154: JavaScript console error를捕获하여 UI/API 불일치导致한 runtime error를 감지합니다.

6. CI Integration

• .github/workflows/ci.yml:42-44: npm run smoke:web:install로 Chromium browser 설치 추가
• .github/workflows/ci.yml:57-59: npm run smoke:web로 실제 smoke test 실행 추가
• 기존 workflow 순서를 준수합니다 (Go tests → typecheck → build → smoke:sample → smoke:web → binary build)

📝 Suggestion

1. Wait Strategy 경쟁 조건 가능성 (Minor, Non-blocking)

• smoke-web.mjs:160: waitUntil: "domcontentloaded"는 DOM 파싱 완료 시점을 의미하며, React hydration이나 dynamic content rendering이 완료되기 전일 수 있습니다.
• smoke-web.mjs:175: 250ms fixed timeout은 잠재적인 race condition을 숨길 수 있습니다. 향후에 Playwright's expect().toBeVisible()를 사용하여 more deterministic한 wait strategy로 고려해 볼 수 있습니다.

2. Cross-browser Coverage (Future Enhancement)

• 현재는 Chromium만 사용합니다. G11의 release candidate 목적에는 충분하지만, 향후 Firefox/WebKit도 검토해 볼 수 있습니다.

결론

Blocking issue가 없습니다. 이 PR은 Billtap이 billing sandbox로서 안전하게 작동함을 검증하는 smoke test를 추가하며, production boundary를 존중하고 기존 API surface를 올바르게 사용합니다.

_{Reviewed by Z.ai GLM via Claude Code Action}

[claude]

APPROVE

요약

이 PR은 Playwright 기반 Web UI smoke test를 추가하고 CI 게이트에 통합합니다. 변경 사항은 프로젝트의 목표와 spec에 부합하며, blocking issue는 없습니다.

변경 사항

• tests/web-smoke/smoke-web.mjs (전체 보기): Playwright를 사용한 headless browser smoke test 추가
• CI workflow에 Chromium 설치 및 web smoke test 단계 추가 (.github/workflows/ci.yml)
• 관련 문서 업데이트 (README.md, docs/RELEASE.md, docs/TESTING.md 등)

검증된 항목

Safety

• ✅ Real card data를 처리하지 않음
• ✅ Production credential을 사용하지 않음
• ✅ Isolated SQLite DB 사용 (web-smoke-${PID}.db)
• ✅ Localhost만 사용 (random port)
• ✅ Test environment만 대상으로 함

Billing State Correctness

Smoke test는 다음 billing flow를 검증합니다:

• Customer 생성 (POST /v1/customers)
• Product 생성 (POST /v1/products)
• Price 생성 (POST /v1/prices)
• Checkout session 생성 (POST /v1/checkout/sessions)
• Checkout completion (POST /api/checkout/sessions/:id/complete)

이 flow는 G2 (Checkout MVP) gate의 핵심 요구사항에 부합합니다.

UI/API Coherence

Smoke test는 각 페이지에서 실제로 존재하는 텍스트를 검증합니다:

• Dashboard: "Debug workspace", "Billing objects", "Object timeline" (dashboard/main.tsx:134-215)
• Checkout: "Checkout session", "Outcome selector", "Complete checkout" (checkout/main.tsx:74-169)
• Portal: "Subscription management", "Current subscription", "Cancellation" (portal/main.tsx:100-213)

Test Isolation

• ✅ PID 기반 독립된 database 파일
• ✅ Random local port allocation
• ✅ Test 종료 시 database 정리
• ✅ Server 종료 보장 (SIGTERM → SIGKILL fallback)

Console Error Collection

• ✅ console.error 이벤트 수집
• ✅ pageerror 이벤트 수집
• ✅ Console error가 있으면 test 실패

제안 사항

향후 개선을 위한 비-blocking 제안들입니다:

1. 실패 시나리오 확장: 현재 smoke test는 checkout 성공 경로만 검증합니다. 향후 결제 실패, 재시료, 취소 등의 시나리오도 추가하면 더 포괄적인 테스트가 될 것입니다.

2. Typecheck 명시적 추가: CI workflow에 npm run typecheck 단계가 보이지 않습니다. 이미 다른 곳에서 실행되고 있다면 무방합니다.

3. Server 종료 타임아웃 문서화: 5초 타임아웃 후 SIGKILL을 사용하는데, 이는 일반적이지만 테스트 실패 시 원인 파악에 도움이 될 수 있습니다.

결론

Billing state correctness, webhook reliability, safety, scenario contract 측면에서 regression은 없습니다. UI routes가 실제로 렌더링되고 console error가 없는지 검증하는 smoke test는 CI 게이트의 가치를 높입니다.

_{Reviewed by Z.ai GLM via Claude Code Action}