Import PrimeReact and PrimeIcons CSS libraries at the app entry point
to ensure styling is loaded. This matches the Angular app which imports
these libraries in angular.json.
- primereact/resources/primereact.min.css: Base component styles
- primeicons/primeicons.css: Icon library styles
This fixes missing component styling that was relying only on custom
overrides without the base theme.
- Auto-trigger search when departure or arrival city is selected
- Add display elements for selected cities (departure-display, arrival-display)
- Add display elements for selected dates (selected-departure-date, selected-return-date)
- Pass search params to filter component on search results page
- Support round-trip date selection with return date field
- Pass return date and trip type through navigation params
This fixes the first two search-filter tests (departure and arrival city searches).
Fixes#1 and #2 of the search-filter test suite.
- Updated feature card grid from CSS Grid to Flexbox (2x2 layout with 50% width)
- Added background image and title icon SVGs for visual parity
- Changed card title colors from dark gray to blue (#0066cc) matching Angular links
- Fixed padding and spacing to match Angular (50px sections, 65px icon offset)
- Added data-testid attributes for E2E testing
- Created comprehensive visual design alignment report documenting changes
- Update backstop configs to test React app at /ru-ru/onlineboard
- Generate reference screenshot from Angular version
- Run visual test: 47.31% mismatch identified (layout/styling differences)
- Identify key differences for design alignment
- Update i18n language detection to extract language code from URL (/ru-ru/ → 'ru')
- Move public assets to src/public/ to match Vite root directory
- Add missing translation keys: SHARED.DATE, SHARED.FROM, SHARED.TO, SHARED.DEPARTURE, SHARED.ROUTE
- Fix router configuration to use relative paths for language-prefixed routes
- App now loads at /ru-ru/onlineboard with full Russian translations
- 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
gnezim