[Feat] 마이페이지 - 프로필 수정 모달 UI 테스트 코드 작성 #229
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughProfileEditModal 컴포넌트의 새로운 테스트 스위트를 추가하고, 모달의 필드 검증 및 form 동작을 테스트합니다. MBTI 유효성 검사 에러 메시지의 일관성을 개선합니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (3)
|
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
📊 Coverage Report
📈 #229을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #229 +/- ##
===========================================
+ Coverage 34.65% 38.44% +3.79%
===========================================
Files 164 164 0
Lines 7238 7238 0
Branches 255 300 +45
===========================================
+ Hits 2508 2783 +275
- Misses 4730 4455 -275 영향받은 파일
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/pages/user/profile/profile-edit-modal/index.test.tsx (1)
24-37: 타입 안정성을 개선할 수 있습니다.
renderResult변수가act()블록 내에서만 할당되어 TypeScript가undefined가능성을 추론할 수 있습니다.🔎 타입 안정성 개선 제안
const renderWithProviders = async (component: React.ReactElement) => { const testQueryClient = createTestQueryClient(); - let renderResult; + let renderResult!: ReturnType<typeof render>; await act(async () => { renderResult = render(
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/pages/user/profile/profile-edit-modal/index.test.tsxsrc/lib/schema/mypage.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-17T09:40:37.733Z
Learnt from: HopeFullee
Repo: WeGo-Together/WeGo_FrontEnd PR: 205
File: src/components/pages/post-meetup/fields/cap-field/index.tsx:47-47
Timestamp: 2025-12-17T09:40:37.733Z
Learning: In TanStack Form with Zod validation, when field.state.meta.isValid is false, field.state.meta.errors is guaranteed to have at least one entry. Therefore, in an isInvalid check defined as field.state.meta.isTouched && !field.state.meta.isValid, safely access field.state.meta.errors[0] without extra null/empty checks. This guideline applies to TSX form fields under src/components/pages (and similar forms using the same pattern).
Applied to files:
src/components/pages/user/profile/profile-edit-modal/index.test.tsx
🧬 Code graph analysis (1)
src/components/pages/user/profile/profile-edit-modal/index.test.tsx (2)
src/mock/service/user/user-mock.ts (1)
mockUserItems(3-52)src/mock/server.ts (1)
server(5-5)
🔇 Additional comments (6)
src/components/pages/user/profile/profile-edit-modal/index.test.tsx (5)
39-52: 테스트 설정이 올바르게 구성되었습니다.MSW 서버의 라이프사이클 관리가 표준 패턴을 따르고 있습니다.
54-70: 렌더링 테스트가 적절합니다.모달의 기본 렌더링과 초기값 설정을 올바르게 검증하고 있습니다.
72-105: 필드 입력 테스트가 잘 작성되었습니다.사용자 상호작용 시뮬레이션이 적절하고 일관된 패턴을 따릅니다.
136-218: 유효성 검사 테스트가 철저합니다.프로필 메시지와 MBTI 검증 테스트가 다양한 시나리오를 잘 커버하고 있습니다. 특히 MBTI 검증의 경우 onChange/onBlur 타이밍, 대소문자 처리, 부분 입력 등을 세밀하게 테스트하고 있어 우수합니다.
220-255: 제출 버튼 상태 테스트가 적절합니다.유효성 검사 결과에 따른 버튼 활성화/비활성화 로직을 올바르게 검증하고 있습니다.
src/lib/schema/mypage.ts (1)
27-27: 에러 메시지 일관성 개선이 적절합니다.Zod v4에서
message파라미터는 deprecated이지만 여전히 지원됩니다. 현재 코드의{ message: '...' }구문은 올바르게 작동합니다. 다만 Zod v4의 권장 사항은message대신error파라미터를 사용하는 것입니다. MBTI 검증 에러 메시지를 통일하는 것은 좋은 변경사항이므로, 향후{ error: '...' }구문으로 마이그레이션할 수 있습니다.
| test('닉네임 입력이 정상적으로 동작한다.', async () => { | ||
| const user = userEvent.setup(); | ||
| await renderWithProviders(<ProfileEditModal user={mockUser} />); | ||
|
|
||
| const nickNameInput = screen.getByDisplayValue(mockUser.nickName); | ||
| await user.clear(nickNameInput); | ||
| await user.type(nickNameInput, '새로운 닉네임'); | ||
|
|
||
| expect(nickNameInput).toHaveValue('새로운 닉네임'); | ||
| }); |
There was a problem hiding this comment.
userEvent를 사용해서 테스트 흐름이 뭔가 한눈에 잘 들어오는 것 같아요!
사용자가 테스트 하는 걸 실제로 보는 것 같은 느낌..?
📝 변경 사항
마이페이지 - 프로필 수정 모달 테스트 코드를 작성하였습니다.
API 정상 동작 테스트는 추후 진행 예정입니다.
🔗 관련 이슈
Closes #
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
릴리스 노트
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.