Skip to content

test(components): add a behavior matrix for the interactive UI kit - #956

Open
owjs3901 wants to merge 1 commit into
mainfrom
test/components-browser-matrix
Open

owjs3901 wants to merge 1 commit into
mainfrom
test/components-browser-matrix

Conversation

@owjs3901

Copy link
Copy Markdown
Contributor

Summary

RT-28: 라인 커버리지는 100%였지만 사용자에게 보이는 계약(role/name/description, 키보드 및 포커스 이동, disabled 동작)을 검증하지 않던 문제에 대해 UI kit 동작 매트릭스를 추가합니다.

packages/components/src/__tests__/behavior-matrix.browser.test.tsx를 추가했습니다. 기존 *.browser.test.tsx와 같은 환경(bun-test-env-dom)에서 돌고, CI의 bun run test가 그대로 실행합니다. 모든 상호작용은 user-event로 수행해 실제 사용자처럼 포커스가 이동합니다.

매트릭스 (concern × component)

concern Button Checkbox Toggle RadioGroup Input Textarea Select trigger Stepper button
role과 접근 가능한 이름 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Tab으로 진입, Shift+Tab으로 복귀 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
포커스 상태에서 키보드로 조작(Enter, Space, 입력) ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
disabled일 때 tab 순서에서 빠지고 키보드를 무시 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

매트릭스 외 시나리오

  • Input / Textarea: 호출자의 aria-describedby와 에러 메시지가 접근 가능한 설명으로 합쳐지는지, aria-invalid, role=alert, 에러가 없을 때 설명이 없는지
  • RadioGroup: 그룹 이름(radiogroup), 화살표 키로 선택과 포커스 이동, onChange 값
  • Select 키보드 경로
    • Tab, Enter로 열리고, listbox 이름은 trigger이며, 첫 option에 포커스가 갑니다.
    • disabled option을 건너뛰고 Enter로 선택하면 닫히면서 trigger로 포커스가 돌아옵니다. 다시 열면 선택된 option에 포커스가 갑니다.
    • Escape는 선택 없이 닫고 포커스를 돌려줍니다.
  • Stepper: 버튼과 값의 이름, 키보드로 증가시킨 뒤 min/max 경계에서 버튼이 비활성화되는지

이번 범위에서 제외 (RT-28의 다른 항목)

  • React 18 실행: 기존 react-18 CI job이 담당합니다.
  • ThemeProvider, 테마 저장소 관련 항목(CSP/storage 실패, multi-tab, system theme): packages/react 쪽 관심사이고, multi-tab/system theme은 RT-19에서 동작 자체가 아직 없습니다.
  • 매트릭스 행만 추가하면 다른 컴포넌트로 확장할 수 있는 구조입니다.

테스트 파일만 추가했고 배포 코드 변경이 없어서 changepack은 추가하지 않았습니다.

Test plan

  • bun test packages/components/src/__tests__/behavior-matrix.browser.test.tsx (41 pass)
  • bun test packages/components (253 pass)
  • tsc --strict --noEmit으로 테스트 파일 타입 확인
  • prettier
  • CI publish job 통과

Refs #692

🤖 Generated with Claude Code

Line coverage passed without the user-facing contracts. Every concern
now runs for every interactive component (Button, Checkbox, Toggle,
RadioGroup, Input, Textarea, Select trigger, Stepper button) through
user-event: role and accessible name, Tab and Shift+Tab reach it, the
keyboard operates it, and disabling takes it out of the tab order and
ignores the keyboard.

Beside the matrix: Input and Textarea descriptions combine the caller's
aria-describedby with the error message, RadioGroup is a named group
whose arrow keys move the selection, the Select keyboard path (open from
Tab and Enter, skip a disabled option, select, Escape, focus returned
to the trigger), and Stepper names and bounds.

Refs #692 (RT-28)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@codecov

codecov Bot commented Nov 15, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant