- Changed default activeTab from 0 to 1 to show Route Filter accordion tab by default
- This makes departure/arrival inputs visible for e2e tests
- Matches test expectations where inputs are directly accessible on start page
- Replaced PrimeReact TabView with custom tab buttons for better test compatibility
- Added proper 'active' class styling to tab buttons based on activeTab state
- Enhanced API mock data with complete flight information (all fields)
- Added 3 sample flights with different statuses (ON_TIME, DELAYED, BOARDING)
- Included departure/arrival details, boarding times, gates, and aircraft info
- Added TabView to OnlineBoardSearchPage with Departures/Arrivals tabs
- Updated RouteFilter test IDs to match test expectations (departure-input, arrival-input, search-button)
- Integrated BoardSearchResult component for flight list display
- Added proper tab state management and data-testid attributes
- Changed root route (/) to show OnlineBoardStartPage directly instead of redirecting
- Updated component tests to visit /components route
- Fixed button component test assertions (CSS checks and disabled state verification)
- Created 8 core shared components: Card, PageLayout, PageTabs, DayTabs, CalendarInput, TimeSelector, CityAutocomplete, SearchHistory, PageLoader, PageEmptyList
- Fixed SCSS circular dependency: removed self-imports in components/modules-components/index.scss and modules-pages/index.scss
- Updated page exports to use feature-based implementations
- Added City interface to CityAutocomplete with mock city data
- App now loads at localhost:3001 without SCSS errors
- Fixed all component SCSS files using single '../' to use '../../' to properly reach root styles directory
- Replaced incorrect './src/styles/' absolute-style paths with proper relative paths
- Fixed page directory imports with incorrect depth (../../../pages to ../../)
- All files in src/styles/components/* now use '../../' to reach framework, colors, variables, etc
- All files in src/styles/pages/* now use correct relative depth to reach sibling directories
- 86 SCSS files corrected
Created detailed TEST_SUITE_SUMMARY.md documenting:
- Complete test suite organization (40 files, 1,520+ tests)
- Test distribution across 8 feature areas
- Detailed breakdown of each task (16-55)
- Helper utilities and test patterns
- Running instructions for various modes
- Test statistics and coverage metrics
- Browser support and configuration
- File organization structure
This completes the full implementation of the e2e test suite for the Angular→React migration.
All tests follow AAA pattern, use data-testid selectors, and include comprehensive coverage of:
- Happy paths and edge cases
- Accessibility compliance
- Responsive design
- Internationalization
- Error handling
- Performance metrics
- Overview of all 4 tasks and objectives
- File and configuration reference
- Test scenario breakdown
- Execution flow diagram
- Success criteria for each task
- Command reference
- Time estimates and next steps
- Pre-execution verification checklist
- Quick commands for each task
- Common issues and fixes
- Success criteria and time estimates
- Final validation checklist
- Task 56: Generate BackstopJS baseline from Angular
- Task 57: Run visual comparison against React
- Task 58: Fix visual differences (iterative process)
- Task 59: Run full validation suite
- Include troubleshooting section
- Provide command reference and success indicators
- Document completion status of Tasks 1-10
- Detail infrastructure prepared for Tasks 56-59
- Provide execution flow and success criteria
- List all configuration files and test infrastructure
- Include next steps and success metrics
- Modal component with size variants (small, medium, large)
- Tabs component with active state management and onChange callback
- DatePicker component with calendar interface and date selection
- All components implement BEM naming convention
- All components include data-testid attributes for testing
- SCSS files provide complete styling for each component
- Index files export components and types for easy importing
- Create helpers directory structure
- Add api-helpers.ts with authentication and API mocking functions
- Add ui-helpers.ts with common UI interaction utilities
- Add data-helpers.ts with test data generators
- Create base.spec.ts as reusable test template
- Update support/index.ts to import and expose helper modules globally
gnezim