클라이언트 단위/통합/UI 테스트 추가#294
Open
H-sooyeon wants to merge 39 commits into
Open
Conversation
H-sooyeon
force-pushed
the
test/write-fe-tests-#283
branch
from
4dda7bc to
07c94ee
Compare
IENFI
approved these changes
Jun 13, 2026
Collaborator
Author
|
공지사항 관련 실패는 저는 위처럼 로컬에서 사용해주고 있어요! 나머지 다른 테스트 실패는 공지사항 실패로 인한 영향( e2e 테스트는 시간 소요가 길어서 프로덕션 빌드 환경에서 돌리도록 수정했어요. |
- 신규 게스트 가입 및 기존 세션 복원 흐름 검증 - 초대 코드 접근 UI, 게스트 사용자 참여 버튼, 미인증 사용자의 로그인 페이지 리디렉션 검증
- 주간 달력 월 클릭 이동 - 정렬 drawer UI - 최신순, 오래된순, 기록 많은순 실제 정렬 순서 검증 - 날짜 선택 시 타임라인 페이지로 이동 - 전월 이동 후 월 전체보기, 년도 전체보기 검증
- 태그, 감정, 날짜, 위치 단일 필터 및 종합 필터 검색 검증 - 검새 결과 클릭시 기록 상세 이동 검증
- 태그 최근 사용, 자주 사용 탭 검증 - 방문 장소, 감정 통계 섹션 검증 - 기록 생성 후 작성 기록 수 증가 검증 - 태그 조합 검색(2개 태그 선택), 태그 및 감정 모두 보기에서 항목 클릭 후 검색 페이지 이동 검증
- 기존 세션 복원(restore) 분기에서 post api를 직접 호출하므로 isPending이 갱신되지 않아 API 응답 전까지 로딩이 표시되지 않던 문제 수정 - 로컬 isLoading state를 추가해 버튼 클릭시 true로 변경해 에러 발생 시에만 false로 리셋해 사용자가 재시도할 수 있도록 수정
- 테스트 실행 전 게스트 인증 상태 생성 - 기록 작성 및 수정 UI를 조작하는 페이지 오브젝트
- 홈 화면 로드, 기록 카드 클릭시 상세 페이지 이동 - 공지사항 페이지 로드 및 빈 상태 안내 메시지 - 프로필 페이지 로드 및 수정 페이지 이동, 닉네임 저장 토스트 - 문의 유형 선택, 제출 버튼 활성화, 유효성 검사
- 에디터 진입, 저장 버튼 활성화, 저장 후 상세 페이지 이동 검증 - 제목, 텍스트 블록 표시, 존재하지 않는 기록 에러 처리 검증 - 수정 모드 진입, 기존 제목 채워짐, 저장 후 상세 페이지 이동 검증 - 블록 롱프레스 시 드래그 상태 활성화 검증
- 전체 블록 유형 생성 후 상세 페이지 및 홈에서 렌더링 확인 - UI로 저장 -> 상세 페이지에서 작성자 닉네임 확인 -> 홈, 월별, 일별 카드 노출 검증 - 공유 drawer 열기 및 공유 URL로 비인증 접근 확인 검증
- 기록함 로드 및 월별/일별 카드 클릭 이동 검증 - 기록 생성시 미래 날짜 선택 불가 검증 - 날짜 drawer 미래 날짜 비활성화 및 과거 날짜 기록은 오늘 날짜 홈에 미표시 되는지 검증 - 닉네임 변경 후 기존 기록 상세에서 반영 확인
- 그룹 생성 후 /shared 페이지에서 카드 확인 - 공유 링크로 기록 제목 및 내용 확인 - 존재하지 않는 공유 토큰은 에러 - 공유 해제 후 접근 불가 검증
- dev 서버 과부하로 인한 간헐적 타임아웃을 재시도로 커버 - fast refresh 환경에서 클릭과 네비게이션 사이에 페이지가 재컴파일되면 drawer 상태가 초기화되어 URL이 변경되지 않는 문제 대응(promise.all 패턴)
- line 리포터 추가로 터미널 실시간 출력 지원 - worker CI/로컬 분리(ci:1, 로컬:2)
- 네트워크 대기 추가
- 공동 기록 websocket 시나리오 테스트 작성 - draft floating button 뱃지 표시 - 블록 내용 실시간 동기화 - 잠금 아이콘 표시 - 잠금 해제 후 다른 멤버 편집 - 멤버 이탈 시 편집 인원 수 감소 - 제목 실시간 동기화 - 저장시 오버레이 표시 및 상세 페이지 이동 - 상세 페이지 참여자 섹션에 편집 기여자 역할 뱃지 표시
- 전역 ThemeProvider 데코레이터 + 툴바 테마 토글 추가 (DarkMode 스토리 제거, 툴바로 모든 스토리에서 테마 전환 가능하도록 변경) - QueryClient 미설정 에러 수정 - 그룹 관련 스토리는 UI 변경을 고려해 변경하지 않음
- 태그 drawer 가로 스크롤바 숨기기 - 기록 작성의 위치 블록 다른 블록들과 같은 정렬로 동작하도록 수정
- 검색 결과 아이템 썸네일 있음/없음 등에 대한 결과 목록 뷰 - 검색 필터 drawer 뷰
- 지도 탐색 결과 기록 아이템 목록 뷰 - 지도 탐색 결과 기록 drawer 기본/선택된 포스트/로딩/ 빈 목록 상태에 대한 뷰
- 기록 작성 페이지 헤더의 작성/수정 모드 - 기록 작성 페이지 협업 멤버 뱃지 표현 - 전체 블록 타입의 빈 상태와 데이터가 있는 상태 비교
- 글로벌 헤더 스토리 추가 - 하단 네비게이션바 개인/그룹별 스토리 추가
- 공지 목록(이미지/텍스트/혼합), 빈 상태에 대한 스토리 추가 - 홈 진입시 표시되는 공지 팝업 모달 스토리 추가
- YYYY-MM-DD를 PostgreSQL이 자정 00:00으로 해석해 당일 오후 생성 기록이 eventAt <= 00:00 조건에서 제외되는 버그 수정 - end를 23:59:59로 정규화 - 기간 필터에서 오늘 기록이 포함되는지 검증하는 회귀 테스트 추가
- 존재하지 않는 검색어로 검색 시 빈 상태 메시지 표시 확인 - URL ?q= 파라미터로 직접 진입시 검색어가 입력창에 복원되는지 확인
- 공지 목록의 제목, 날짜 포맷 검증 - 홈 진입시 활성 공지 팝업 표시 확인 - 확인 클릭 후 dismiss 쿠키 설정으로 재진입시 팝업 미표시 확인
- 그룹 삭제 버튼 비활성화 조건을 VIEWER에서 ADMIN이 아닐 때로 수정 - 멤버 내보내기/권한 변경 시 실명 대신 그룹 닉네임 표시 - role 로드 완료 후에만 초대 버튼을 렌더링해 VIEWER에게 버튼이 잠깐 보이는 깜빡임 방지 - 그룹 삭제 후 invalidate queryKey 오타 수정(share에서 shared로 변경)
- 그룹 나가기, 멤버 프로필 변경, 역할 변경, 그룹 설정 조회 등 API 헬퍼 함수 추가 - 그룹 삭제 플로우 e2e 테스트 추가 - 그룹 나가기 테스트 추가 멤버 역할 변경, 내보내기 테스트 추가 - 그룹 내 프로필 변경 테스트 추가 - 회원 탈퇴 플로우 테스트 추가
- 피드 탭 / 보관함 탭 / 멤버 다수 스토리 추가 - 버튼 클릭으로 열어 혼자/공동 기록 선택 확인 가능
- inviteCode가 없는 경우에도 isInviteError와 동일하게 에러 상태로 처리 - 초대 코드 없이 접근 시 '유효하지 않은 초대 링크'메시지 표시 및 수락 버튼 비활성화
- fullyParallel false로 변경, webServer를 dev 서버 대신 프로덕션 빌드 실행 방식으로 변경
- react ssr+hydration 과정에서 서버 html과 클라이언트 html이 잠깐 동시에 DOM에 공존하는 시간대에 locator가 평가하면 2개 이상의 요소가 매칭되어 strict mode 위반 발생 - 느린 머신에서만 재현되어 로컬 통과하도록 수정
- toISOString()는 UTC 기준이므로 KST로 오전 9시 이전에 테스트 실행시 실제 날짜보다 하루 이전 값으로 계산되는 문제 - 로컬 연/월/일을 직접 조합하는 방식으로 변경해 시간대 무관하게 일관된 날짜를 사용하도록 수정
- 현재 주에 미래 날짜 버튼이 없을 때(주의 마지막 날이라서) 다음 주로 이동한 뒤 dsabled 버튼 상태 확인하도록 수정
- 공지사항이 없으면 스킵하던 테스트를 beforeAll에서 admin API로 활성 공지를 직접 생성하고 afterAll에서 삭제하는 픽스처를 추가해 환경과 무관하게 항상 검증하도록 수정
H-sooyeon
force-pushed
the
test/write-fe-tests-#283
branch
from
4cd1aee to
67582da
Compare
Collaborator
Author
요약 (연관 이슈 번호 포함)
작업 내용 + 스크린샷요소를 잘못 인식하는 문제SSR과 하이드레이션 과정에서 페이지가 로딩될 때 화면에 같은 요소가 잠깐 두 번 그려지는 순간이 있는데, 테스트가 딱 그 순간에 요소를 찾아, 어떤 요소를 확인해야 하는지 몰라 테스트가 통과되지 않는 문제가 발생할 수 있었어요. 저의 환경에서는 통과가 되고, 엔프 환경에서는 통과가 안되던 것도 컴퓨터 환경(속도 등)에 따라 그 순간이 캡쳐가 되냐 안되냐가 달라지기 때문이었던 것 같아요. UTC/KST 날짜 테스트 문제테스트 코드에서 날짜를 계산하는 방식이 UTC 기준이었는데, 저희는 로컬 시간으로 지정되기 때문에 시간차가 생겨 발생한 문제였어요. 로컬 시간 기준으로 오늘 날짜를 계산하도록 수정했습니다. 실제 걸린 시간2h 작업하며 고민했던 점(선택)테스트 실행 여부
리뷰 참고사항공지사항 테스트를 위해 백엔드 |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
요약 (연관 이슈 번호 포함)
Note
그룹 홈 등 변경된 UI에 맞춰 테스트 코드를 작성하기 위해 UI/UX 피드백 관련 브랜치인
refactor/ux-ui-feedback-#287을 받아 작업 진행했어요.작업 내용 + 스크린샷
storybook, 단위/통합 테스트 추가
버그 수정
hidden처리normalizeDateBoundary추가실제 걸린 시간
7day
작업하며 고민했던 점(선택)
테스트 실행 여부
리뷰 참고사항
공지사항 테스트가 포함되어 있기 때문에,
ADMIN_KEY환경변수가 있어야 합니다.e2e 테스트 진행 시 빠른 실행을 위해 프로덕션 빌드로 진행되니 클라이언트 환경변수를 수정해줘야 합니다.
로컬에서 확인하는 방법
Storybook (UI로 시각 확인)
브라우저에서 6006 포트로 접속하게 됩니다.
E2E 테스트 (개발 서버 실행 상태에서)
시각적으로 테스트 결과를 확인할 수 있어요.
시각 자료(이미지/영상, 있다면)(선택)
storybook 결과 UI 확인
e2e 테스트 결과 UI 확인 (아래 사진은 부분 테스트 결과)