[2팀 박소연] Chapter 3-2 프런트엔드 테스트 코드

.github/workflows/ci.yml

@@ -6,6 +6,7 @@ on:
       - synchronize
       - opened
       - reopened
+  push:
 
   workflow_dispatch:
 
@@ -45,4 +46,23 @@ jobs:
       - name: test basic
         run: |
           pnpm install
-          pnpm run test
+          pnpm run test
+  e2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - run: |
+          pnpm install
+          npx playwright install --with-deps
+          pnpm exec playwright test

.gitignore

@@ -2,3 +2,5 @@
 .vscode
 node_modules
 .coverage
+playwright-report
+test-results

e2e/event.e2e.ts

@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('E2E: 일정 등록 시나리오', () => {
+  test.beforeEach(async ({ page }) => {
+    // 로컬 스토리지 초기화
+    await page.goto('/');
+    // 기본 렌더 확인 (리스트가 보이는지)
+    await expect(page.getByTestId('event-list')).toBeVisible();
+  });
+
+  test.describe('일정 등록 시나리오', () => {
+    test('일정 등록 테스트', async ({ page }) => {
+      const currentYear = new Date().getFullYear();
+      const currentMonth = (new Date().getMonth() + 1).toString().padStart(2, '0');
+      const currentDay = new Date().getDate().toString().padStart(2, '0');
+      await page.getByRole('textbox', { name: '제목' }).click();
+      await page.getByRole('textbox', { name: '제목' }).fill('2팀 회식');
+      await page
+        .getByRole('textbox', { name: '날짜' })
+        .fill(`${currentYear}-${currentMonth}-${currentDay}`);
+      await page.getByRole('textbox', { name: '시작 시간' }).click();
+      await page.getByRole('textbox', { name: '시작 시간' }).press('ArrowDown');
+      await page.getByRole('textbox', { name: '시작 시간' }).press('ArrowRight');
+      await page.getByRole('textbox', { name: '시작 시간' }).fill('23:11');
+      await page.getByRole('textbox', { name: '종료 시간' }).click();
+      await page.getByRole('textbox', { name: '종료 시간' }).press('ArrowDown');
+      await page.getByRole('textbox', { name: '종료 시간' }).press('Tab');
+      await page.getByRole('textbox', { name: '종료 시간' }).fill('23:20');
+      await page.getByRole('combobox', { name: '업무' }).click();
+      await page.getByRole('option', { name: '개인-option' }).click();
+      await page.getByTestId('event-submit-button').click();
+
+      // 5) 리스트에 제목 노출 확인
+      const list = page.getByTestId('event-list');
+      await expect(list.getByText('점심 약속')).toBeVisible();
+    });
+    test('일정 수정 테스트', async ({ page }) => {
+      const list = page.getByTestId('event-list');
+      // 1) 수정 버튼 클릭
+      await page.getByRole('button', { name: 'Edit event' }).last().click();
+      await page.getByRole('textbox', { name: '설명' }).click();
+      await page.getByRole('textbox', { name: '설명' }).fill('2팀 점심 모임');
+      await page.getByTestId('event-submit-button').click();
+
+      // 2) 리스트에 설명 노출 확인
+      await expect(list.getByText('2팀 점심 모임')).toBeVisible();
+    });
+    test('일정 삭제 테스트', async ({ page }) => {
+      // 1) 리스트에 제목 노출 확인
+      const list = page.getByTestId('event-list');
+      await expect(list.getByText('2팀 회식')).toBeVisible();
+
+      // 2) 마지막 이벤트 삭제 버튼 클릭
+      await page.getByRole('button', { name: 'Delete event' }).last().click();
+
+      // 7) 리스트에 제목 사라짐 확인
+      await expect(list.getByText('2팀 회식')).not.toBeVisible();
+    });
+  });
+});

e2e/event.flow.e2e.ts

