Storybook 컴포넌트 테스트#

Vue 컴포넌트의 접근성 위반을 자동으로 테스트하기 위해 axe-playwright와 함께 Storybook test-runner를 사용합니다.

이 접근 방식을 통해 컴포넌트를 독립적으로 테스트하고 개발 프로세스 초기에 접근성 문제를 발견할 수 있습니다.

사전 요건#

Storybook 접근성 테스트를 실행하기 전에 다음을 확인하세요:

1. 모든 종속성이 설치되었습니다(yarn install). storybook 디렉토리(cd storybook) 내에서 수행해야 합니다.
2. yarn playwright install chromium으로 playwright를 설치합니다(또는 yarn playwright install로 모든 브라우저 엔진 설치).
3. 빌드된 Storybook 인스턴스가 실행 중입니다.

Storybook 접근성 테스트 실행#

Vue 컴포넌트에 대한 자동화된 접근성 테스트를 실행하려면:

1단계: Storybook 시작#

먼저 Storybook 개발 서버를 시작합니다. 두 가지 옵션이 있습니다:

# Option 1: Start Storybook with fresh fixtures
yarn storybook:start

# Option 2: Start Storybook without updating fixtures (faster for subsequent runs)
yarn storybook:start:skip-fixtures-update

중요: 테스트 세션 동안 Storybook 서버를 계속 실행하세요. 테스트가 올바르게 실행되려면 Storybook이 빌드되어 접근 가능해야 합니다.

2단계: 접근성 테스트 실행#

별도의 터미널에서 GitLab 프로젝트의 루트 디렉토리에서 다음을 실행합니다:

yarn storybook:dev:test

이 명령은 다음을 수행합니다:

1. 실행 중인 Storybook 인스턴스에 대해 테스트 러너를 실행합니다.
2. 모든 스토리를 탐색합니다.
3. 각 스토리에 대해 axe-playwright 접근성 검사를 실행합니다.
4. 발견된 접근성 위반을 보고합니다.

테스트 결과 이해#

테스트 러너는 다음을 출력합니다:

• 통과한 테스트: 접근성 표준을 충족하고 런타임 오류가 없는 컴포넌트.
• 실패한 테스트:
  • 런타임 오류가 있는 컴포넌트.
  • 접근성 위반이 있는 컴포넌트, 다음을 포함:
    • 실패한 특정 접근성 규칙
    • 위반을 일으킨 요소
    • 심각도 수준(critical, serious, moderate, minor)
    • 사용 가능한 경우 수정 제안

테스트 실행의 완전한 출력은 storybook/tmp/storybook-results.json 파일에서 찾을 수 있습니다.

Storybook 접근성 테스트를 위한 모범 사례#

1. 모든 스토리 변형 테스트: 컴포넌트의 각 스토리가 다양한 상태와 구성을 나타내는지 확인합니다.
2. 인터랙티브 상태 포함: 호버, 포커스, 활성 및 비활성 상태를 보여주는 스토리를 만듭니다.
3. 다양한 데이터로 테스트: 실제 사용 시나리오를 반영하는 현실적인 데이터를 사용합니다.
4. 즉시 위반 해결: 접근성 문제가 식별되는 즉시 수정합니다.
5. 컴포넌트 접근성 문서화: 컴포넌트의 스토리 문서에 접근성 고려 사항을 포함합니다.

개발 워크플로우와의 통합#

Storybook 접근성 테스트를 개발 프로세스에 통합하는 것을 고려하세요:

1. 컴포넌트 개발 중: 문제를 초기에 발견하기 위해 자주 테스트를 실행합니다.
2. 머지 리퀘스트 전: 모든 새로운 또는 수정된 컴포넌트가 접근성 테스트를 통과하는지 확인합니다.

이 테스트는 *.vue 또는 *.stories.js 파일을 편집할 때마다 CI에서도 실행됩니다. test-frontend 파이프라인의 storybook-test 잡에서 찾을 수 있습니다.

문제 해결#

테스트 실행이 실패하는 경우:

1. Storybook이 실행 중인지 확인: Storybook 서버가 예상된 URL에서 접근 가능한지 확인합니다.
2. 종속성 확인: yarn install을 실행하여 모든 패키지가 설치되었는지 확인합니다.
3. 빌드 오류 확인: Storybook 빌드 출력에서 오류를 찾습니다.
4. 캐시 지우기: 예상치 못한 문제가 발생하면 Storybook을 재시작해 봅니다.

도움 받기#

• 접근성 테스트 질문은 프론트엔드 테스트 가이드를 참조하세요.
• 접근성 모범 사례는 접근성 모범 사례 가이드를 참조하세요.
• 컴포넌트별 접근성 지침은 Pajamas 컴포넌트 문서를 확인하세요.
• 전역 변경이 필요한 접근성 문제를 발견하는 경우 accessibility 및 심각도 레이블(예: accessibility:critical)과 함께 후속 이슈를 만듭니다. 테스트 출력이 심각도를 알려줍니다.