chantastic/one-million-ui-states

A demonstration of how I test one million UI states every merge

How I Test a Million UI States with Every Merge — Visual Testing with Storybook

• Lesson 0: Explore Storybook UI
  • Clone repo
  • npm run storybook
  • Features
    • Generated docs and examples
    • Controls (for fiddling)
    • Interactions
• Lesson 1: Anatomy of a Story
• Lesson 2: Compose stories
• Lesson 3: Document extreme cases
• Lesson 4: Set story viewport
• Lesson 5: Anatomy of a play function
• Lesson 6: Compose play functions
• Lesson 7: Stories eliminate complex setup
• Lesson 8: Run tests headlessly
  • npm install @storybook/test-runner --save-dev
  • npx playwright install
  • npx exec test-storybook
• Lesson 9: Add accessibility tests with axe-eplaywright
  • npm install axe-playwright
  • fix button.css
  • fix page anchor
• Lesson 10: Capture snapshots of the accessibility tree (probably the only acceptable use of Jest Snapshots)
• [Lesson 11: Integrate visual tests with Chromatic]
  • Log into chromatic.com
  • Add project and connect with GitHub
  • npm install --save-dev chromatic
  • npx chromatic --project-token=<project_token>
  • Go to project
  • Explore UI features
• Lesson 12: CI/CD with GitHub actions
  • Add secret
  • Add GitHub workflow file
• Lesson 13: Snapshot multiple viewports in Chromatic with modes
• Lesson 13: Snapshot multiple viewports in Chromatic with modes
  • Import viewportModes into Page.stories.jsx