E2E 테스트

          ┌─────────┐
          │   E2E   │  ← 적게, 핵심 시나리오만
         ─┼─────────┼─
        │  통합 테스트  │
       ─┼─────────────┼─
      │    단위 테스트    │  ← 많이, 빠르게
     ─┴─────────────────┴─

E2E: 느리고 비용이 높지만, 실제 사용자 경험을 검증
단위: 빠르고 비용이 낮지만, 통합 동작을 보장하지 않음

// playwright.config.ts
import { defineConfig } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  timeout: 30000,
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure'
  },
  webServer: {
    command: 'npm run dev',
    port: 5173,
    reuseExistingServer: !process.env.CI
  }
})

// e2e/login.spec.ts
import { test, expect } from '@playwright/test'

test.describe('로그인 플로우', () => {
  test('유효한 자격 증명으로 로그인 성공', async ({ page }) => {
    await page.goto('/login')

    // 폼 입력
    await page.fill('[data-testid="email"]', 'test@example.com')
    await page.fill('[data-testid="password"]', 'password123')
    await page.click('[data-testid="submit"]')

    // 대시보드로 리다이렉트 확인
    await expect(page).toHaveURL('/dashboard')
    await expect(page.locator('[data-testid="welcome"]')).toContainText('안녕하세요')
  })

  test('잘못된 비밀번호로 에러 메시지 표시', async ({ page }) => {
    await page.goto('/login')

    await page.fill('[data-testid="email"]', 'test@example.com')
    await page.fill('[data-testid="password"]', 'wrong')
    await page.click('[data-testid="submit"]')

    await expect(page.locator('[data-testid="error"]')).toBeVisible()
    await expect(page.locator('[data-testid="error"]')).toContainText('비밀번호가 올바르지 않습니다')
  })
})

// cypress/e2e/todo.cy.ts
describe('Todo 앱', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  it('새 할일을 추가할 수 있다', () => {
    cy.get('[data-testid="new-todo"]').type('Vue 공부하기{enter}')

    cy.get('[data-testid="todo-list"]')
      .should('contain', 'Vue 공부하기')
  })

  it('할일을 완료 처리할 수 있다', () => {
    cy.get('[data-testid="new-todo"]').type('테스트 작성{enter}')
    cy.get('[data-testid="todo-checkbox"]').first().click()

    cy.get('[data-testid="todo-item"]').first()
      .should('have.class', 'completed')
  })

  it('완료된 할일을 삭제할 수 있다', () => {
    cy.get('[data-testid="new-todo"]').type('삭제할 항목{enter}')
    cy.get('[data-testid="delete-btn"]').first().click()

    cy.get('[data-testid="todo-list"]')
      .should('not.contain', '삭제할 항목')
  })
})

// e2e/pages/LoginPage.ts
import { type Page, type Locator } from '@playwright/test'

export class LoginPage {
  readonly page: Page
  readonly emailInput: Locator
  readonly passwordInput: Locator
  readonly submitButton: Locator
  readonly errorMessage: Locator

  constructor(page: Page) {
    this.page = page
    this.emailInput = page.locator('[data-testid="email"]')
    this.passwordInput = page.locator('[data-testid="password"]')
    this.submitButton = page.locator('[data-testid="submit"]')
    this.errorMessage = page.locator('[data-testid="error"]')
  }

  async goto() {
    await this.page.goto('/login')
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email)
    await this.passwordInput.fill(password)
    await this.submitButton.click()
  }
}

// e2e/login.spec.ts
import { test, expect } from '@playwright/test'
import { LoginPage } from './pages/LoginPage'

test('로그인 성공', async ({ page }) => {
  const loginPage = new LoginPage(page)
  await loginPage.goto()
  await loginPage.login('test@example.com', 'password123')

  await expect(page).toHaveURL('/dashboard')
})

E2E 테스트 대상:
✓ 핵심 사용자 플로우 (로그인, 결제, 가입)
✓ 여러 페이지에 걸친 시나리오
✓ 브라우저 특유 동작 (쿠키, 로컬스토리지)

단위/컴포넌트 테스트 대상:
✓ 개별 컴포넌트 동작
✓ Composable 로직
✓ 유틸리티 함수
✓ 에지 케이스