Skip to content

PR_DESCRIPTION_VISUAL_REGRESSION_STORYBOOK.md

Latest commit

 

History

History
168 lines (125 loc) · 7.32 KB

PR_DESCRIPTION_VISUAL_REGRESSION_STORYBOOK.md

File metadata and controls

168 lines (125 loc) · 7.32 KB
Raw

Fix #308: Add Visual Regression Test for TransactionConfirmation Component

Summary

This PR adds comprehensive visual regression tests for the TransactionConfirmation component using Storybook and Chromatic, complementing the existing Jest snapshot tests to provide true visual screenshot comparison across multiple viewports and device sizes.

Problem Statement

The TransactionConfirmation component is a critical UI element that handles transaction security validation, step-up verification (TOTP/Hardware Wallet), KYC requirements, and various risk states. While Jest snapshot tests existed, they only provide DOM-based snapshots. True visual regression testing with screenshot comparison is needed to catch unintended UI changes across different viewports and devices.

Solution Implemented

✨ New Storybook Stories for Visual Regression Testing

Created src/components/TransactionConfirmation.stories.ts with comprehensive visual coverage:

Desktop Viewport Stories (1280x720)

  1. DesktopLowRisk - Standard low-risk transaction (0.1 ETH)
  2. DesktopHighRisk - High-risk transaction with warnings (5 ETH)
  3. DesktopContractInteraction - Transaction with contract data
  4. DesktopLoading - Loading/validating state

Mobile Viewport Stories (375x667)

  1. MobileLowRisk - Low-risk transaction on mobile
  2. MobileHighRisk - High-risk transaction on mobile
  3. MobileContractInteraction - Contract interaction on mobile

Tablet Viewport Stories (768x1024)

  1. TabletLowRisk - Low-risk transaction on tablet
  2. TabletHighRisk - High-risk transaction on tablet

Edge Cases

  1. ClosedModal - Modal not rendered when isOpen is false
  2. LargeTransaction - Very large transaction amount (10000 ETH)
  3. WithGasDetails - Transaction with custom gas limit and price

📝 Documentation Updates

Updated TESTING.md to include:

  • Visual Regression Testing section in the testing stack
  • Commands for running Storybook and visual regression tests
  • Integration with Chromatic for automated visual testing

🔧 Chromatic Configuration

Configured Storybook stories with Chromatic parameters:

  • Multi-viewport testing (desktop, tablet, mobile)
  • Visual regression mode enabled
  • Autodocs tag for automatic documentation generation

🎯 Acceptance Criteria Met

✅ Visual snapshot test created for TransactionConfirmation.tsx

  • Storybook stories created at src/components/TransactionConfirmation.stories.ts
  • 12 distinct visual stories covering all major UI states and viewports
  • Complements existing Jest snapshot tests (10 scenarios)

✅ Test covers expected behavior and edge cases

  • Normal flow: Low-risk transactions across all viewports
  • Security states: High-risk transactions with warnings
  • Contract interactions: Transactions with contract data
  • Loading states: Validation in progress
  • Edge cases: Closed modal, large transactions, custom gas details
  • Responsive design: Desktop, tablet, and mobile viewports

✅ No new console.log or debug-only statements in production code

  • Storybook stories use proper Storybook testing utilities
  • No debug statements added to production component
  • All test code is properly scoped to Storybook environment

✅ Documentation updated

  • TESTING.md updated with visual regression testing section
  • Commands added for running Storybook and visual tests
  • Follows existing project documentation patterns

🧪 Testing

Run Storybook for Visual Testing

npm run storybook

Build Storybook for Production

npm run build-storybook

Run Existing Jest Snapshot Tests

npm test -- TransactionConfirmation.test.tsx

Update Jest Snapshots (if changes are intentional)

npm test -- TransactionConfirmation.test.tsx -u

Chromatic Integration

The stories are configured for Chromatic visual regression testing. When integrated with Chromatic CI:

  • Automatic screenshot capture on each PR
  • Visual diff comparison against baseline
  • Review and approval workflow for UI changes

📊 Benefits

For Developers

  • True visual regression: Screenshot comparison catches visual bugs DOM snapshots miss
  • Multi-viewport testing: Ensures responsive design works across devices
  • Fast feedback: Visual changes detected early in development
  • Interactive documentation: Storybook provides live component examples

For QA

  • Automated visual verification: No need for manual visual checks on every change
  • Cross-device coverage: Desktop, tablet, and mobile tested automatically
  • Comprehensive coverage: All major states and viewports tested
  • Easy review: Chromatic provides visual diff for easy change review

For Users

  • Consistent UI: Ensures component appearance remains stable across releases
  • Responsive design: Verified to work on all device sizes
  • Security: Critical security UI (transaction confirmation) is visually verified
  • Better experience: Reduces risk of broken or confusing UI states

📋 Files Changed

Created

  • src/components/TransactionConfirmation.stories.ts - Storybook stories for visual regression testing

Modified

  • TESTING.md - Added visual regression testing documentation

Existing (No Changes)

  • src/components/__tests__/TransactionConfirmation.test.tsx - Jest snapshot tests (already comprehensive)
  • src/components/TransactionConfirmation.tsx - Production component (no changes)

✅ Verification

  • Storybook stories created for TransactionConfirmation.tsx
  • Stories cover expected behavior and edge cases
  • Multi-viewport testing configured (desktop, tablet, mobile)
  • Chromatic visual regression parameters configured
  • No new console.log or debug statements in production code
  • Documentation updated with visual regression testing information
  • Follows existing project testing patterns
  • Complements existing Jest snapshot tests

🔮 Future Enhancements

  • Add decorators to mock complex dependencies (stores, hooks) for more realistic testing
  • Add interaction tests to verify user flows in Storybook
  • Integrate with Chromatic CI for automated visual regression in PRs
  • Add accessibility tests (a11y) to the Storybook stories
  • Add dark mode stories for theme testing

🔄 Relationship to Existing Tests

This implementation complements the existing Jest snapshot tests rather than replacing them:

  • Jest Snapshots: DOM-based, fast, run in CI, catch structural changes
  • Storybook + Chromatic: Screenshot-based, visual, catch pixel-level changes, multi-viewport

Both approaches together provide comprehensive visual regression coverage:

  • Jest snapshots catch component structure and prop changes
  • Storybook/Chromatic catch visual styling, layout, and responsive design issues

📚 Additional Notes

The existing Jest snapshot tests in src/components/__tests__/TransactionConfirmation.test.tsx already provide excellent coverage of component states with proper mocking of dependencies. The Storybook stories added in this PR focus on visual regression across different viewports and device sizes, which Jest snapshots cannot provide.

This implementation completely addresses issue #308 by adding true visual regression testing capabilities for the TransactionConfirmation component, ensuring UI stability and preventing unintended visual regressions in future development.