test: E2E테스트 코드 작성 : 메모 상세 정보, 삭제, 업데이트 기능 #177
Conversation
Walkthrough이 변경사항은 E2E 테스트 구조를 병렬/직렬로 분리하고, 테스트 유틸리티 함수와 상수를 개선하며, 가이드 완료 시 토스트 알림 및 다국어 메시지를 추가합니다. 또한 테스트 편의성을 위한 data-testid 속성 추가, 일부 불필요한 코드 제거, 번역 리소스 확장 등이 포함됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebApp
participant GuideDriver
participant Toast
User->>WebApp: 로그인 및 메모 페이지 접근
WebApp->>GuideDriver: 가이드 시작
GuideDriver-->>User: 가이드 스텝 안내
User->>GuideDriver: 가이드 완료
GuideDriver->>WebApp: onDestroyed 콜백 호출
WebApp->>Toast: "가이드 완료" 토스트 알림 표시
Possibly related PRs
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![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)
e2e/tests/lib/utils.ts (1)
38-42: 가이드 스킵 함수에 대한 개선 제안입니다.현재 구현은 가이드가 항상 3단계라고 가정하고 있습니다. 가이드 단계가 변경되거나 타이밍 문제로 인해 테스트가 불안정해질 수 있습니다.
더 안정적인 구현을 위한 개선안:
export async function skipGuide(page: Page) { - await page.locator(".driver-popover-next-btn").click(); - await page.locator(".driver-popover-next-btn").click(); - await page.locator(".driver-popover-next-btn").click(); + // 가이드 완료 버튼이 나타날 때까지 다음 버튼 클릭 + while (await page.locator(".driver-popover-next-btn").isVisible()) { + await page.locator(".driver-popover-next-btn").click(); + await page.waitForTimeout(500); // 애니메이션 대기 + } + + // 완료 버튼이 있다면 클릭 + const doneButton = page.locator(".driver-popover-close-btn, [data-testid='guide-done-btn']"); + if (await doneButton.isVisible()) { + await doneButton.click(); + } }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
.vscode/settings.json(1 hunks)e2e/tests/create-memo.test.ts(0 hunks)e2e/tests/delete-memo.test.ts(1 hunks)e2e/tests/lib/utils.ts(1 hunks)e2e/tests/memo-grid.test.ts(1 hunks)e2e/tests/update-memo.test.ts(1 hunks)packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/MemoOption.tsx(3 hunks)packages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsx(4 hunks)packages/web/src/modules/guide/useGuide.ts(4 hunks)packages/web/src/modules/i18n/locales/en/translation.json(1 hunks)packages/web/src/modules/i18n/locales/ko/translation.json(1 hunks)
💤 Files with no reviewable changes (1)
- e2e/tests/create-memo.test.ts
🧰 Additional context used
📓 Path-based instructions (2)
`**/*`: Continuously improve code rules by monitoring for new code patterns, rep...
**/*: Continuously improve code rules by monitoring for new code patterns, repeated implementations, common errors, new libraries, and emerging best practices across the entire codebase.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/self_improve.mdc)
List of files the instruction was applied to:
packages/web/src/modules/i18n/locales/ko/translation.jsonpackages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsxpackages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/MemoOption.tsxe2e/tests/lib/utils.tspackages/web/src/modules/i18n/locales/en/translation.jsone2e/tests/delete-memo.test.tse2e/tests/update-memo.test.tspackages/web/src/modules/guide/useGuide.tse2e/tests/memo-grid.test.ts
`packages/**`: The 'packages/' directory is for shared packages that can be used by both the Chrome extension and other applications in the monorepo.
packages/**: The 'packages/' directory is for shared packages that can be used by both the Chrome extension and other applications in the monorepo.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/tech-stack.mdc)
List of files the instruction was applied to:
packages/web/src/modules/i18n/locales/ko/translation.jsonpackages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsxpackages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/MemoOption.tsxpackages/web/src/modules/i18n/locales/en/translation.jsonpackages/web/src/modules/guide/useGuide.ts
🧠 Learnings (6)
packages/web/src/modules/i18n/locales/ko/translation.json (1)
Learnt from: guesung
PR: guesung/Web-Memo#98
File: pages/side-panel/src/components/MemoForm.tsx:0-0
Timestamp: 2024-11-20T12:55:38.444Z
Learning: 프로젝트에서 메시지는 추후 i18n을 도입하여 한 곳에서 관리할 예정입니다. 따라서 메시지를 상수로 관리하라는 제안은 불필요합니다.
packages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsx (2)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/coding-preferences.mdc:0-0
Timestamp: 2025-06-24T08:12:51.130Z
Learning: Minimize 'use client' usage in React, only using it for Web API access.
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/coding-preferences.mdc:0-0
Timestamp: 2025-06-24T08:12:51.130Z
Learning: Use declarative JSX in React components.
packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/MemoOption.tsx (2)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/coding-preferences.mdc:0-0
Timestamp: 2025-06-24T08:12:51.130Z
Learning: Prefer named exports for components.
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/coding-preferences.mdc:0-0
Timestamp: 2025-06-24T08:12:51.130Z
Learning: Use declarative JSX in React components.
e2e/tests/delete-memo.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/update-memo.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/memo-grid.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
🧬 Code Graph Analysis (4)
e2e/tests/delete-memo.test.ts (4)
e2e/tests/fixtures.ts (2)
test(13-28)expect(29-29)e2e/tests/lib/utils.ts (5)
login(17-23)openSidePanel(11-15)findSidePanelPage(25-36)fillMemo(6-9)skipGuide(38-42)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
e2e/tests/update-memo.test.ts (4)
e2e/tests/fixtures.ts (2)
test(13-28)expect(29-29)e2e/tests/lib/utils.ts (5)
login(17-23)openSidePanel(11-15)findSidePanelPage(25-36)fillMemo(6-9)skipGuide(38-42)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
packages/web/src/modules/guide/useGuide.ts (2)
packages/ui/src/hooks/use-toast.ts (2)
useToast(191-191)toast(191-191)packages/shared/src/modules/local-storage/util.ts (2)
setLocalStorageTrue(4-6)checkLocalStorageTrue(8-10)
e2e/tests/memo-grid.test.ts (4)
e2e/tests/fixtures.ts (2)
test(13-28)expect(29-29)e2e/tests/lib/utils.ts (5)
login(17-23)openSidePanel(11-15)findSidePanelPage(25-36)fillMemo(6-9)skipGuide(38-42)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: tests_e2e
- GitHub Check: tests_e2e
🔇 Additional comments (13)
.vscode/settings.json (1)
14-15: px-to-rem 설정 추가가 적절합니다.16px = 1rem 비율은 웹 표준에 따른 일반적인 설정값입니다. 일관된 스타일링을 위한 좋은 설정 추가입니다.
packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/MemoOption.tsx (3)
26-27: import 순서 변경이 적절합니다.toast와 ToastAction의 순서 변경은 기능에 영향을 주지 않으며, 코드 정리 차원에서 적절합니다.
143-143: E2E 테스트를 위한 data-testid 추가가 좋습니다.메모 옵션 버튼에 대한 안정적인 테스트 셀렉터를 제공하여 테스트 안정성을 높입니다.
153-153: 메모 삭제 기능 테스트를 위한 식별자가 적절합니다.삭제 버튼에 대한 명확한 테스트 식별자로 E2E 테스트에서 정확한 요소 선택이 가능합니다.
packages/web/src/modules/i18n/locales/ko/translation.json (1)
139-141: 가이드 완료 관련 번역 추가가 적절합니다.새로운 가이드 완료 기능에 대한 한국어 번역이 자연스럽고, 기존 톤앤매너와 일치합니다. 이모지 사용도 사용자 경험을 향상시킵니다.
packages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsx (3)
97-101: useEffect 의존성 배열 변경에 대한 검토가 필요합니다.textareaRef와 ref를 의존성 배열에 추가했지만, 이들은 참조 객체로 렌더링 간에 변경되지 않습니다. 린트 무시 주석이 있는 것으로 보아 의존성이 적절하지 않을 수 있습니다.
원래 빈 배열이 의도된 것인지 확인이 필요합니다:
// 텍스트영역 높이 조정은 마운트 시에만 필요하므로 - }, [textareaRef, ref]); + }, []); // 마운트 시에만 실행또는 memoData가 변경될 때 높이를 재조정하려는 의도라면:
- }, [textareaRef, ref]); + }, [memoData?.memo]); // 메모 내용이 변경될 때 높이 재조정
129-129: 테스트용 data-testid 추가가 적절합니다.메모 텍스트 영역에 대한 안정적인 테스트 셀렉터를 제공하여 E2E 테스트 품질을 향상시킵니다.
148-151: 저장 버튼 테스트 식별자가 적절합니다.메모 저장 기능 테스트를 위한 명확한 식별자로 테스트 안정성을 높입니다.
packages/web/src/modules/i18n/locales/en/translation.json (1)
139-141: 새로운 번역 키 추가가 적절합니다.가이드 완료 시 표시될 토스트 메시지를 위한 번역 키가 올바르게 추가되었습니다. 기존 구조와 일관성을 유지하고 있으며, 키 네이밍도 적절합니다.
e2e/tests/memo-grid.test.ts (1)
12-35: 메모 그리드 테스트 구현이 우수합니다.테스트 구조가 명확하고 목적이 분명합니다. 읽기 전용 테스트이므로 테스트 격리 문제도 없고, 메모 그리드 기능을 효과적으로 검증하고 있습니다.
packages/web/src/modules/guide/useGuide.ts (3)
8-10: static import 사용으로 성능이 개선되었습니다.CSS를 static import로 변경한 것은 좋은 개선입니다. 동적 import보다 번들링 시점에 최적화되어 성능상 이점이 있습니다.
29-36: 가이드 완료 로직이 잘 통합되었습니다.
onDestroyed콜백으로 가이드 완료 시 localStorage 설정과 토스트 알림을 한 곳에서 처리하는 것이 깔끔합니다.allowClose: false설정으로 사용자 경험도 개선되었습니다.
79-80: 중복 초기화 방지 로직이 추가되어 안정성이 향상되었습니다.
driverObj.getState().isInitialized조건 추가로 가이드가 이미 초기화된 경우 중복 실행을 방지하는 것이 좋습니다. 이는 예상치 못한 동작을 방지합니다.
e2e/tests/update-memo.test.ts
Outdated
| test("메모를 수정할 수 있다.", async ({ page }) => { | ||
| const memoItem = page.locator(".memo-item", { | ||
| hasText: memoText, | ||
| }); | ||
|
|
||
| await memoItem.click(); | ||
|
|
||
| const newMemoText = String(new Date()); | ||
|
|
||
| await page.getByTestId("memo-textarea").fill(newMemoText); | ||
| await page.getByTestId("memo-save-button").click(); | ||
|
|
||
| await expect(page.getByText(newMemoText)).toBeVisible(); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
메모 업데이트 테스트 로직을 보완해주세요.
현재 테스트는 새로운 텍스트가 표시되는지만 확인하고 있습니다. 완전한 테스트를 위해 이전 텍스트가 더 이상 표시되지 않는지도 검증하는 것이 좋겠습니다.
다음과 같이 테스트를 보완할 수 있습니다:
await page.getByTestId("memo-textarea").fill(newMemoText);
await page.getByTestId("memo-save-button").click();
+ await expect(page.getByText(memoText)).toBeHidden();
await expect(page.getByText(newMemoText)).toBeVisible();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| test("메모를 수정할 수 있다.", async ({ page }) => { | |
| const memoItem = page.locator(".memo-item", { | |
| hasText: memoText, | |
| }); | |
| await memoItem.click(); | |
| const newMemoText = String(new Date()); | |
| await page.getByTestId("memo-textarea").fill(newMemoText); | |
| await page.getByTestId("memo-save-button").click(); | |
| await expect(page.getByText(newMemoText)).toBeVisible(); | |
| }); | |
| test("메모를 수정할 수 있다.", async ({ page }) => { | |
| const memoItem = page.locator(".memo-item", { | |
| hasText: memoText, | |
| }); | |
| await memoItem.click(); | |
| const newMemoText = String(new Date()); | |
| await page.getByTestId("memo-textarea").fill(newMemoText); | |
| await page.getByTestId("memo-save-button").click(); | |
| await expect(page.getByText(memoText)).toBeHidden(); | |
| await expect(page.getByText(newMemoText)).toBeVisible(); | |
| }); |
🤖 Prompt for AI Agents
In e2e/tests/update-memo.test.ts around lines 30 to 43, the test only verifies
that the new memo text is visible after update but does not check that the old
memo text is no longer displayed. To fix this, add an assertion to confirm the
previous memo text is not visible after the update, ensuring the memo was fully
updated and the old content removed from the page.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
e2e/tests/delete-memo.test.ts(1 hunks)e2e/tests/lib/utils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- e2e/tests/delete-memo.test.ts
🧰 Additional context used
📓 Path-based instructions (1)
`**/*`: Continuously improve code rules by monitoring for new code patterns, rep...
**/*: Continuously improve code rules by monitoring for new code patterns, repeated implementations, common errors, new libraries, and emerging best practices across the entire codebase.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/self_improve.mdc)
List of files the instruction was applied to:
e2e/tests/lib/utils.ts
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: tests_e2e
- GitHub Check: build-extension
- GitHub Check: build-extension
- GitHub Check: tests_e2e
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
e2e/tests/serial/create-memo.test.ts (1)
25-33: 테스트 안정성을 위한 개선 제안여러 번의 새로고침 테스트가 있지만, 각 새로고침 사이에 충분한 대기 시간이 없어 불안정할 수 있습니다.
await sidePanelPage.reload(); + await sidePanelPage.waitForTimeout(500); await expect(sidePanelPage.locator("#memo-textarea")).toHaveValue(text); await sidePanelPage.reload(); + await sidePanelPage.waitForTimeout(500); await expect(sidePanelPage.locator("#memo-textarea")).toHaveValue(text); await sidePanelPage.reload(); + await sidePanelPage.waitForTimeout(500); await expect(sidePanelPage.locator("#memo-textarea")).toHaveValue(text);e2e/tests/serial/delete-memo.test.ts (2)
30-36: 호버 후 클릭 시퀀스에 대기 시간 추가 제안hover 액션 후 즉시 클릭하면 UI가 완전히 렌더링되기 전에 클릭할 수 있습니다.
await memoItem.hover(); + await page.waitForTimeout(300); await memoItem.getByTestId("memo-option").click(); await page.getByTestId("memo-delete-button").click();
53-61: 되돌리기 테스트의 타이밍 개선 제안삭제 후 토스트 메시지가 나타날 때까지 기다리는 것이 더 안정적입니다.
await page.getByTestId("memo-delete-button").click(); + // 토스트 메시지가 나타날 때까지 기다림 + await expect(page.getByText("Memo deleted", { exact: true })).toBeVisible(); + await page .getByText("Undo", { exact: true, }) .click();e2e/tests/serial/update-memo.test.ts (2)
16-27: 코드 중복 개선 제안delete-memo.test.ts와 거의 동일한 beforeEach 설정이 있습니다. 공통 설정 함수로 추출하는 것을 고려해보세요.
e2e/tests/lib/utils.ts에 공통 함수 추가:
export async function createTestMemo(page: Page): Promise<string> { await login(page); await skipGuide(page); await openSidePanel(page); const sidePanelPage = await findSidePanelPage(page); const memoText = String(new Date()); await fillMemo(sidePanelPage, memoText); await page.goto(`${LANGUAGE}${PATHS.memos}`); return memoText; }그리고 두 테스트 파일에서 사용:
test.beforeEach(async ({ page }) => { memoText = await createTestMemo(page); });
38-40: 메모 저장 후 대기 시간 추가 제안저장 버튼 클릭 후 UI 업데이트가 완료될 때까지 기다리는 것이 더 안정적입니다.
await page.getByTestId("memo-textarea").fill(newMemoText); await page.getByTestId("memo-save-button").click(); + await page.waitForTimeout(500); await expect(page.getByText(newMemoText)).toBeVisible();e2e/tests/parallel/memo-grid.test.ts (1)
24-29: beforeEach의 로그인 호출이 중복될 수 있습니다.각 테스트마다 새로운 페이지 인스턴스가 생성되므로 로그인이 필요하지만,
beforeAll에서 이미 로그인한 상태와의 중복을 검토해보세요.현재 구조는 각 테스트의 독립성을 보장하므로 적절하지만, 성능 최적화가 필요한 경우 로그인 상태를 재사용하는 방법을 고려할 수 있습니다.
e2e/playwright.config.ts (1)
8-8: maxFailures 설정을 검토하세요.
maxFailures: 0으로 설정하면 첫 번째 실패 시 모든 테스트가 중단됩니다. 개발 환경에서는 모든 실패를 확인하는 것이 유용할 수 있습니다.환경에 따라 다르게 설정하는 것을 고려해보세요:
- maxFailures: 0, + maxFailures: process.env.CI ? 0 : undefined,
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
e2e/playwright.config.ts(2 hunks)e2e/tests/lib/constants.ts(1 hunks)e2e/tests/lib/utils.ts(2 hunks)e2e/tests/parallel/guide.test.ts(2 hunks)e2e/tests/parallel/login.test.ts(4 hunks)e2e/tests/parallel/memo-grid.test.ts(1 hunks)e2e/tests/serial/create-memo.test.ts(1 hunks)e2e/tests/serial/delete-memo.test.ts(1 hunks)e2e/tests/serial/update-memo.test.ts(1 hunks)packages/web/src/app/[lng]/_components/QueryProvider.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/web/src/app/[lng]/_components/QueryProvider.tsx
- e2e/tests/lib/constants.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- e2e/tests/lib/utils.ts
🧰 Additional context used
📓 Path-based instructions (1)
`**/*`: Continuously improve code rules by monitoring for new code patterns, rep...
**/*: Continuously improve code rules by monitoring for new code patterns, repeated implementations, common errors, new libraries, and emerging best practices across the entire codebase.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/self_improve.mdc)
List of files the instruction was applied to:
e2e/tests/serial/create-memo.test.tse2e/tests/parallel/guide.test.tse2e/tests/parallel/login.test.tse2e/tests/serial/update-memo.test.tse2e/tests/serial/delete-memo.test.tse2e/tests/parallel/memo-grid.test.tse2e/playwright.config.ts
🧠 Learnings (8)
📓 Common learnings
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/serial/create-memo.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/parallel/guide.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/parallel/login.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/serial/update-memo.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/serial/delete-memo.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/tests/parallel/memo-grid.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
e2e/playwright.config.ts (2)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Environment variables are centrally managed through a '.env' file, and cross-browser build configuration is supported.
🧬 Code Graph Analysis (6)
e2e/tests/serial/create-memo.test.ts (2)
e2e/tests/fixtures.ts (1)
test(13-28)e2e/tests/lib/utils.ts (2)
login(15-21)skipGuide(36-42)
e2e/tests/parallel/guide.test.ts (2)
e2e/tests/fixtures.ts (1)
test(13-28)e2e/tests/lib/constants.ts (1)
EXAMPLE_URL(2-2)
e2e/tests/parallel/login.test.ts (3)
e2e/tests/fixtures.ts (1)
test(13-28)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
e2e/tests/serial/update-memo.test.ts (4)
e2e/tests/fixtures.ts (2)
test(13-28)expect(29-29)e2e/tests/lib/utils.ts (5)
login(15-21)skipGuide(36-42)openSidePanel(11-13)findSidePanelPage(23-34)fillMemo(6-9)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
e2e/tests/serial/delete-memo.test.ts (4)
e2e/tests/fixtures.ts (2)
test(13-28)expect(29-29)e2e/tests/lib/utils.ts (5)
login(15-21)skipGuide(36-42)openSidePanel(11-13)findSidePanelPage(23-34)fillMemo(6-9)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
e2e/tests/parallel/memo-grid.test.ts (3)
e2e/tests/lib/utils.ts (5)
login(15-21)skipGuide(36-42)openSidePanel(11-13)findSidePanelPage(23-34)fillMemo(6-9)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: tests_e2e
- GitHub Check: tests_e2e
🔇 Additional comments (17)
e2e/tests/parallel/guide.test.ts (3)
2-3: 테스트 구조 개선이 잘 되었습니다.상위 디렉토리로 import 경로를 업데이트하여 새로운 테스트 디렉토리 구조에 맞게 잘 조정되었습니다.
7-7: 병렬 실행 설정이 적절합니다.가이드 테스트는 서로 독립적이므로 병렬 실행이 적합합니다.
21-23: 사이드 패널 열기 전 페이지 이동이 적절합니다.주석으로 이유를 명확히 설명하고 있어 좋습니다. 웹 메모 외부 사이트에서 사이드 패널을 열어야 한다는 제약사항을 잘 반영했습니다.
e2e/tests/serial/create-memo.test.ts (2)
1-8: 테스트 구조가 잘 정리되었습니다.import 경로 업데이트와 skipGuide 함수 추가로 테스트 안정성이 향상되었습니다.
10-10: 직렬 실행 설정이 적절합니다.메모 생성 테스트는 상태를 공유할 수 있으므로 직렬 실행이 안전합니다.
e2e/tests/parallel/login.test.ts (3)
2-3: import 경로 업데이트가 적절합니다.새로운 디렉토리 구조에 맞게 잘 조정되었습니다.
5-5: 병렬 실행 설정이 적절합니다.로그인 테스트들은 서로 독립적이므로 병렬 실행으로 테스트 속도를 향상시킬 수 있습니다.
11-11: 테스트 안정성이 크게 향상되었습니다.URL 변경을 기다리는 waitForURL 호출을 추가하여 테스트의 동기화 문제를 해결했습니다. 이는 테스트 플레이크를 줄이는 좋은 방법입니다.
Also applies to: 21-21, 30-30, 39-39
e2e/tests/serial/delete-memo.test.ts (2)
12-12: 직렬 실행 설정이 적절합니다.메모 삭제 테스트는 상태를 변경하므로 직렬 실행이 안전합니다.
16-26: beforeEach 설정이 잘 구성되었습니다.각 테스트마다 새로운 메모를 생성하여 독립적인 테스트 환경을 만드는 것이 좋습니다.
e2e/tests/serial/update-memo.test.ts (1)
12-12: 직렬 실행 설정이 적절합니다.메모 수정 테스트는 상태를 변경하므로 직렬 실행이 안전합니다.
e2e/tests/parallel/memo-grid.test.ts (4)
1-10: Import 구문이 잘 구성되어 있습니다.필요한 유틸리티 함수들과 상수들을 적절히 import하고 있습니다.
12-13: 병렬 테스트 설정이 적절합니다.테스트가 병렬로 실행되도록 올바르게 구성되어 있습니다.
30-32: 메모 가시성 테스트가 적절합니다.생성된 메모가 페이지에서 보이는지 확인하는 간단하고 효과적인 테스트입니다.
33-36: 메모 상세 다이얼로그 테스트가 잘 구현되어 있습니다.메모 클릭 시 상세 다이얼로그가 열리고 올바른 내용이 표시되는지 확인하는 테스트가 적절합니다.
data-testid를 사용한 요소 선택도 좋은 접근입니다.e2e/playwright.config.ts (2)
18-18: 스크린샷 설정이 최적화되었습니다.
only-on-failure로 변경하여 테스트 실패 시에만 스크린샷을 캡처하도록 개선되었습니다. 이는 성능과 저장공간 측면에서 좋은 개선입니다.
22-35: 병렬 및 직렬 프로젝트 분리가 잘 구성되어 있습니다.테스트를 병렬과 직렬로 분리하여 실행하는 설정이 적절합니다. 각기 다른 디렉토리에서 테스트를 실행하도록 구성되어 있어 테스트 관리가 용이합니다.
다음 스크립트로 병렬 프로젝트의
workers: undefined설정이 의도된 것인지 확인해보세요:#!/bin/bash # 병렬 테스트 디렉토리의 테스트 파일들을 확인 fd -e ts -e js . e2e/tests/parallel/ # 직렬 테스트 디렉토리의 테스트 파일들을 확인 fd -e ts -e js . e2e/tests/serial/
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
e2e/tests/serial/memo-grid.test.ts (2)
16-34: 메모 페이지로의 중복 네비게이션을 최적화할 수 있습니다.beforeEach 설정이 전반적으로 잘 구성되어 있지만, 메모 페이지로 두 번 이동하는 부분이 있습니다 (18-22행과 29-33행). 첫 번째 네비게이션 후 메모를 생성하고 다시 같은 페이지로 이동하는 것이 필요한지 검토해보세요.
또한
memoText = String(new Date())로 생성되는 텍스트가 매우 길 수 있어 UI에서 표시 문제가 발생할 수 있습니다.다음과 같이 개선할 수 있습니다:
- memoText = String(new Date()); + memoText = `Test memo ${Date.now()}`;그리고 중복 네비게이션이 정말 필요한지 확인해보세요:
- await gotoSafely({ - page, - url: `${LANGUAGE}${PATHS.memos}`, - regexp: new RegExp(PATHS.memos), - }); + // 메모 생성 후 페이지 새로고침이 필요한 경우에만 추가
16-42: 테스트 격리 및 정리에 대한 고려사항현재 테스트는 매 beforeEach마다 새로운 메모를 생성하지만, 테스트 완료 후 정리하는 로직이 없습니다. 이로 인해 테스트 데이터가 누적될 수 있습니다.
테스트 후 생성된 메모를 정리하는 afterEach 블록을 추가하는 것을 고려해보세요.
+ test.afterEach(async ({ page }) => { + // 생성된 테스트 메모 정리 로직 추가 + // 예: 메모 삭제 또는 테스트 데이터베이스 정리 + });
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
e2e/tests/lib/utils.ts(2 hunks)e2e/tests/serial/memo-grid.test.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- e2e/tests/lib/utils.ts
🧰 Additional context used
📓 Path-based instructions (1)
`**/*`: Continuously improve code rules by monitoring for new code patterns, rep...
**/*: Continuously improve code rules by monitoring for new code patterns, repeated implementations, common errors, new libraries, and emerging best practices across the entire codebase.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/self_improve.mdc)
List of files the instruction was applied to:
e2e/tests/serial/memo-grid.test.ts
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
Learnt from: guesung
PR: guesung/Web-Memo#98
File: pages/side-panel/src/components/MemoForm.tsx:0-0
Timestamp: 2024-11-20T12:55:34.341Z
Learning: 팀에서는 추후에 i18n을 도입하여 메시지를 한 곳에서 관리할 예정이므로, 메시지를 상수로 관리하는 것은 불필요하다.
e2e/tests/serial/memo-grid.test.ts (1)
Learnt from: CR
PR: guesung/Web-Memo#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-06-24T08:13:27.483Z
Learning: Testing is performed using Vitest and Playwright 1.47.0, supporting both unit and end-to-end testing strategies.
🧬 Code Graph Analysis (1)
e2e/tests/serial/memo-grid.test.ts (4)
e2e/tests/fixtures.ts (2)
test(13-28)expect(29-29)e2e/tests/lib/utils.ts (6)
login(27-33)gotoSafely(18-21)skipGuide(48-52)openSidePanel(23-25)findSidePanelPage(35-46)fillMemo(6-10)e2e/tests/lib/constants.ts (1)
LANGUAGE(1-1)packages/shared/src/constants/Path.ts (1)
PATHS(1-15)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: tests_e2e
- GitHub Check: tests_e2e
🔇 Additional comments (4)
e2e/tests/serial/memo-grid.test.ts (4)
1-11: imports와 유틸리티 함수 사용이 적절합니다.필요한 모든 유틸리티 함수들이 올바르게 import되어 있고, 테스트에서 사용할 상수들도 적절히 가져왔습니다.
13-13: serial 모드 설정이 적절합니다.의존성이 있는 테스트들이므로 serial 모드로 설정한 것이 올바른 선택입니다.
35-37: 메모 가시성 테스트가 올바르게 구현되었습니다.생성된 메모가 페이지에 표시되는지 확인하는 기본적인 테스트로 적절합니다.
38-41: 메모 상세 페이지 테스트가 올바르게 구현되었습니다.메모 클릭 시 상세 다이얼로그가 열리고 올바른 내용이 표시되는지 확인하는 테스트입니다.
data-testid="memo-textarea"를 사용하여 안정적인 요소 선택을 하고 있습니다.
Summary by CodeRabbit
신규 기능
버그 수정
테스트
문서화
기타