CI/CD Integration

CI/CD workflow

हर commit पर component quality ensure करने के लिए Storybook tests को अपने CI/CD pipeline में integrate करें। Interaction tests, accessibility tests, और visual tests को automatically चलाएँ।

GitHub Actions example

यहाँ GitHub Actions में Storybook tests कैसे चलाएँ।

name: Storybook Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build-storybook
      - run: npx concurrently -k -s first "npx http-server storybook-static --port 6006 --silent" "npx wait-on tcp:6006 && npm run test-storybook"
      - uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Test automation benefits

CI/CD integration component regressions को जल्दी पकड़ता है, accessibility compliance ensure करता है, और deployments में design consistency को maintain करता है।

Push से पहले tests को locally चलाना

CI में push करने से पहले issues को पकड़ने के लिए Storybook tests को locally चलाएँ।

# Run interaction tests
npm run test-storybook

# Run visual tests against local build
npm run build-storybook
npx chromatic --local