-
Notifications
You must be signed in to change notification settings - Fork 49
[6팀 현채은] Chapter 1-3. 완성도있는 테스트 전략 수립하기 #40
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
chen4023
wants to merge
41
commits into
hanghae-plus:main
Choose a base branch
from
chen4023:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- "e2e": "playwright test", - "e2e:ui": "playwright test --ui", - "e2e:report": "playwright show-report"
Playwright 테스트 실행 전 e2e.json 파일을 초기화하는 global setup 구성
- 테스트 선택자를 위한 라벨 및 ID 속성 추가
- 스낵바 컴포넌트 수정 상태 반영
- 기본 일정 생성, 수정, 삭제 기능을 검증하는 Playwright 테스트 스크립트 작성
- 반복 일정 생성, 수정, 삭제 기능을 검증하는 Playwright 테스트 스크립트 작성
- aria-labelledby, aria-label 대신 labelId prop 사용
- 기본 일정 CRUD 플로우를 describe 블록으로 구조화하여 가독성 향상
- 다이얼로그 제거 및 EventOverlapDialog로 교체 - EventBadge 컴포넌트 추가로 이벤트 표시 로직 간소화 - 캘린더, 스타일 상수를 전용 파일로 분리 - 이벤트 스타일 상수를 별도 파일로 분리
- useEventDialog 훅을 추가하여 이벤트 다이얼로그의 상태 및 동작을 관리 - App 컴포넌트에서 다이얼로그 관련 상태를 useEventDialog 훅으로 통합
- App 컴포넌트에서 주간 및 월간 뷰를 CalendarView 컴포넌트로 분리 - CalendarView 컴포넌트에서 주간 및 월간 뷰를 각각 WeekView 및 MonthView로 구현
- App 컴포넌트에서 이벤트 목록을 EventList 컴포넌트로 분리하여 코드 구조화 - EventListItem 컴포넌트를 추가하여 각 이벤트 항목의 표시 및 편집/삭제 기능 구현
- 기존 린트 테스트가 제대로 검증되지 않았었음 - 불필요한 import 및 주석 제거 - React.FC 타입 변경 - 필요한 import문 추가
- 캘린더 내에서 이벤트를 이동할 수 있는 드래그 앤 드롭 기능 추가
- 검색 입력 필드, 일정 검색, 검색 결과 메시지 확인을 포함한 E2E 테스트 케이스 작성
- 알림 설정 옵션 확인, 알림 시간에 따른 알림 표시, 알림 닫기 기능, 과거 일정에 대한 알림 비표시
- 각 E2E 테스트 시작 시 데이터 초기화를 위한 API 추가 - Playwright 설정에서 단일 worker로 실행하도록 변경 - 테스트 파일에서 데이터 초기화 로직 통합 - Vite 설정에서 특정 디렉토리 제외 추가
Member
|
채은님! 테스트코드 3주차 동안 정말 고생 많으셨어요 😊 짧은 기간이었는데도 테스트 전략을 스스로 고민하고, E2E–통합–단위 테스트 간의 역할을 명확하게 구분해가며 적용한 과정이 채은님의 성장을 보는것 같아 재밌네여 ㅎㅎ D&D 같은 까다로운 기능도 잘 풀어내셨고, CI에서의 이슈도 직접 해결해보신 게 큰 성장이라고 느껴집니다! 테스트 주차가 익숙하지 않으셨을텐데 끝까지 과제 잘 마무리해서 뿌듯합니다!! 다음 과제도 화이티잉👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
과제 3
필수 스펙
기본 과제
필수 스펙 개발과 E2E, 시각적 회귀 테스트를 모두 작성해주세요.
기본과제 제출
심화 과제
테스트 전략 작성해보기의 내용을 참고해서 지금까지 작성했던 프로젝트에 대해 테스트 전략을 구상해보세요.
심화 과제 제출
①. E2E
②. 통합 테스트
③. 단위 테스트
단위 테스트는 실제 유저 플로우와 같은 핵심 비지니스 로직에 사용되는 훅이나 유틸 기준으로 검증 진행
구현에만 연관되어있는 기능은 불필요
팀원들이 합의한 최적의 테스트 전략은 무엇인지, 그리고 그 이유를 작성해주세요.
이번 과제는 작은 서비스라서 E2E , 통합 비중을 다르게 해도 큰 차이가 나지 않을 것 같음
그 전략에 맞춰 추가한 테스트는 무엇인지 나타내주세요.
드래그 앤 드롭(D&D) 기능 개발
브라우저의 이벤트를 기반으로 동작하기 때문에 e2e테스트를 통해 시나리오를 설정하여 검증했습니다.
날짜 클릭으로 일정 생성 기능 개발
날짜 클릭으로 일정 생성 기능은 기존 기능과의 연동을 고려해 통합 테스트를 추가했고, 전체 플로우가 정상적으로 작동하는지 검증했습니다.
과제 셀프회고
사실 항해에서 처음 테스트코드를 접하게 됐는데, 마지막 과제를 하면서 짧은 기간에 테스트에 대한 이해도 측면에서 많이 성장한 것 같다고 느꼈습니다. 추가적으로 D&D와 날짜 클릭 시, 폼에 날짜를 불어오는 기능을 구현하면서도 기존 코드에 대한 버그를 찾아 나가며 캘린더 서비스에 대한 이해 또한 높아졌다고 생각합니다.
기술적 성장
초반에 e2e테스트를 작성하고 CI를 돌렸을 때, 로컬에서 순차적으로 실행하면 잘 동작하던 테스트가 계속 실패하는 상황이 발생하였습니다.
단일 워커 + 테스트별 데이터 초기화 전략을 사용하여 하나의 e2e.json 파일에서 모든 테스트 데이터를 관리하되, /api/reset 엔드포인트를 통해 각 테스트 실행 전 데이터를 초기화하는 방식을 선택했습니다. 모든 테스트는 단일 워커에서 순차적으로 실행되며, beforeEach 훅을 통해 테스트 간 격리될 수 있도록 적용했습니다.
병렬을 사용하여 다중워커를 사용하는 방안도 고려해보았으나, 불필요한 파일이 생기게 된다고 판단하여 단일 워커로 진행하기는 했는데 규모가 커진다면 시간적인 비용을 줄이기 위해서라도 병렬로 테스트를 진행하는 것이 좋을 것 같습니다.
코드 품질
학습 효과 분석
과제 피드백
리뷰 받고 싶은 내용
아키텍처 선택
테스트 실행 시에 순차적인 테스트가 필요없는 경우, 무조건 병렬로 테스트를 돌리는게 좋을까요?
혹은 병렬 실행으로 전환해야 하는 기준점이 있을까요?
데이터 리셋 전략
질문: /api/reset 엔드포인트를 만들어 테스트 진행 전 데이터를 초기화 시키는 방법을 사용하고 있는데 더 좋은 방법이 있을까요?
타이밍 이슈 (알림 설정 기능)
토스트나 alret과 같은 UI는 타이밍에 따라서 테스트가 실패하는 케이스가 있는 것 같은데, 방지할 수 있는 좋은 방안이 잇을까요?
대부분 실패하면 waitForTimeout 메서드를 사용해서 해결했는데.. 별로 좋지 않은 방법인 것 같습니다.
1분후 알림 예정인 경우, 테스트 내에서 실제로 1분이라는 시간을 기다렸다 테스트를 검증해야 하는지 궁금합니다. 만약 그 방안이 아니라면 테스트 케이스 내에서 시간을 조작하는 방법이 있을 것 같은데 실제 로컬에서는 잘 통과하지만 CI에서 돌아갈 때에는 시간 이슈로 통과하지 못한 케이스들이 있었는데 이부분은 조금 더 학습해 볼 예정입니다.
E2E와 통합 테스트의 경계