TestGorilla UI Library

Test app

To see the updates of the library in the client app, use commands below from package.json

• build the updated version of canopy-ui with build:tgo-ui (ng build tgo-ui)
• restart the client app with start:client (ng serve)

Foundations

• Typography
• Colors

Components

• Alert Bars
  • Alert Banner
  • Banner Actions
  • Snackbar
• Button
• Elevation Shadow
• Dialog
  • Confirm Dialog
  • Custom Dialog
• File Upload
• Forms
  • Checkbox
  • Datepicker
  • Dropdown
  • Input Field
  • Radio
• Icon
  • Icon + Label
• Logo
• Overflow Menu
• Progress Bar
• Tag
• Tooltip

Deprecated

• Card
• Create Account
• Create Password
• Forgot Password
• Label
• Login
• NavBar
• Navigation
• Paginator
• Table

Visual Regression Testing

The project uses Playwright for visual regression testing to ensure UI components maintain their visual appearance across changes. Visual tests automatically capture screenshots of all Storybook stories and compare them against stored snapshots.

Commands

# Run visual tests
npm run visual-test

# Update snapshots when visual changes are intentional
npm run visual-test:update-snapshots

How It Works

1. Build Phase: Storybook is built (npm run build-storybook) creating static files
2. Docker Execution: Tests run in a Linux container using mcr.microsoft.com/playwright:v1.55.1 for consistency
3. Server Setup: HTTP server serves Storybook static files on port 4200
4. Test Execution: Automatically discovers and tests all stories from Storybook's index.json
5. Screenshot Comparison: Compares current screenshots against stored snapshots

Docker Configuration

The system uses Docker Compose with two services:

• visual-tests: Runs tests and compares with existing snapshots
• update-snapshots: Updates snapshots when visual changes are expected

Both services:

• Use official Microsoft Playwright image (mcr.microsoft.com/playwright:v1.55.1)
• Mount project directory and install dependencies
• Start HTTP server and wait for Storybook availability
• Execute tests with Desktop Chrome viewport (1920x1200, 2x device scale)

Cross-Platform Consistency

Visual tests run in Docker to ensure:

• Consistent font rendering across operating systems
• Identical browser behavior regardless of host OS
• Reproducible results in CI/CD environments
• Linux-based snapshots that match production environments

Troubleshooting

• Tests failing locally: Run npm run visual-test:update-snapshots if changes are intentional
• Font rendering differences: Always use Docker commands for consistency
• Timeout issues: Server waits up to 60 seconds for Storybook to be ready
• Memory issues: Docker services configured with 4GB heap size