[Feat] 프로필 페이지 E2E 테스트 코드 작성 #144
Conversation
…into chiyoung-feat/profile-e2e-test
|
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 WalkthroughPlaywright end-to-end testing infrastructure is introduced with configuration files, scripts, and profile page routing tests. The profile not-found page is instrumented with a test hook, Jest and gitignore ignore patterns are expanded, and MSW mock service worker configuration is simplified for environment-based enablement. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 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 |
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
📊 Coverage Report
📈 #144을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #144 +/- ##
===========================================
+ Coverage 40.67% 40.73% +0.06%
===========================================
Files 125 125 0
Lines 5010 5003 -7
Branches 214 214 0
===========================================
Hits 2038 2038 0
- Misses 2972 2965 -7 영향받은 파일✅ 이 PR로 영향받은 파일이 없습니다 수정된 모든 파일이 현재 coverage를 유지했습니다. |
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
|
@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)
.gitignore (1)
45-52: Playwright artifacts ignore looks good; consider dropping duplicatenode_modules/The new Playwright block correctly ignores test-results, reports, and Playwright cache/auth directories. The extra
node_modules/is redundant with the earlier/node_modulesentry, so you could remove it to avoid confusion, but it’s harmless as-is.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
.gitignore(1 hunks)e2e/tests/profile.test.ts(1 hunks)jest.config.js(1 hunks)package.json(3 hunks)playwright.config.ts(1 hunks)src/app/(user)/profile/not-found.tsx(1 hunks)src/mock/index.ts(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/mock/index.ts (1)
src/mock/server.ts (1)
server(5-5)
🔇 Additional comments (4)
src/app/(user)/profile/not-found.tsx (1)
5-5: Test hook is minimal and well-scopedAdding
data-testid='not-found-user'on the wrapper div is a clean way to support E2E checks without affecting UI behavior.jest.config.js (1)
15-16: Good separation of Jest unit tests from Playwright E2E testsIgnoring
/e2e/in both coverage and test path patterns is a clean way to avoid Jest picking up Playwright tests or skewing coverage. The configuration correctly isolates the e2e directory.package.json (1)
16-17: Playwright scripts and devDependencies are consistent with the new E2E setup
test:playwright/test:playwright:uiscripts align with@playwright/testanddotenvdevDependencies. Theplaywright.config.tscorrectly imports and uses dotenv to load environment variables from.env.test, and the configuration properly uses@playwright/testAPIs with appropriate CI-aware settings. No blocking issues.playwright.config.ts (1)
1-78: Address missing.env.testfile and clarify environment variable setupThe Playwright config structure follows best practices, but the environment variable loading setup has issues:
.env.testdoes not exist in the repository (it's gitignored via.env*pattern), sodotenv.config({ path: path.resolve(__dirname, '.env.test') })will silently fail and load no variables.- The config assumes
NEXT_PUBLIC_MSW_ENABLEDand other test env vars will be available, but without a committed.env.testfile or clear documentation, developers won't know how to set up these variables locally.- Either commit a
.env.test.examplewith required variables, document the setup process in README, or load env vars from the CI environment directly without relying on a missing file.The rest of the configuration (
testDir,baseURL, multi-browser projects, andwebServerwithreuseExistingServer) is sound.
| import { expect, test } from '@playwright/test'; | ||
|
|
||
| test('나의 프로필 페이지로 접속 시 마이페이지로 리다이렉트 되는 지 테스트', async ({ page }) => { | ||
| // 나의 프로필 페이지 방문 | ||
| await page.goto('/profile/1'); | ||
|
|
||
| // redirect 대기 | ||
| await expect(page).toHaveURL('/mypage'); | ||
| }); | ||
|
|
||
| test('존재하지 않는 프로필 페이지로 접속 시 404 리다이렉트 되는 지 테스트', async ({ page }) => { | ||
| // 나의 프로필 페이지 방문 | ||
| await page.goto('/profile/4'); | ||
|
|
||
| // redirect 대기 | ||
| await expect(page.getByTestId('not-found-user')).toBeVisible(); | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check if the file exists and read its content
cat -n e2e/tests/profile.test.tsRepository: WeGo-Together/WeGo_FrontEnd
Length of output: 637
🏁 Script executed:
# Look for Playwright configuration
find . -type f -name "playwright.config.*" | head -5Repository: WeGo-Together/WeGo_FrontEnd
Length of output: 93
🏁 Script executed:
# Check for any baseURL configuration
git ls-files | grep -E "playwright|test" | head -20Repository: WeGo-Together/WeGo_FrontEnd
Length of output: 658
🏁 Script executed:
# Read the Playwright configuration to verify baseURL and browsers
cat -n playwright.config.tsRepository: WeGo-Together/WeGo_FrontEnd
Length of output: 2769
Profile E2E tests are straightforward and align with routing behavior
- Using
page.goto('/profile/1')withexpect(page).toHaveURL('/mypage')aligns with the baseURL configuration (http://localhost:3000). - The not-found case via
getByTestId('not-found-user')matches the component change and should be robust.
The comment on line 12 needs updating: it says "나의 프로필 페이지 방문" (visiting my profile page) but should reflect that it's testing a non-existent profile (e.g., "존재하지 않는 프로필 페이지 방문").
🤖 Prompt for AI Agents
In e2e/tests/profile.test.ts around lines 1 to 17, the inline comment on line 12
incorrectly reads "나의 프로필 페이지 방문" but this test visits a non-existent profile;
update that comment to "존재하지 않는 프로필 페이지 방문" so it accurately describes the test
case and leave the rest of the test unchanged.
| // MSW 활성화 여부 확인 | ||
| const isDev = process.env.NODE_ENV === 'development'; | ||
| const shouldEnable = isDev ? config.enabledInDevelopment : config.enabledInProduction; | ||
| const shouldEnable = process.env.NEXT_PUBLIC_MSW_ENABLED === 'true'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
fd -t f "browser|index" src/mockRepository: WeGo-Together/WeGo_FrontEnd
Length of output: 108
🏁 Script executed:
cat -n src/mock/index.tsRepository: WeGo-Together/WeGo_FrontEnd
Length of output: 1525
🏁 Script executed:
cat -n src/mock/browser.tsRepository: WeGo-Together/WeGo_FrontEnd
Length of output: 661
MSW init flow looks correct; one small type import polish
- The env gate (
NEXT_PUBLIC_MSW_ENABLED === 'true') cleanly centralizes MSW control for both server and client. - Caching
window.mswWorkeravoids duplicate workers across HMR, which is good. - Handler wiring is correct:
workeris created without handlers in./browser, then handlers are injected viaworker.use()on first init and reset viaworker.resetHandlers()on HMR—no duplication.
One improvement:
Mark SetupWorker as a type-only import (line 3) to clarify it's used only for the type annotation on line 10:
-import { SetupWorker } from 'msw/browser';
+import type { SetupWorker } from 'msw/browser';Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
src/mock/index.ts around line 16: the SetupWorker symbol is used only for a type
annotation (on line 10) but is imported as a regular value import; change the
import to a type-only import (e.g., import type { SetupWorker } from 'msw') so
TypeScript drops it from emitted JS and clarifies intent, leaving the rest of
the file unchanged.
📝 변경 사항
💡 MSW 동작 on/off를 환경변수로 제어하도록 수정
.env.local💡 E2E 테스트를 위한 패키지를 설치했습니다.
playwright test를 위한 환경변수 설정이 필요합니다.
.env.test💡 프로필 페이지 E2E 테스트 코드를 작성
🔗 관련 이슈
Closes #138
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.