TestGorilla UI Library (@testgorilla/tgo-ui)

Angular 19 UI component library providing reusable components for TestGorilla applications.

Development

To see library changes reflected in the demo app:

npm run build:tgo-ui   # Build the library
npm run start:client   # Serve the demo app

Or use watch mode during active development:

npm run watch          # Build library in watch mode (then run start:client)
npm run storybook      # Start Storybook on port 6006

Components

AI

• ui-ai-audio-circle
• ui-ai-caveat
• ui-ai-feedback
• ui-audio-waveform

Forms & Inputs

• ui-autocomplete
• ui-checkbox
• ui-datepicker
• ui-dropdown
• ui-field
• ui-inline-field
• ui-multi-input
• ui-phone-input
• ui-radio-button
• ui-slider
• ui-toggle
• ui-validation-error

Buttons & Actions

• ui-button
• ui-filter-button
• ui-overflow-menu
• ui-segmented-button

Feedback & Status

• ui-alert-banner
• ui-badge
• ui-progress-bar
• ui-radial-progress
• ui-rating
• ui-skeleton
• ui-snackbar
• ui-spinner
• ui-stepper

Data Visualization

• ui-donut-chart
• ui-gaussian-chart
• ui-scale
• ui-scale-table
• ui-segmented-bar
• ui-spider-chart

Layout & Navigation

• ui-accordion
• ui-breadcrumb
• ui-divider
• ui-navbar
• ui-page-header
• ui-paginator
• ui-side-panel
• ui-side-sheet
• ui-tabs

Cards & Media

• ui-avatar
• ui-card
• ui-media-card
• ui-media-dialog
• ui-selectable-card

Content & Misc

• ui-checklist
• ui-dialog
• ui-elevation-shadow
• ui-empty-state
• ui-file-upload
• ui-icon
• ui-icon-label
• ui-logo
• ui-password-criteria
• ui-password-strength
• ui-prompt
• ui-table
• ui-tag
• ui-tooltip
• ui-universal-skills

Contributing

PR Requirements

Every pull request must include:

1. Version bump — increment the version in package.json following semver:

   • PATCH (e.g. 6.2.4 → 6.2.5) for bug fixes, CI/tooling changes, dependency updates
   • MINOR (e.g. 6.2.x → 6.3.0) for new components, new inputs/outputs, new features
   • MAJOR for breaking changes (removed inputs, renamed selectors, changed API contracts)

2. Changelog entry — add an entry to the top of CHANGELOG.md in this format:

## <version> - <YYYY-MM-DD>

### Added
- ComponentName: description of what was added

### Changed
- ComponentName: description of what changed

### Fixed
- ComponentName: description of what was fixed

### Misc
- CI: description of tooling/CI change

Example:

## 6.3.0 - 2026-03-11

### Added
- Tabs: Add `tabHeaderSize` input — `'big'` (64px, default), `'medium'` (56px), `'small'` (32px)
- Icon: Add `Rocket` icon

### Fixed
- SidePanel: Fix backdrop not closing panel on click when `disableAnimation` is set

### Misc
- CI: Add automated GitHub release creation on publish

CI will fail the PR if either check is missing — check-version-bump and check-changelog-entry run automatically on every PR.

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