Skip to content

Conversation

@darwinboersma
Copy link
Contributor

@darwinboersma darwinboersma commented Jan 31, 2026

Summary

Adds Storybook Vitest addon for E2E testing of React components with strict console warning/error detection.

Changes

Testing Infrastructure

  • Add @storybook/experimental-addon-test with Vitest integration
  • Configure tests to fail on all console warnings and errors
  • Add GitHub workflow for Storybook tests in CI (storybook-tests.yml)
  • Add GitHub workflow for Storybook PR previews with cleanup (storybook-preview.yml)

Component Fixes

Fixed styled-components transient props ($ prefix) to prevent React DOM warnings in 16 components:

  • Button, Checkbox, CodeEditor, Dropdown, ErrorAlert, Input
  • MenuItem, Modal, PopConfirm, Tab, TableHeaderCell, Textarea
  • Tooltip, ButtonControlGroup, Sidebar, Table

Story Fixes

  • Fixed Textarea > WithValue story to use defaultValue instead of value

Test Results

  • 304 tests passing across 53 test files
  • All console warnings and errors now cause test failures

Requirements for Storybook Preview

  • Enable GitHub Pages in repo settings (Settings → Pages → Source: "Deploy from a branch" → gh-pages)

Fixes: SW-1158


Pull Request opened by Augment Code with guidance from the PR author

- Add @storybook/experimental-addon-test with Vitest integration
- Configure tests to fail on all console warnings and errors
- Fix styled-components transient props to prevent React DOM warnings
- Add GitHub workflow for Storybook tests in CI
- Add GitHub workflow for Storybook PR previews with cleanup

Components updated with transient props ():
- Button, Checkbox, CodeEditor, Dropdown, ErrorAlert, Input
- MenuItem, Modal, PopConfirm, Tab, TableHeaderCell, Textarea
- Tooltip, ButtonControlGroup, Sidebar, Table

Fixes: SW-1158
@darwinboersma darwinboersma changed the title feat(testing): add Storybook Vitest addon with console error detection SW-1158: add Storybook testing Jan 31, 2026
@github-actions
Copy link

github-actions bot commented Jan 31, 2026

📚 Storybook Preview

Your Storybook preview is ready!

🔗 View Storybook

This preview will be available for 14 days.

- Add sync-storybook-zephyr.ts script to create Zephyr test cases from stories
- Add report-zephyr-results.ts script to report test results to Zephyr
- Add zephyr-sync-storybook.yml workflow for syncing stories to Zephyr
- Add zephyr-report-results.yml workflow for reporting results after tests
- Update storybook-tests.yml with test filtering and Zephyr reporting options
- Remove duplicate run-storybook-tests.yml workflow (consolidated)
- Fix vitest.workspace.ts TypeScript error (reporters not in project config)
- Clean up unused interfaces in report-zephyr-results.ts

Security fixes:
- Fix command injection vulnerability in test filtering (use env var)
- Pin all GitHub Actions to specific commit SHAs
- Add explicit permissions blocks to workflows
- Prevent workflows from running on forked PRs
@darwinboersma darwinboersma marked this pull request as ready for review January 31, 2026 02:17
@darwinboersma darwinboersma requested a review from a team as a code owner January 31, 2026 02:17
@augmentcode
Copy link

augmentcode bot commented Jan 31, 2026

🤖 Augment PR Summary

Summary: Adds Storybook-driven component testing using the Storybook Vitest addon, with CI automation and Zephyr Scale integration.

Changes:

  • Introduced a Vitest workspace with separate unit and storybook projects, enabling browser-mode tests via Playwright.
  • Added a Vitest setup that fails tests on any console.warn/console.error to enforce clean Storybook output.
  • Added GitHub Actions workflows for Storybook E2E tests, Storybook PR preview deployment to GitHub Pages, and Zephyr reporting/sync utilities.
  • Updated package.json scripts/dependencies to support browser testing, JUnit output, and the Storybook test addon.
  • Converted multiple styled-components props to transient ($-prefixed) props to eliminate React DOM warnings during Storybook tests.
  • Adjusted a Textarea story to use defaultValue and fixed a story import for ProtocolConfiguration.

Technical Notes: Storybook tests run in Chromium (Playwright) and emit JUnit XML for artifact upload and optional Zephyr reporting.

🤖 Was this summary useful? React with 👍 or 👎

Copy link

@augmentcode augmentcode bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review completed. 6 suggestions posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

- Pin all GitHub Actions to commit hashes for security
- Add corepack enable before yarn install
- Add fork guards to build-and-deploy and cleanup jobs
- Fix markdown indentation in PR comment body
- Refactor report-zephyr-results.ts: replace regex with fast-xml-parser
- Refactor sync-storybook-zephyr.ts: replace regex with ts-morph AST parsing
- Add comprehensive unit tests for Zephyr scripts (23 new tests)
- Move fast-xml-parser and ts-morph to devDependencies
@darwinboersma darwinboersma deployed to artifactory-prod January 31, 2026 03:27 — with GitHub Actions Active
@darwinboersma darwinboersma enabled auto-merge (squash) January 31, 2026 04:13
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.

2 participants