ui-fab/e2e

FAB E2E Tests

Overview

End-to-end tests for the @lilith/ui-fab component using Playwright.

Test Suites

1. Basic Interaction Tests (fab.e2e.ts)

• FAB expansion/collapse
• Category button clicks
• Item onClick handlers
• Click-outside behavior

2. Visual Regression Tests (tests/visual-regression.spec.ts)

• Screenshot-based visual regression for all FAB states
• Tests collapsed, expanded, category expanded states
• Tests responsive viewports (desktop, tablet, mobile)
• Tests multiple layout variants

3. MultiFAB Alignment Tests (tests/multi-fab-alignment.spec.ts)

• NEW: Tests for multi-FAB alignment scenarios
• 3-FAB layout (1 left + 2 right) alignment validation
• Horizontal and vertical spacing verification
• Responsive behavior across viewports
• Visual regression for multi-FAB layouts

Demo Page

demo-multi-fab.html

Standalone HTML demo showcasing the 3-FAB alignment pattern:

• 1 FAB on left (wrench/tools)
• 2 FABs on right (flag/notifications + settings)

To view the demo:

# Option 1: Python HTTP server
python3 -m http.server 3000 --directory e2e

# Option 2: Node HTTP server
npx http-server e2e -p 3000

# Then open: http://localhost:3000/demo-multi-fab.html

Running Tests

Against Demo Page (Recommended for MultiFAB tests)

# 1. Start HTTP server in one terminal
cd /var/home/lilith/Code/@packages/@ts/@ui-react/packages/ui-fab
python3 -m http.server 3000 --directory e2e

# 2. Run MultiFAB tests in another terminal
pnpm test:e2e tests/multi-fab-alignment.spec.ts

Against Status Dashboard (Legacy tests)

# Ensure status-dashboard is running on localhost:3000
pnpm test:e2e fab.e2e.ts
pnpm test:e2e tests/visual-regression.spec.ts

Test Commands

# Run all E2E tests
pnpm test:e2e

# Run specific test file
pnpm test:e2e tests/multi-fab-alignment.spec.ts

# Run with UI mode (interactive)
pnpm test:e2e:ui

# Debug mode (step through tests)
pnpm test:e2e:debug

# Update screenshot baselines
UPDATE_SNAPSHOTS=true pnpm test:e2e

Screenshot Management

Baseline Locations

• Unit test screenshots: src/__tests__/__screenshots__/
• E2E screenshots: e2e/tests/__screenshots__/

Updating Baselines

# Update all screenshots
UPDATE_SNAPSHOTS=true pnpm test:e2e

# Update specific test
UPDATE_SNAPSHOTS=true pnpm test:e2e tests/multi-fab-alignment.spec.ts

MultiFAB Alignment Test Coverage

The multi-fab-alignment.spec.ts test validates:

Layout & Positioning

• ✅ 3 FABs align correctly: 1 left + 2 right
• ✅ Horizontal layout maintains consistent spacing
• ✅ All FABs are bottom-aligned
• ✅ FABs maintain alignment when expanded

Interaction

• ✅ Only one FAB can be expanded at a time
• ✅ Backdrop appears only for expanded FAB
• ✅ Click outside closes expanded FAB

Responsive

• ✅ Alignment maintained on tablet (768x1024)
• ✅ Alignment maintained on mobile (375x667)

Visual Regression

• ✅ 3-FAB layout matches baseline
• ✅ Expanded FAB with others visible matches baseline
• ✅ All FABs expanded matches baseline

Accessibility

• ✅ Keyboard navigation works across multiple FABs
• ✅ Screen reader announcements for each FAB

Configuration

Playwright config: playwright.config.ts

Key settings:

• baseURL: http://localhost:3000
• updateSnapshots: process.env.UPDATE_SNAPSHOTS === 'true' ? 'all' : 'missing'
• toHaveScreenshot.maxDiffPixels: 100
• toHaveScreenshot.threshold: 0.2 (20%)

Architecture Notes

Current Limitation

The current MultiFAB.Root implementation uses flexbox but FAB.ActionButton uses position: fixed, which ignores flex layout. This causes:

• Multiple FABs on the same side overlap
• Manual offset calculations required

Proposed Solution

Context-based positioning:

1. MultiFAB.Root provides context: { isMultiFAB: true }
2. FAB.ActionButton uses:
   • position: fixed when standalone
   • position: relative when inside MultiFAB
3. MultiFAB.Root itself is position: fixed with flexbox children

This makes multi-FAB layouts scalable without manual offsets.

Visual Examples

Demo Page Layout

┌─────────────────────────────────────────────────┐
│                                                 │
│  Page Content                                   │
│                                                 │
│                                                 │
│                                                 │
└─────────────────────────────────────────────────┘
 🔧                                   🚩  ⚙️
Left                                Right Group

Expanded State

┌─────────────────────────────────────────────────┐
│        [Backdrop: blur(2px)]                    │
│                                                 │
│                                                 │
│                                    🔔           │
│                                    💬           │
│                                    📬           │
└─────────────────────────────────────────────────┘
 🔧                                   🚩  ⚙️
                                    (expanded)

Development Workflow

1. Make changes to ui-fab components
2. View changes in demo: Open demo-multi-fab.html
3. Run tests: pnpm test:e2e tests/multi-fab-alignment.spec.ts
4. Update baselines if needed: UPDATE_SNAPSHOTS=true pnpm test:e2e
5. Verify all tests pass: pnpm test:e2e

Troubleshooting

Tests failing with "page not found"

• Ensure HTTP server is running on port 3000
• Check playwright.config.ts baseURL

Screenshot diffs

• Run with UPDATE_SNAPSHOTS=true to regenerate baselines
• Check if styling changes were intentional
• maxDiffPixels allows up to 100px difference

FABs overlapping in demo

• This is expected with current architecture
• Demonstrates the need for context-based positioning fix
• See "Proposed Solution" above