diff --git a/src/__TEST__/reviews/page.test.tsx.bak b/src/__TEST__/reviews/page.test.tsx similarity index 63% rename from src/__TEST__/reviews/page.test.tsx.bak rename to src/__TEST__/reviews/page.test.tsx index ad1daf5c..8681509c 100644 --- a/src/__TEST__/reviews/page.test.tsx.bak +++ b/src/__TEST__/reviews/page.test.tsx @@ -1,56 +1,59 @@ import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }) => { - await page.goto('/reviews'); - // 네트워크 활동이 없을 때까지 기다림 (데이터 로딩 포함) - await page.waitForLoadState('networkidle'); + await page.goto('/reviews', { waitUntil: 'networkidle' }); + + test.slow(); }); // 페이지 정상 로드 확인 test('render title, score and reviews', async ({ page }) => { // Head 타이틀 확인 - await expect(page.locator('h2')).toContainText('모든 리뷰'); + await expect(page.getByRole('heading', { name: '모든 리뷰' })).toBeVisible(); // Score 데이터가 최초 3.7인지 확인 - expect(page.getByTestId('average-score')).toHaveText('3.7'); + await expect(page.getByTestId('average-score')).toHaveText('3.7'); // 최초 리뷰 데이터가 10개인지 확인 (서버사이드로 렌더링 된 데이터) - expect(page.getByTestId('review-item')).toHaveCount(10); + await expect(page.getByTestId('review-item')).toHaveCount(10); }); test.describe('change score data when clicked tab or chip', () => { test('average score is 5 When clicked WORKATION tab ', async ({ page }) => { - await page.click('[data-testid="tab-WORKATION"]'); - const workationScore = page.getByTestId('average-score'); - await workationScore.waitFor(); - expect(workationScore).toHaveText('5'); + await page.getByTestId('tab-WORKATION').click(); + + const score = page.getByTestId('average-score'); + await score.waitFor(); + await expect(score).toHaveText('5'); }); test('average score is 3.7 When clicked DALLAEMFIT tab ', async ({ page, }) => { - await page.click('[data-testid="tab-DALLAEMFIT"]'); - const dallaemfitScore = page.getByTestId('average-score'); - await dallaemfitScore.waitFor(); - expect(dallaemfitScore).toHaveText('3.7'); + await page.getByTestId('tab-DALLAEMFIT').click(); + + const score = page.getByTestId('average-score'); + await score.waitFor(); + await expect(score).toHaveText('3.7'); }); test('average score is 3.5 When clicked OFFICE STRETCHING chip ', async ({ page, }) => { await page.locator('span').getByText('오피스 스트레칭').click(); - const officeStretchingScore = page.getByTestId('average-score'); - await officeStretchingScore.waitFor(); - expect(officeStretchingScore).toHaveText('3.5'); + + const score = page.getByTestId('average-score'); + await score.waitFor(); + await expect(score).toHaveText('3.5'); }); test('average score is 5 When clicked MINDFULNESS chip ', async ({ page, }) => { await page.locator('span').getByText('마인드풀니스').click(); - const mindfulnessScore = page.getByTestId('average-score'); - await mindfulnessScore.waitFor(); - expect(mindfulnessScore).toHaveText('5'); + const score = page.getByTestId('average-score'); + await score.waitFor(); + await expect(score).toHaveText('5'); }); }); @@ -60,7 +63,7 @@ test('filter reviews by location', async ({ page }) => { // 건대입구 필터링 시 리뷰 아이템이 10개인지 확인 await page.getByTestId('filter-component').getByText('지역 전체').click(); const filterOptions1 = page.locator('span').getByText('건대입구'); - await filterOptions1.waitFor(); + await filterOptions1.waitFor({ state: 'visible' }); await filterOptions1.click(); expect(page.getByTestId('review-item')).toHaveCount(10); @@ -68,23 +71,27 @@ test('filter reviews by location', async ({ page }) => { // 신림 필터링 시 리뷰 아이템이 0개인지 확인 await page.getByTestId('filter-component').getByText('건대입구').click(); const filterOptions2 = page.locator('span').getByText('신림'); - await filterOptions2.waitFor(); + await filterOptions2.waitFor({ state: 'visible' }); await filterOptions2.click(); - expect(page.getByTestId('review-item')).toHaveCount(0); + await expect(page.getByText('아직 리뷰가 없어요')).toBeVisible(); + const count = await page.getByTestId('review-item').count(); + expect(count).toBe(0); }); // 무한스크롤 테스트 test('infinite scroll', async ({ page }) => { // 리뷰 아이템이 10개인지 확인 - expect(page.getByTestId('review-item')).toHaveCount(10); + await expect(page.getByTestId('review-item')).toHaveCount(10); // 스크롤 이벤트 await page.getByTestId('hasMoreRef').scrollIntoViewIfNeeded(); // 추가로 10개의 리뷰 아이템이 렌더링 되었는지 확인 - await page.waitForSelector('[data-testid="review-item"]:nth-child(20)'); - expect(page.getByTestId('review-item')).toHaveCount(20); + const item20th = page.getByTestId('review-item').nth(19); + await item20th.waitFor({ state: 'visible' }); + + await expect(page.getByTestId('review-item')).toHaveCount(20); }); // 리뷰 아이템 클릭 시 상세 페이지로 이동 확인 diff --git a/src/instrumentation.ts b/src/instrumentation.ts index 4bd16eb0..80f6e0b2 100644 --- a/src/instrumentation.ts +++ b/src/instrumentation.ts @@ -4,6 +4,8 @@ export async function register() { process.env.NEXT_RUNTIME === 'nodejs' ) { const { server } = await import('./msw/server'); - server.listen(); + server.listen({ + onUnhandledRequest: 'bypass', + }); } } diff --git a/src/msw/handlers.ts b/src/msw/handlers.ts index dafe984c..d37be1d4 100644 --- a/src/msw/handlers.ts +++ b/src/msw/handlers.ts @@ -22,10 +22,10 @@ export const handlers = [ /* * GET - * /reviews/score + * /reviews/scores */ http.get( - `${process.env.NEXT_PUBLIC_API_BASE_URL}/reviews/score`, + `${process.env.NEXT_PUBLIC_API_BASE_URL}/reviews/scores`, ({ request }) => { const url = new URL(request.url); const queryParam = qs.parse(url.searchParams.toString());