@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/test';
+
+test('사용자가 캘린더 뷰를 전환하고 날짜를 탐색할 수 있다', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+
+  // 1. 초기 상태 확인 - 사용자가 월간 뷰를 보고 있음
+  await expect(page.locator('[data-testid="month-view"]')).toBeVisible();
+
+  // 현재 날짜가 표시되는지 확인 (사용자가 오늘 날짜를 볼 수 있음)
+  const today = new Date();
+  const currentDay = today.getDate().toString();
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+
+  // 2. 사용자가 주간 뷰로 전환하고 싶어함
+  await page.click('[aria-label="뷰 타입 선택"]');
+  await page.click('[aria-label="week-option"]');
+
+  // 주간 뷰로 전환되어 현재 주가 표시됨
+  await expect(page.locator('[data-testid="week-view"]')).toBeVisible();
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+
+  // 3. 사용자가 다음 주로 이동하고 싶어함
+  await page.click('[aria-label="Next"]');
+  // 다음 주로 이동했는지 확인 (뷰가 변경되었는지만 확인)
+  await expect(page.locator('[data-testid="week-view"]')).toBeVisible();
+
+  // 4. 사용자가 이전 주로 돌아가고 싶어함
+  await page.click('[aria-label="Previous"]');
+  // 다시 현재 주로 돌아왔으므로 현재 날짜가 보임
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+
+  // 5. 사용자가 다시 월간 뷰로 돌아가고 싶어함
+  await page.click('[aria-label="뷰 타입 선택"]');
+  await page.click('[aria-label="month-option"]');
+
+  // 월간 뷰로 돌아와서 전체 월을 볼 수 있음
+  await expect(page.locator('[data-testid="month-view"]')).toBeVisible();
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+
+  // 6. 사용자가 다음 달로 이동하고 싶어함
+  await page.click('[aria-label="Next"]');
+  // 다음 달로 이동했는지 확인 (뷰가 변경되었는지만 확인)
+  await expect(page.locator('[data-testid="month-view"]')).toBeVisible();
+
+  // 7. 사용자가 이전 달로 돌아가고 싶어함
+  await page.click('[aria-label="Previous"]');
+  // 다시 현재 달로 돌아왔으므로 현재 날짜가 보임
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+});
+
+test('뷰 전환 시 현재 날짜가 올바른 주/월로 이동한다', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+
+  // 1. 현재 날짜 정보 가져오기
+  const today = new Date();
+  const currentDay = today.getDate().toString();
+
+  // 2. 월간 뷰에서 현재 날짜가 표시되는지 확인
+  await expect(page.locator('[data-testid="month-view"]')).toBeVisible();
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+
+  // 3. 주간 뷰로 전환했을 때 현재 날짜가 속한 주로 이동하는지 확인
+  await page.click('[aria-label="뷰 타입 선택"]');
+  await page.click('[aria-label="week-option"]');
+
+  // 주간 뷰에서 현재 날짜가 표시되는지 확인 (현재 주로 이동했는지 검증)
+  await expect(page.locator('[data-testid="week-view"]')).toBeVisible();
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+
+  // 4. 다시 월간 뷰로 전환했을 때 현재 날짜가 속한 월로 이동하는지 확인
+  await page.click('[aria-label="뷰 타입 선택"]');
+  await page.click('[aria-label="month-option"]');
+
+  // 월간 뷰에서 현재 날짜가 표시되는지 확인 (현재 월로 이동했는지 검증)
+  await expect(page.locator('[data-testid="month-view"]')).toBeVisible();
+  await expect(page.locator(`text=${currentDay}`)).toBeVisible();
+});

e2e/event.serach.e2e.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+
+test('검색어가 있는 경우 해당 검색어를 필터링 한다.', async ({ page }) => {
+  await page.goto('/');
+
+  // 검색용 일정 생성
+  await page.getByRole('textbox', { name: '제목' }).fill('검색용');
+  await page.getByRole('textbox', { name: '날짜' }).fill('2025-08-26');
+  await page.getByRole('textbox', { name: '시작 시간' }).fill('09:00');
+  await page.getByRole('textbox', { name: '종료 시간' }).fill('10:00');
+  await page.getByRole('textbox', { name: '설명' }).fill('검색하려고 만든 이벤트');
+  await page.getByTestId('event-submit-button').click();
+
+  // 해당 일정이 추가되었는지 확인
+  await expect(page.getByTestId('event-list').getByText('검색용')).toBeVisible();
+
+  // 검색 후 해당 키워드가 표시되는지 확인
+  await page.getByRole('textbox', { name: '일정 검색' }).fill('검색용');
+  await expect(page.getByTestId('event-list').getByText('검색용')).toBeVisible();
+
+  // 검색 초기화 후 일정이 다시 표시되는지 확인
+  await page.getByRole('textbox', { name: '일정 검색' }).fill('');
+  await expect(page.getByTestId('event-list').getByText('검색용')).toBeVisible();
+
+  // 존재하지 않는 검색어 검색
+  await page.getByRole('textbox', { name: '일정 검색' }).fill('없는 검색어');
+  await expect(page.getByText('검색 결과가 없습니다')).toBeVisible();
+
+  // 검색 초기화 후 원래 일정이 표시되는지 확인
+  await page.getByRole('textbox', { name: '일정 검색' }).fill('');
+  await expect(page.getByTestId('event-list').getByText('검색용')).toBeVisible();
+
+  //추가된 일정 삭제
+  const searchEventCard = page
+    .locator('[data-testid="event-list"] .MuiBox-root')
+    .filter({ hasText: '검색용' });
+  await searchEventCard.getByRole('button', { name: 'Delete event' }).click();
+
+  await expect(page.getByTestId('event-list').getByText('검색용')).not.toBeVisible();
+});

package.json

@@ -10,6 +10,8 @@
     "dev": "concurrently \"pnpm run server:watch\" \"pnpm run start\"",
     "test": "vitest",
     "test:ui": "vitest --ui",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
     "test:coverage": "vitest run --coverage",
     "build": "tsc -b && vite build",
     "lint:eslint": "eslint . --ext ts,tsx --report-unused-disable-directives",
@@ -30,6 +32,7 @@
   },
   "devDependencies": {
     "@eslint/js": "9.33.0",
+    "@playwright/test": "^1.55.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",

playwright.config.js

@@ -0,0 +1,37 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e', // 경로 수정
+  testMatch: '**/*.e2e.ts', // e2e 테스트 파일만 실행
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  timeout: 120000, // 2분
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173', // Vite 기본 포트
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 6 * 120 * 1000, // 6분
+  },
+  testIgnore: ['**/node_modules/**', '**/playwright.config.js'], // 설정 파일 제외
+});