test(view): e2e 테스트를 위한 프롬프트 템플릿, 커서 룰 추가 및 적용

[ongheong]

Related issue

Result

실행 방법

• ./cursor/templates/test.playwright.md에서 자세한 실행 및 커스터마이징 방법을 확인할 수 있습니다.

E2E 테스트 생성 (Playwright)

1. 시나리오 작성: .cursor/templates/test.playwright.md에서의 사용 예시를 참고해 테스트 시나리오를 작성합니다.
2. AI 실행: ⌃+I (Cursor Agent)를 누르고 템플릿을 붙여넣습니다.
3. 파일 생성: AI가 자동으로 packages/view/tests/에 테스트 파일을 생성합니다.

ex) E2E 테스트 예시 (TemporalFilter)

Context:

- 테스트 대상: TemporalFilter 컴포넌트
- 시나리오:
  - [ ] 기간 브러시 필터링이 정상 작동해야 한다
  - [ ] 필터링 후 통계가 갱신되어야 한다
  - [ ] Reset 버튼으로 필터가 해제되어야 한다

Constraints:

- Zustand state only (no other state libs)
- Mock external dependencies (GitHub API, file system)
- VSCode webview environment

결과: packages/view/tests/temporal-filter.e2e.spec.ts 파일 생성

Work list

• e2e 테스트를 위한 커서 룰, 프롬프트 템플릿 생성
• 템플릿을 바탕으로 2개의 테스트 코드 작성

PR 커밋 상세 정보 E2E 테스트 (`pr-commit-detail.e2e.spec.ts`)
1. PR에 포함된 커밋들의 목록이 표시된다
2. PR의 통계 정보(총 커밋 수, 변경 파일 수, 추가/삭제 라인 수)가 표시된다
3. 각 커밋의 상세 정보(제목, 작성자, 날짜, 해시)가 올바르게 표시된다
4. 커밋 해시에 마우스를 올리면 툴팁이 나타난다
5. 빈 데이터 상태에서도 컴포넌트가 정상 렌더링된다
6. 여러 커밋이 있는 클러스터에서 스크롤이 정상 작동한다

TemporalFilter E2E 테스트 (`temporal-filter.e2e.spec.ts`)
1. 기간 브러시 필터링이 정상 작동해야 한다
2. 필터링 후 통계가 갱신되어야 한다
3. Reset 버튼으로 필터가 해제되어야 한다
4. 다양한 브러시 선택 영역으로 필터링이 작동해야 한다
5. 빈 데이터 상태에서도 컴포넌트가 정상 렌더링되어야 한다
6. 필터링 후 통계가 갱신되어야 한다 (중복 테스트)

Discussion

• E2E 테스트 코드 작성 효율화를 목표로, 규칙과 프롬프트 템플릿을 활용한 코드 초안 생성 시스템의 기반을 마련했습니다.
• 현재 워크플로우는 개발자가 원하는 시나리오를 작성하고, 템플릿을 통해 생성된 코드를 개발자가 검토하여 시나리오의 정확성을 최종 검증하는 방식으로 진행됩니다.
• 생성 시스템의 신뢰도를 높이기 위해, 다양한 엣지 케이스를 포함한 테스트 시나리오를 지속적으로 적용해야 합니다.
• 여러 번의 검증을 바탕으로 규칙과 템플릿을 꾸준히 고도화하여, 개발자의 검토 과정을 최소화하는 것을 목표로 하면 좋을 것 같습니다.

[chae-dahee]

e2e 프롬프트를 통해 자동화 작성을 높일 수 있겠어요~ 멋집니다 👍
예시 E2E 테스트코드 구성해주신 것도 좋습니다 LGTM!!
다만 주석은 정리해주시면 좋을 것 같습니다. 영어로 작성하거나 꼭 필요한 부분에만 주석이 있으면 좋겠어요~ test expect 또는 describe 도 영어로 구성되면 좋을 것 같습니다!

[nxnaxx]

LGTM!! 고생하셨습니다👍🏻
예시 덕분에 추후 작업에 도움될 것 같습니다ㅎㅎ

[ytaek]

우와아아아아아아아아!! 엄청난 작업이네요!!!
vibe시대에는 이렇게 context를 작성하는 것도 매우 중요한 것 같습니다.
(그러고보면 이전에도 설계를 잘 작성하는게 중요하긴 했지요!!)

LGGGTM 입니다!!! 빨리 써보고 싶네요!!

[SingTheCode]

고생하셨습니다! 앞으로 테스트 작성하기 매우 편하겠네요ㅎㅎㅎ

[ongheong]

예시 E2E 테스트코드 주석을 최소한으로 남기고, 영어로 변경했습니다!
추가로 커서 룰에도 영어로 간결하게 주석을 남기도록 추가했습니다! 모두 확인해주셔서 감사합니다 ☺️☺️☺️☺️