test(web): implement E2E testing infrastructure with Playwright and a custom mock API server

[Nohgh]

개요

• apps/web에 Playwright 기반의 통합 E2E 테스트 인프라와 가상 HTTP 스텁(Mock API) 서버를 구축하여 크로스 브라우저 환경 검증을 자동화합니다.
• apps/extension에 Vitest + React Testing Library(RTL) 기반 단위 테스트 환경을 구축하고, 주요 도메인 로직 및 유틸리티의 단위 테스트를 완벽히 통과시켰습니다.
• 모노레포 환경에서 불필요한 빌드 및 CI 리소스 낭비를 차단하기 위해 web과 extension 패키지의 빌드 및 테스트 파이프라인을 독립 CI 워크플로로 이원화하고 최적화했습니다.

---

작업 내용

1. Web E2E 테스트 인프라 구축 및 시나리오 검증

• Playwright 및 HTTP Mock 서버 통합:
  • Next.js App Router의 SSR(RSC) 및 미들웨어(proxy.ts) 계열 서버사이드 fetch 동작과 브라우저의 클라이언트사이드(Axios) fetch를 모두 일관되게 모킹하기 위해 독립 HTTP 스텁 서버를 포트 :3101로 기동.
  • 브라우저의 User-Agent 정보를 식별하여 "서버사이드 fetch 실패 + 클라이언트사이드 복구" 등의 정밀한 폴백 검증 메커니즘을 지원.
• 포괄적 E2E 시나리오 구현:
  • 인증(/auth): 다단계 회원가입(이메일 발송 ➡️ 코드 검증 ➡️ 비밀번호 설정), 잘못된 인증코드 입력에 대한 예외 처리 및 화면 유지 검증, 세션 정보 유무에 따른 대시보드 리다이렉트 흐름.
  • 대시보드(/dashboard): 미인증 유저 가드, 기간 필터 변경에 따른 RSC 데이터 재요청 및 쿼리 파라미터 연동, 모의 통계 및 차트 엘리먼트 실물 렌더링 검증.
  • 반응형(Responsive): 모바일 뷰포트와 데스크톱 뷰포트에 따른 동적 레이아웃 그리드 배치 전환.

2. Extension Vitest + React Testing Library 단위 테스트 인프라 구축

• 러너 및 셋업:
  • Vitest(jsdom) 및 RTL 기반 테스트 환경 구성. apps/extension/test/setup.ts에서 각 테스트 완료 후 자동 DOM cleanup 적용.
• WXT 의존성 모킹:
  • wxt/browser API 모킹 및 tsconfig.json, vitest.config.ts 설정 조정.

3. 익스텐션 도메인 및 유틸리티 단위 테스트

• bookmark-id 모델: ID 생성 및 파싱 라운드트립 보존 검증. 유효성 검증 정교화 리팩토링.
• dnd/utils: 드래그 앤 드롭 타겟 인덱스 계산, 활성 노드 트리 이동 유틸리티 단위 테스트 구현.
• bookmarks/model/utils: 트리 평탄화, 정렬, 노드 삭제 및 삽입 등의 헬퍼 검증.

4. 북마크 동기화(sync) 도메인 단위 테스트

• native-sync-guard: 프로그램적 북마크 생성/삭제에 따른 에코 이벤트를 방지하는 억제 가드 로직 검증. vi.useFakeTimers()를 통한 TTL(5초/10초) 경계 및 청소 조건 검증.
• bulk-sync: 로컬 트리 로드, 평탄화 수행 후 서버 API 호출 및 초기화 완료 브라우저 플래그 세션 업데이트 흐름 검증.
• native-bookmark-writer: 네이티브 북마크 생성/삭제(removeTree 실패 시 remove fallback), 복원 시 서브트리 재귀 복제 및 서버 rekey 보고 검증. 예외 흡수 시나리오 추가.
• sync-handlers: 소켓에서 들어오는 크로스 브라우저 이동 및 네이티브 액션 핸들러들의 호출 분기 검증. 모든 비동기 작업 실패 시 에러가 정상적으로 콘솔로 우회되는지(try-catch) 테스트.
• local-bookmark-listeners: 로컬 브라우저에서 감지된 생성, 삭제, 수정, 이동 액션을 composite ID로 치환하여 트리 낙관적 업데이트에 인자를 전달하는 구조 검증.

5. CI/CD 워크플로 추가 및 최적화

• extension-test.yml: apps/extension/**, packages/** 변경 시 작동. WXT prepare, compile(타입 체크), 빌드 및 단위 테스트 단계 검증.
• web-test.yml: apps/web/**, packages/** 변경 시 작동. Next.js 빌드, 단위 테스트 검증 외에 크로스 브라우저 Playwright E2E 잡(Job) 통합 및 실패/종료 시 리포트/트레이스 아티팩트 업로드 자동화 추가.
• 오버헤드 방지: GitHub Actions의 paths 필터를 세부적으로 지정하여 무관한 코드가 수정되었을 때 불필요한 빌드와 테스트가 격리/개별 수행되도록 가상 오버헤드 차단.

---

검증 결과

• 단위 테스트 결과: 9개 테스트 파일, 총 70개 테스트 전체 통과.

  Test Files  9 passed (9)
  Tests       70 passed (70)
  

• E2E 테스트 결과: Chromium, Firefox, WebKit 및 Mobile 에뮬레이터를 아우르는 70개 테스트 케이스 전체 통과.

  70 passed (30.2s)
  

• 정적 분석 및 컴파일:
  • npx tsc --noEmit 수행 결과 오류 0개 (통과).
  • biome check 수행 결과 전체 린트/포맷 룰 통과.