BaronSSO/baron-sso/docs/test-plan/userfront-wasm-e2e-expansion-plan.md

UserFront WASM Playwright E2E 확장 계획

• 작성일: 2026-02-23
• 대상: userfront (Flutter Web WASM 산출물)
• 목적: 로그인/리다이렉트/QR 흐름의 브라우저 실동작 회귀를 CI에서 자동 검증

1) 전제

• flutter build web --wasm --release 산출물(userfront/build/web)을 정적 서버로 서빙합니다.
• Playwright는 해당 URL로 접속해 E2E를 수행합니다.
• 카메라/QR은 실장비 의존도를 제거하기 위해 브라우저 API mock 기반 케이스를 기본으로 구성합니다.

2) 확장 범위 (우선순위)

1. Locale 진입/리다이렉트

• / 진입 시 /{locale}로 이동
• 비로그인 상태 /{locale} 진입 시 /{locale}/signin 이동
• 로그인 상태 /{locale} 진입 시 /{locale}/dashboard 이동

2. 로그인 성공/실패 및 새로고침 회귀

• 정상 로그인 후 /{locale}/dashboard 진입
• 대시보드 진입 후 새로고침 시 signin으로 튕기지 않음
• 비밀번호 오류 시 코드 기반 에러 표시 동작 확인

3. 비밀번호 재설정 플로우

• reset 링크 진입 후 비밀번호 변경
• 변경된 비밀번호로 즉시 로그인 가능

4. QR 로그인 (웹 로그인 페이지)

• QR init/poll 기본 플로우
• 만료/재발급 동작

5. QR 스캔/승인 (WASM)

• /scan에서 스캔 결과가 /{locale}/approve?ref=...로 전달됨
• BarcodeDetector 미지원/카메라 실패 시 수동 입력 fallback 동작
• approve 성공 시 dashboard 이동

6. 널체크 회복 경로 회귀

• /ko 경로에서 null-check 예외 발생 시 recovery target(/{locale}/signin) 이동 보장

3) 구현 단계

Phase 0. E2E 실행 기반

• userfront-e2e/ (Playwright) 추가
• BASE_URL/LOCALE/MOCK_AUTH 환경변수 표준화
• CI job: WASM build 산출물 서빙 + Playwright 실행

Phase 1. 인증/리다이렉트 핵심 회귀

• 범위 1~2 구현
• 실패 재현 케이스를 먼저 작성(Failing test first)

Phase 2. 비밀번호 재설정 회귀

• 범위 3 구현
• 성공/실패 케이스 분리

Phase 3. QR 흐름 회귀

• 범위 4~5 구현
• BarcodeDetector/getUserMedia mock fixture 도입

Phase 4. 에러/회복 회귀

• 범위 6 구현
• null-check 복구 라우팅 검증

4) 현재 구현 상태 (2026-02-24)

• Phase 0: 완료
  • userfront-e2e/ 워크스페이스 추가
  • 로컬 SPA fallback 서버(scripts/serve-userfront-build.mjs) 추가
  • 실행 커맨드: cd userfront-e2e && npm run test:wasm
  • CI 잡 연결: .gitea/workflows/code_check.yml의 userfront-e2e-tests
• Phase 1: 완료
  • tests/auth-routing.spec.ts 추가
  • 구현 시나리오:
    • 비로그인 /ko → /ko/signin 리다이렉트
    • 로그인 상태 /ko 진입 + 새로고침 후 /ko/dashboard 유지
    • 비로그인 /ko/approve?ref=... 진입 시 notice=qr_login_required와 함께 signin 이동
    • 로그인 상태 /ko/approve?ref=...에서 approve API 호출 후 dashboard 이동
• Phase 2: 완료
  • tests/password-and-reset.spec.ts 추가
  • 구현 시나리오:
    • 비밀번호 로그인 성공 시 dashboard 이동 + 토큰 저장 확인
    • 비밀번호 로그인 실패 시 코드 기반 에러(password_or_email_mismatch)가 client-log로 기록되는지 확인
    • reset-password 성공 시 signin 이동 확인
  • 참고:
    • WASM 렌더링에서는 접근성/DOM selector가 제한되어 로그인/리셋 폼은 flt-glass-pane 좌표 기반 입력으로 검증
  • 전수 인벤토리:
    • https://gitea.hmac.kr/baron/baron-sso/wiki/UserFront-WASM-E2E-Inventory.-
    • 라우트 22개 + 기능 회귀 12개(총 42 테스트) 코드화 완료
  • 프로필 소속 회귀 강화:
    • tests/profile-department.spec.ts 추가
    • 구현 시나리오:
      • 소속 수정 후 blur 저장 요청 전송
      • 입력 후 즉시 새로고침 시 저장 요청 미전송 재현
      • 동일값/빈값 입력 시 저장 요청 미전송
      • 수정 후 새로고침 뒤 재수정 저장 요청 누락 방지

5) 완료 기준

• 핵심 인증 플로우(로그인/새로고침/리다이렉트/QR)가 Playwright 회귀군으로 자동화됩니다.
• 프로덕션 이슈 재발 건은 재현 테스트가 먼저 추가됩니다.
• PR에서 E2E 결과 링크(성공/실패 로그) 확인이 가능합니다.

6) 운영 원칙

• 버그는 반드시 재현 테스트를 먼저 추가합니다.
• 재현 테스트가 실패하는 상태를 확인한 뒤 수정합니다.
• 수정 후 동일 테스트를 반복 실행해 안정 통과까지 완료합니다.
• 테스트 하네스는 단계별로 초기화/정리합니다.
  • 예: beforeEach에서 auth/mock state 재시드, afterEach에서 route mock 해제(page.unroute) 및 누수 상태 정리