테스트 전략

ONESHIM Backoffice v2는 다층 테스트 전략을 통해 품질을 보장합니다. 프로젝트 전체 95,000+개 테스트 (Python 89,710 + Backoffice 5,614 + Rust 639) 통과를 기반으로, 프론트엔드에서도 체계적인 테스트 피라미드를 구축합니다.

테스트 피라미드

Level	Tool	Target	Coverage
Unit	Vitest + RTL	Components, hooks, stores	1,110 tests (103+ files)
Component	Storybook	Visual regression + interaction	103 stories + 22 play tests
Integration	Vitest + MSW	API hooks, page flows	Core flows
E2E (Automated)	@playwright/test	Critical user journeys	100+ tests (26 files)
E2E (Interactive)	playwright-cli	개발 중 시각적 검증	스크린샷 캡처 (154 PNG)

테스트 실행 명령어

# UI 단위 테스트
pnpm --filter @oneshim/ui test:run        # 895+ tests

# Backoffice 단위 테스트
pnpm --filter @oneshim/backoffice test:run # 215+ tests

# E2E 테스트
npx playwright test                        # 100+ tests

# Storybook 빌드 검증
pnpm --filter @oneshim/ui storybook:build

Unit Test (Vitest + React Testing Library)

Vitest와 React Testing Library(RTL)를 사용하여 컴포넌트, hooks, stores를 단위 테스트합니다.

• 컴포넌트 테스트: 렌더링, 사용자 인터랙션, 접근성 검증
• Hook 테스트: renderHook으로 커스텀 hooks 독립 테스트
• Store 테스트: Zustand store의 상태 변경 로직 검증
• 현재 규모: UI 895+ tests + Backoffice 215+ tests = 1,110 tests

Component Test (Storybook)

모든 UI 컴포넌트를 Storybook으로 문서화하고 시각적 회귀 테스트를 수행합니다.

• 103개 Stories: 각 컴포넌트의 다양한 상태를 Story로 정의
• 22개 Play Tests: 인터랙션 기반 자동화 테스트
• Visual Regression: 스냅샷 비교를 통한 시각적 변경 감지
• 접근성 검사: a11y addon을 통한 자동 접근성 검증

Integration Test (Vitest + MSW)

API hooks와 페이지 단위 플로우를 통합 테스트합니다.

• MSW Mock 서버: 실제 API 응답을 모방하는 서비스 워커
• API Hook 테스트: TanStack Query hooks의 데이터 로딩, 캐싱, 에러 처리
• 페이지 플로우 테스트: 사용자 시나리오 기반 통합 테스트

E2E Test (Playwright)

Automated (@playwright/test)

주요 사용자 여정(Critical User Journeys)을 자동화된 E2E 테스트로 검증합니다.

• 100+ 테스트 (26개 파일): 로그인, 대시보드 탐색, 16 도메인 CRUD, 스크린샷 캡처
• Cross-browser: Chromium, Firefox, WebKit에서 실행
• CI 통합: GitHub Actions에서 자동 실행

Interactive (playwright-cli)

코딩 에이전트에 최적화된 브라우저 자동화 CLI 도구입니다.

• 개발 중 UI 시각적 확인: 실제 브라우저에서 페이지 렌더링 상태 확인
• 인터랙션 테스트: 클릭, 입력, 네비게이션 등 사용자 동작 시뮬레이션
• 토큰 효율적: 스냅샷 기반 페이지 분석으로 LLM 토큰 소비 최소화
• 검증 결과: 10개 페이지 모두 정상 렌더링 확인 (Light/Dark 모드)

GitHub Actions CI/CD

GitHub Actions 기반 5-job CI/CD 파이프라인으로 모든 PR과 push에 대해 자동 검증을 수행합니다. E2E 테스트 포함.

파이프라인 구조

5개 Job 상세

Job	의존성	역할
lint	-	ESLint + Biome 코드 린팅
typecheck	-	TypeScript 타입 검사
unit-test	lint, typecheck	Vitest 단위 테스트 (1,110 tests)
e2e-test	lint, typecheck	Playwright E2E 테스트 (100+ tests)
build	unit-test, e2e-test	Vite 프로덕션 빌드

환경 및 설정

• Node.js: 22
• pnpm: 10.6.5
• Path filter: oneshim-agent/backoffice/**
• Artifact uploads: backoffice dist (14일), Storybook dist (14일)

Visual Regression Testing

@storybook/test-runner + jest-image-snapshot을 사용하여 컴포넌트의 시각적 변경을 자동으로 감지합니다.

• diff threshold: 0.5% (픽셀 단위 비교)
• 스냅샷 저장: 기준 이미지와 비교하여 변경 사항 감지
• CI 통합: Storybook 빌드 후 자동 실행

# Visual regression 테스트 실행
pnpm --filter @oneshim/ui test-storybook

접근성 테스트 (a11y)

vitest-axe를 통합하여 모든 컴포넌트 테스트에서 WCAG 접근성 위반을 자동으로 검증합니다.

• 자동 검증: 모든 컴포넌트 테스트 파일에 a11y 위반 검사 포함
• 헬퍼 함수: expectNoA11yViolations() 유틸리티로 일관된 검증
• WCAG 준수: axe-core 기반 자동화된 접근성 표준 검증

// 컴포넌트 테스트 예시
import { expectNoA11yViolations } from '@oneshim/test-utils';

it('접근성 위반이 없어야 한다', async () => {
  const { container } = render(<MyComponent />);
  await expectNoA11yViolations(container);
});

MSW Mock 서버 (packages/test-utils)

packages/test-utils에서 MSW(Mock Service Worker) 기반의 테스트 인프라를 제공합니다.

14개 도메인별 핸들러

각 API 도메인에 대한 MSW 핸들러를 제공합니다.

test-utils/
├── handlers/
│   ├── dashboard.ts
│   ├── monitoring.ts
│   ├── knowledge.ts
│   ├── ai.ts
│   ├── ontology.ts
│   ├── digital-twin.ts
│   ├── audit.ts
│   ├── workflows.ts
│   ├── users.ts
│   ├── settings.ts
│   ├── auth.ts
│   ├── sessions.ts
│   ├── devices.ts
│   └── notifications.ts
├── fixtures/
│   └── ... (도메인별 fixture 데이터)
└── render.tsx (Custom render with providers)

Fixtures

테스트에 사용되는 고정 데이터를 제공합니다. 실제 API 응답 형식과 동일한 구조를 유지하여 타입 안전성을 보장합니다.

Custom Render

React Testing Library의 render를 래핑하여 필요한 Provider(QueryClient, Router, Theme 등)를 자동으로 주입합니다.

// packages/test-utils/render.tsx
import { render } from './custom-render';

// 모든 Provider가 자동으로 주입됨
render(<MyComponent />);