@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.17

package/tests/e2e/README.md

@@ -1,221 +1,221 @@
-# Playwright E2E Tests for WL Shared Components
-
-This directory contains comprehensive end-to-end tests for all WL shared components using Playwright.
-
-## Test Coverage
-
-### Core Components
-- **Button Component** (`button.spec.ts`)
-  - Default rendering and interactions
-  - Various button variants (outlined, text, elevated, tonal)
-  - Loading states and disabled states  
-  - Different sizes and custom colors
-  - Keyboard navigation and accessibility
-  - Icon support (prepend/append)
-
-- **Input Component** (`input.spec.ts`)
-  - Text input functionality
-  - Validation states (success, error, warning)
-  - Disabled state handling
-  - Icon support (prepend/append/inner)
-  - Search input functionality
-  - Hint text display
-  - Focus and keyboard interaction
-
-- **Select Component** (`select.spec.ts`)
-  - Dropdown opening/closing
-  - Option selection
-  - Keyboard navigation
-  - Multiple selection (if supported)
-  - Search/filter functionality
-  - Clearable functionality
-  - Disabled states
-  - Accessibility attributes
-
-- **Checkbox Component** (`checkbox.spec.ts`)
-  - Checking/unchecking functionality
-  - Keyboard interaction (Space key)
-  - Disabled state prevention
-  - Label interaction
-  - Visual state verification
-  - Indeterminate state (if supported)
-  - Custom styling variants
-
-### Form Components
-- **DateInput Component** (`date-input.spec.ts`)
-  - Date input field rendering
-  - Date picker functionality
-  - Calendar navigation
-  - Date format validation
-  - Min/max date restrictions
-  - Today button functionality
-  - Keyboard navigation
-  - Outside click closing
-
-- **OTP Input Component** (`otp-input.spec.ts`)
-  - Multiple input field rendering
-  - Auto-focus on next field
-  - Backspace navigation
-  - Numeric input restriction
-  - Paste functionality for complete OTP
-  - Different OTP lengths (4, 6, 8 digits)
-  - Rapid input handling
-  - Focus management
-
-- **TextArea Component** (`additional-components.spec.ts`)
-  - Multi-line text input
-  - Character count display
-  - Resize functionality
-  - Validation states
-
-- **Phone Input Component** (`additional-components.spec.ts`)
-  - Country selector dropdown
-  - Phone number input validation
-  - Flag display
-  - International formatting
-
-### UI Components
-- **Accordion Component** (`accordion.spec.ts`)
-  - Multiple accordion items rendering
-  - Expand/collapse functionality
-  - Keyboard navigation (Enter/Space)
-  - Multiple items expanded simultaneously
-  - Accessibility attributes (aria-expanded)
-
-- **Dialog/Modal Components** (`dialog.spec.ts`)
-  - Dialog opening/closing
-  - Content visibility
-  - Escape key closing
-  - Outside click closing
-  - Focus management
-  - Multiple dialogs handling
-  - Animations and transitions
-
-### Laboratory Components (`laboratory-components.spec.ts`)
-- **Card Components**
-  - Appointment Card
-  - Document Card  
-  - Info Card
-  - Ticket Card
-
-- **Chat Components**
-  - Chat Message
-  - Chat Notification
-  - Chat Box Image
-  - Chat Message Badge
-
-- **Progress Components**
-  - Progress Circle
-  - Progress Linear
-
-- **Navigation Components**
-  - Main Columns Bar
-  - Selection Column Bar
-  - Timeline
-
-- **Status Components**
-  - Tag Label
-  - Tag Label Group
-  - Status Notification
-
-### Additional Components (`additional-components.spec.ts`)
-- **Audio Component**
-  - Audio controls
-  - Waveform display
-  - Play/pause functionality
-
-- **Edit Field Component**
-  - Toggle between edit/display mode
-  - Save changes functionality
-  - Cancel editing
-
-- **Notification Components**
-  - Notification Bubble
-  - Dismissible notifications
-
-- **Icon Components**
-  - Various icon components
-  - Icon Bullet and Icon Bullet List
-
-### Cross-Component Tests
-- **Integration Tests**
-  - Components working together
-  - Independent state management
-  - Tab navigation across components
-
-- **Performance Tests**
-  - Render time verification
-  - Rapid interaction handling
-  - Memory usage optimization
-
-- **Accessibility Tests**
-  - ARIA attributes verification
-  - Keyboard navigation
-  - Focus management
-  - Screen reader compatibility
-
-## Test Configuration
-
-The tests are configured to run against Storybook at `http://localhost:7000` and include:
-
-- **Multi-browser testing**: Chrome, Firefox, Safari, Mobile Chrome, Mobile Safari
-- **Automatic screenshot capture** on failures
-- **Trace recording** for debugging
-- **Parallel execution** for faster test runs
-- **Retry logic** for flaky tests
-
-## Running Tests
-
-```bash
-# Run all tests
-npm test
-
-# Run tests in headed mode (visible browser)
-npm run test:headed
-
-# Run tests with UI mode
-npm run test:ui
-
-# View test report
-npm run test:report
-```
-
-## Test Structure
-
-Each test file follows a consistent pattern:
-
-1. **Setup**: Navigate to the component's Storybook story
-2. **Rendering Tests**: Verify component displays correctly  
-3. **Interaction Tests**: Test user interactions (click, type, keyboard)
-4. **State Tests**: Verify component states (disabled, error, loading)
-5. **Accessibility Tests**: Check ARIA attributes and keyboard navigation
-6. **Edge Cases**: Test boundary conditions and error scenarios
-
-## Coverage Statistics
-
-This test suite provides comprehensive coverage of:
-- ✅ 15+ Core UI Components
-- ✅ 10+ Form Components  
-- ✅ 15+ Laboratory Components
-- ✅ 5+ Specialized Components
-- ✅ Integration scenarios
-- ✅ Accessibility compliance
-- ✅ Performance benchmarks
-
-## Maintenance
-
-Tests are designed to be maintainable and robust:
-- Use of flexible selectors that work across different implementations
-- Graceful handling of missing stories/components
-- Clear test descriptions and error messages
-- Modular structure for easy updates
-
-## Contributing
-
-When adding new components or modifying existing ones:
-
-1. Add corresponding test cases to the appropriate spec file
-2. Follow the established naming conventions
-3. Include accessibility tests for new interactive elements
-4. Test both happy path and error scenarios
+# Playwright E2E Tests for WL Shared Components
+
+This directory contains comprehensive end-to-end tests for all WL shared components using Playwright.
+
+## Test Coverage
+
+### Core Components
+- **Button Component** (`button.spec.ts`)
+  - Default rendering and interactions
+  - Various button variants (outlined, text, elevated, tonal)
+  - Loading states and disabled states  
+  - Different sizes and custom colors
+  - Keyboard navigation and accessibility
+  - Icon support (prepend/append)
+
+- **Input Component** (`input.spec.ts`)
+  - Text input functionality
+  - Validation states (success, error, warning)
+  - Disabled state handling
+  - Icon support (prepend/append/inner)
+  - Search input functionality
+  - Hint text display
+  - Focus and keyboard interaction
+
+- **Select Component** (`select.spec.ts`)
+  - Dropdown opening/closing
+  - Option selection
+  - Keyboard navigation
+  - Multiple selection (if supported)
+  - Search/filter functionality
+  - Clearable functionality
+  - Disabled states
+  - Accessibility attributes
+
+- **Checkbox Component** (`checkbox.spec.ts`)
+  - Checking/unchecking functionality
+  - Keyboard interaction (Space key)
+  - Disabled state prevention
+  - Label interaction
+  - Visual state verification
+  - Indeterminate state (if supported)
+  - Custom styling variants
+
+### Form Components
+- **DateInput Component** (`date-input.spec.ts`)
+  - Date input field rendering
+  - Date picker functionality
+  - Calendar navigation
+  - Date format validation
+  - Min/max date restrictions
+  - Today button functionality
+  - Keyboard navigation
+  - Outside click closing
+
+- **OTP Input Component** (`otp-input.spec.ts`)
+  - Multiple input field rendering
+  - Auto-focus on next field
+  - Backspace navigation
+  - Numeric input restriction
+  - Paste functionality for complete OTP
+  - Different OTP lengths (4, 6, 8 digits)
+  - Rapid input handling
+  - Focus management
+
+- **TextArea Component** (`additional-components.spec.ts`)
+  - Multi-line text input
+  - Character count display
+  - Resize functionality
+  - Validation states
+
+- **Phone Input Component** (`additional-components.spec.ts`)
+  - Country selector dropdown
+  - Phone number input validation
+  - Flag display
+  - International formatting
+
+### UI Components
+- **Accordion Component** (`accordion.spec.ts`)
+  - Multiple accordion items rendering
+  - Expand/collapse functionality
+  - Keyboard navigation (Enter/Space)
+  - Multiple items expanded simultaneously
+  - Accessibility attributes (aria-expanded)
+
+- **Dialog/Modal Components** (`dialog.spec.ts`)
+  - Dialog opening/closing
+  - Content visibility
+  - Escape key closing
+  - Outside click closing
+  - Focus management
+  - Multiple dialogs handling
+  - Animations and transitions
+
+### Laboratory Components (`laboratory-components.spec.ts`)
+- **Card Components**
+  - Appointment Card
+  - Document Card  
+  - Info Card
+  - Ticket Card
+
+- **Chat Components**
+  - Chat Message
+  - Chat Notification
+  - Chat Box Image
+  - Chat Message Badge
+
+- **Progress Components**
+  - Progress Circle
+  - Progress Linear
+
+- **Navigation Components**
+  - Main Columns Bar
+  - Selection Column Bar
+  - Timeline
+
+- **Status Components**
+  - Tag Label
+  - Tag Label Group
+  - Status Notification
+
+### Additional Components (`additional-components.spec.ts`)
+- **Audio Component**
+  - Audio controls
+  - Waveform display
+  - Play/pause functionality
+
+- **Edit Field Component**
+  - Toggle between edit/display mode
+  - Save changes functionality
+  - Cancel editing
+
+- **Notification Components**
+  - Notification Bubble
+  - Dismissible notifications
+
+- **Icon Components**
+  - Various icon components
+  - Icon Bullet and Icon Bullet List
+
+### Cross-Component Tests
+- **Integration Tests**
+  - Components working together
+  - Independent state management
+  - Tab navigation across components
+
+- **Performance Tests**
+  - Render time verification
+  - Rapid interaction handling
+  - Memory usage optimization
+
+- **Accessibility Tests**
+  - ARIA attributes verification
+  - Keyboard navigation
+  - Focus management
+  - Screen reader compatibility
+
+## Test Configuration
+
+The tests are configured to run against Storybook at `http://localhost:7000` and include:
+
+- **Multi-browser testing**: Chrome, Firefox, Safari, Mobile Chrome, Mobile Safari
+- **Automatic screenshot capture** on failures
+- **Trace recording** for debugging
+- **Parallel execution** for faster test runs
+- **Retry logic** for flaky tests
+
+## Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in headed mode (visible browser)
+npm run test:headed
+
+# Run tests with UI mode
+npm run test:ui
+
+# View test report
+npm run test:report
+```
+
+## Test Structure
+
+Each test file follows a consistent pattern:
+
+1. **Setup**: Navigate to the component's Storybook story
+2. **Rendering Tests**: Verify component displays correctly  
+3. **Interaction Tests**: Test user interactions (click, type, keyboard)
+4. **State Tests**: Verify component states (disabled, error, loading)
+5. **Accessibility Tests**: Check ARIA attributes and keyboard navigation
+6. **Edge Cases**: Test boundary conditions and error scenarios
+
+## Coverage Statistics
+
+This test suite provides comprehensive coverage of:
+- ✅ 15+ Core UI Components
+- ✅ 10+ Form Components  
+- ✅ 15+ Laboratory Components
+- ✅ 5+ Specialized Components
+- ✅ Integration scenarios
+- ✅ Accessibility compliance
+- ✅ Performance benchmarks
+
+## Maintenance
+
+Tests are designed to be maintainable and robust:
+- Use of flexible selectors that work across different implementations
+- Graceful handling of missing stories/components
+- Clear test descriptions and error messages
+- Modular structure for easy updates
+
+## Contributing
+
+When adding new components or modifying existing ones:
+
+1. Add corresponding test cases to the appropriate spec file
+2. Follow the established naming conventions
+3. Include accessibility tests for new interactive elements
+4. Test both happy path and error scenarios
 5. Verify tests pass across all configured browsers