From a9b2f4ac5c756bbbdcfb3f2681181c165d5aa99d Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sat, 4 Apr 2026 12:05:32 +0300
Subject: [PATCH] docs: add e2e test implementation plan with detailed task
 breakdown

---
 .../2026-04-04-e2e-tests-implementation.md    | 501 ++++++++++++++++++
 1 file changed, 501 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-04-e2e-tests-implementation.md

diff --git a/docs/superpowers/plans/2026-04-04-e2e-tests-implementation.md b/docs/superpowers/plans/2026-04-04-e2e-tests-implementation.md
new file mode 100644
index 00000000..5702f826
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-04-e2e-tests-implementation.md
@@ -0,0 +1,501 @@
+# E2E Test Suite Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Write 200-300 comprehensive e2e tests for Angular Aeroflot app, validate 100% pass rate, then adapt and validate identical tests on React app with mocked + real API.
+
+**Architecture:** Feature-based test organization (online-board, schedule, flights-map, popular-requests, i18n, error-states, responsive). Full state reset per test. Page Object Model for selector abstraction. Phased execution: Angular tests first → full validation → React adaptation → React validation.
+
+**Tech Stack:** Cypress 13+, TypeScript, Moment.js (date manipulation), custom Cypress commands, fixtures with mock data
+
+---
+
+## Phase 1: Cypress Infrastructure Setup [SEE SPEC FOR DETAILS]
+
+**Task 1: Set Up Cypress Base Config & Support Files for Angular**
+- Create cypress.config.ts with baseUrl, timeouts, video recording
+- Create cypress/tsconfig.json with TypeScript configuration
+- Create cypress/support/index.ts with hook overrides
+- Create cypress/support/fixtures.ts with CITIES, MOCK_FLIGHTS, POPULAR_REQUESTS, LANGUAGES
+- Create cypress/support/commands.ts with custom Cypress commands for common actions
+- Add npm scripts: cypress:open, cypress:run, cypress:run:all, cypress:run:feature, test:e2e
+- Install Cypress and dependencies
+- Commit all infrastructure files
+
+---
+
+## Phase 2: Write Angular Feature Tests
+
+**Task 2: Online Board Feature Tests (~70 tests)**
+
+Files: `ClientApp/cypress/integration/features/online-board.cy.ts`
+
+Contains:
+- Arrival Tab (20 tests): City input validation, date picker, search with results, flight details modal
+- Departure Tab (20 tests): Mirror of arrival tab tests
+- Flight Number Filter (15 tests): Filter by flight number, special characters, no results
+- State persistence tests (15 tests): Preserve filters on navigation
+
+Key test categories:
+- Happy path: Valid search, display results, open modal
+- Edge cases: Special characters, future dates, max passengers
+- Error handling: API failures (404, 500, timeout), empty results, validation errors
+- State: Filter persistence, modal state, pagination
+- Accessibility: Keyboard navigation, focus management
+- Responsive: Mobile/tablet/desktop viewports
+
+Run: `npm run cypress:run:feature -- --spec "cypress/integration/features/online-board.cy.ts"`
+Commit: `git commit -m "feat: add online board e2e tests"`
+
+---
+
+**Task 3: Schedule Feature Tests (~60 tests)**
+
+Files: `ClientApp/cypress/integration/features/schedule.cy.ts`
+
+Contains:
+- Search Page (25 tests): Origin/destination autocomplete, date range, passenger count, validation
+- Flight Details Page (20 tests): Display flight info, navigation (next/prev), back button
+- Filters & Sorting (15 tests): Time range, airline filter, sort by departure/price/duration
+
+Key patterns:
+- Autocomplete with suggestions and filtering
+- Date range picker with validation
+- Spinner controls with min/max bounds
+- Sorting (ascending/descending)
+- Filter combinations and clear all
+
+Run: `npm run cypress:run:feature -- --spec "cypress/integration/features/schedule.cy.ts"`
+Commit: `git commit -m "feat: add schedule feature e2e tests"`
+
+---
+
+**Task 4: Flights Map Feature Tests (~40 tests)**
+
+Files: `ClientApp/cypress/integration/features/flights-map.cy.ts`
+
+Contains:
+- Map Rendering (15 tests): Map loads, markers display, clustering, pan/zoom, geolocation
+- Destination List (15 tests): List items render, click selects, search/filter works
+- Map Interactions (10 tests): Click marker shows popup, click list item highlights map, hover effects
+
+Key patterns:
+- DOM element queries for Leaflet map
+- Marker element selection and validation
+- Pan/zoom coordinate calculation
+- Click event triggering on map elements
+- Popup visibility validation
+
+Run: `npm run cypress:run:feature -- --spec "cypress/integration/features/flights-map.cy.ts"`
+Commit: `git commit -m "feat: add flights map e2e tests"`
+
+---
+
+**Task 5: Popular Requests Widget Tests (~30 tests)**
+
+Files: `ClientApp/cypress/integration/features/popular-requests.cy.ts`
+
+Contains:
+- Widget loads on page load (5 tests)
+- Displays popular request items (10 tests)
+- Click navigation (10 tests): Click item, verify URL and filters set correctly
+- API fallback to mock data (5 tests)
+
+Key patterns:
+- Widget visibility on initial load
+- Data binding from API or fixtures
+- Navigation after item click
+- Mock data fallback when API fails
+
+Run: `npm run cypress:run:feature -- --spec "cypress/integration/features/popular-requests.cy.ts"`
+Commit: `git commit -m "feat: add popular requests widget e2e tests"`
+
+---
+
+**Task 6: Internationalization (i18n) Tests (~20 tests)**
+
+Files: `ClientApp/cypress/integration/features/i18n.cy.ts`
+
+Contains:
+- Language switcher functionality (3 tests): All 9 languages selectable, persistence
+- Date format changes (5 tests): DD.MM.YYYY for ru, MM/DD/YYYY for en, etc.
+- Number formatting (5 tests): Decimal separator, thousands separator per locale
+- Text translations (5 tests): No missing keys, correct translations loaded
+- Locale-specific UI (2 tests): Text truncation, layout changes
+
+Languages tested: ru, en, es, fr, it, ja, ko, zh, de
+
+Run: `npm run cypress:run:feature -- --spec "cypress/integration/features/i18n.cy.ts"`
+Commit: `git commit -m "feat: add i18n e2e tests for all 9 languages"`
+
+---
+
+**Task 7: Error States & Recovery Tests (~30 tests)**
+
+Files: `ClientApp/cypress/integration/features/error-states.cy.ts`
+
+Contains:
+- Network Errors (10 tests): 404 not found, 500 server error, 503 unavailable, timeout
+- Validation Errors (8 tests): Required field missing, invalid format, past date, special chars
+- Empty States (5 tests): No results, no matching cities, no flights
+- Recovery & Retry (7 tests): Retry button works, clears error after success, reconnect on SignalR failure
+
+Key patterns:
+- Intercept with different statusCodes
+- Error message visibility
+- Retry button state and functionality
+- SignalR connection loss and reconnection
+
+Run: `npm run cypress:run:feature -- --spec "cypress/integration/features/error-states.cy.ts"`
+Commit: `git commit -m "feat: add error states and recovery e2e tests"`
+
+---
+
+**Task 8: Responsive & Mobile Tests (~40 tests)**
+
+Files: `ClientApp/cypress/integration/features/responsive.cy.ts`
+
+Contains:
+- Mobile Viewport (15 tests, 375x667 iPhone SE):
+  - Text readability, no overflow
+  - Touch targets ≥44x44px
+  - Hamburger menu opens/closes
+  - Accordion sections collapse/expand on tap
+  - Forms usable (not hidden behind keyboard)
+
+- Tablet Viewport (12 tests, 768x1024 iPad):
+  - Layout optimized (not stretched)
+  - Multi-column layouts
+  - Touch interactions work
+
+- Desktop Viewport (13 tests, 1920x1080):
+  - Layout scales correctly
+  - No horizontal scrolling
+  - All content accessible
+
+Key patterns:
+- cy.viewport() for responsive testing
+- Touch events via Cypress touch commands
+- Element size validation (44x44px minimum)
+- Layout-specific assertions
+
+Run: `npm run cypress:run:feature -- --spec "cypress/integration/responsive.cy.ts"`
+Commit: `git commit -m "feat: add responsive design e2e tests"`
+
+---
+
+**Task 9: Validate Full Angular Test Suite**
+
+- [ ] **Step 1: Run full Angular test suite**
+
+```bash
+cd ClientApp
+npm run cypress:run:all
+```
+
+Expected: 200-300 tests, all passing, total time <15 minutes
+
+- [ ] **Step 2: Generate HTML report**
+
+```bash
+npm run cypress:report
+```
+
+Expected: HTML report showing all tests with pass/fail status
+
+- [ ] **Step 3: Identify and fix flaky tests**
+
+If any test fails intermittently:
+1. Add explicit waits for async operations
+2. Use Cypress retry logic
+3. Check for race conditions
+4. Rerun until 3 consecutive passes
+
+- [ ] **Step 4: Commit final Angular baseline**
+
+```bash
+git add cypress/integration/features/
+git commit -m "feat: complete angular e2e test suite (200-300 tests, 100% pass rate)"
+```
+
+---
+
+## Phase 3: Adapt Tests to React
+
+**Task 10: Set Up Cypress for React App**
+
+Files:
+- Create: `react-app/cypress.config.ts` (copy from Angular, change baseUrl to :3000)
+- Create: `react-app/cypress/tsconfig.json` (same as Angular)
+- Create: `react-app/cypress/support/` (copy all from Angular)
+- Create: `react-app/cypress/integration/features/` (will be adapted in next tasks)
+- Modify: `react-app/package.json` (add cypress scripts)
+
+- [ ] **Step 1: Copy Cypress config**
+
+```bash
+cd react-app
+cp ../ClientApp/cypress.config.ts ./cypress.config.ts
+# Edit baseUrl: 'http://localhost:3000'
+cp -r ../ClientApp/cypress/support ./cypress/support
+cp -r ../ClientApp/cypress/tsconfig.json ./cypress/tsconfig.json
+```
+
+- [ ] **Step 2: Install Cypress in React app**
+
+```bash
+npm install --save-dev cypress@13.x @types/node
+```
+
+- [ ] **Step 3: Add npm scripts to react-app/package.json**
+
+```json
+{
+  "cypress:open": "cypress open",
+  "cypress:run": "cypress run",
+  "cypress:run:all": "cypress run --spec 'cypress/integration/**/*.cy.ts'",
+  "test:e2e": "cypress run -- --env API_MODE=mocked",
+  "test:e2e:real": "cypress run -- --env API_MODE=real BASE_URL=https://test.aeroflot.ru"
+}
+```
+
+- [ ] **Step 4: Commit React Cypress setup**
+
+```bash
+git add cypress/ package.json
+git commit -m "feat: set up cypress for react app with inherited configuration"
+```
+
+---
+
+**Task 11-16: Adapt Each Feature Test to React**
+
+For each feature (online-board, schedule, flights-map, popular-requests, i18n, error-states, responsive):
+
+- [ ] **Step 1: Copy spec file**
+
+```bash
+cp ../ClientApp/cypress/integration/features/{feature}.cy.ts ./cypress/integration/features/{feature}.cy.ts
+```
+
+- [ ] **Step 2: Update selectors if DOM differs**
+
+If React uses different HTML structure, update data-testid selectors in the spec file. Most selectors should remain the same if both apps implement the same test IDs.
+
+- [ ] **Step 3: Run tests against React**
+
+```bash
+npm run test:e2e -- --spec "cypress/integration/features/{feature}.cy.ts"
+```
+
+- [ ] **Step 4: Fix failures**
+
+For each failure:
+1. Check console for selector errors
+2. Update selectors in page-objects or spec file
+3. Check for timing issues (add explicit waits)
+4. Verify API responses match expected structure
+
+- [ ] **Step 5: Commit adapted tests**
+
+```bash
+git add cypress/integration/features/{feature}.cy.ts
+git commit -m "feat: adapt {feature} tests to react app"
+```
+
+**Repeat Steps 1-5 for each feature:**
+- online-board
+- schedule
+- flights-map
+- popular-requests
+- i18n
+- error-states
+- responsive
+
+---
+
+**Task 17: Validate React Suite with Mocked API**
+
+- [ ] **Step 1: Run full React test suite with mocked API**
+
+```bash
+cd react-app
+npm run test:e2e
+```
+
+Expected: All 200-300 tests pass, <15 minutes
+
+- [ ] **Step 2: Identify selector/timing issues**
+
+For any failures:
+- Check if selectors exist in React DOM (may differ from Angular)
+- Add explicit cy.wait() if async operations need more time
+- Update fixtures if mock data format differs
+
+- [ ] **Step 3: Fix and rerun**
+
+After fixes, rerun until 100% pass rate
+
+- [ ] **Step 4: Commit React baseline**
+
+```bash
+git add cypress/integration/features/
+git commit -m "feat: complete react e2e test suite with mocked api (100% pass rate)"
+```
+
+---
+
+**Task 18: Validate React Suite with Real API**
+
+- [ ] **Step 1: Run React test suite against staging backend**
+
+```bash
+cd react-app
+npm run test:e2e:real
+```
+
+Expected: All tests pass, ~10-20 minutes (slower due to network)
+
+- [ ] **Step 2: Handle network-related test flakiness**
+
+Some tests may fail due to:
+- Actual backend returning different data than mocks
+- Network delays exceeding Cypress timeout
+- Actual backend validation rules
+
+Fix by:
+1. Adjusting timeouts in cypress.config.ts
+2. Updating assertions to match real data
+3. Adding retry logic for flaky tests
+
+- [ ] **Step 3: Validate feature parity**
+
+Verify React and Angular behave identically:
+- Same success paths work
+- Same error messages shown
+- Same validation rules applied
+
+- [ ] **Step 4: Final commit**
+
+```bash
+git add cypress/
+git commit -m "feat: react e2e test validation complete (mocked + real api, 100% pass rate)"
+```
+
+---
+
+## Phase 4: Documentation & CI/CD
+
+**Task 19: Add CI/CD Pipeline**
+
+Files:
+- Create: `.github/workflows/e2e-tests.yml`
+
+This task ensures tests run automatically on every push/PR.
+
+---
+
+## Success Criteria Checklist
+
+- [ ] **Angular Tests:** 200-300 tests, 100% pass rate, <15 min execution
+- [ ] **React Tests (Mocked API):** 200-300 tests, 100% pass rate, <15 min execution
+- [ ] **React Tests (Real API):** All tests pass against staging backend
+- [ ] **Feature Parity:** Angular and React behave identically for all tested features
+- [ ] **No Flaky Tests:** Tests pass consistently when rerun 3x
+- [ ] **Performance:** No test takes >10 seconds
+- [ ] **Code Coverage:** 80%+ for tested components
+
+---
+
+## Timeline Summary
+
+| Phase | Tasks | Est. Time |
+|-------|-------|-----------|
+| 1. Setup | Task 1 | 30 mins |
+| 2. Angular Tests | Tasks 2-8 | 4 hours |
+| 2. Angular Validation | Task 9 | 1 hour |
+| 3. React Setup | Task 10 | 30 mins |
+| 3. React Adaptation | Tasks 11-16 | 3 hours |
+| 3. React Validation (Mocked) | Task 17 | 1 hour |
+| 3. React Validation (Real) | Task 18 | 1 hour |
+| 4. CI/CD | Task 19 | 30 mins |
+| **Total** | | **11-12 hours** |
+
+Work continues until all success criteria are met.
+
+---
+
+## Implementation Notes
+
+### Selector Strategy
+
+If React app has different HTML structure, selectors will differ. Use `data-testid` attributes consistently across both apps:
+
+```typescript
+// Both Angular and React must implement these selectors:
+[data-testid="arrival-city-input"]
+[data-testid="search-button"]
+[data-testid="flight-result"]
+// etc.
+```
+
+### Fixture Updates
+
+If real API returns different data structure, update fixtures in `cypress/support/fixtures.ts` to match.
+
+### Timing Adjustments
+
+If React has slower load times:
+1. Increase `pageLoadTimeout` in cypress.config.ts
+2. Add explicit `cy.wait()` for specific API calls
+3. Use `cy.intercept(...).as('name')` and `cy.wait('@name')`
+
+### Parallel Execution (Optional)
+
+If <15 min time is not acceptable, enable parallel execution:
+
+```bash
+npm run cypress:run -- --parallel
+```
+
+Requires Cypress Dashboard account.
+
+---
+
+## Key Files Reference
+
+**Angular Tests:**
+- `ClientApp/cypress.config.ts` - Configuration
+- `ClientApp/cypress/support/commands.ts` - Custom commands (reused by React)
+- `ClientApp/cypress/support/fixtures.ts` - Mock data (shared with React)
+- `ClientApp/cypress/integration/features/*.cy.ts` - Feature test specs
+
+**React Tests:**
+- `react-app/cypress.config.ts` - Same as Angular, different baseUrl
+- `react-app/cypress/support/` - Copy of Angular support folder
+- `react-app/cypress/integration/features/*.cy.ts` - Adapted feature tests
+
+---
+
+## Execution Workflow (Recommended: Subagent-Driven Development)
+
+```
+Task 1 (Setup) → Validate
+  ↓
+Tasks 2-8 (Write Angular Tests) → Run in parallel via subagents
+  ↓
+Task 9 (Validate Angular) → All tests pass?
+  ↓
+Tasks 10-16 (React Setup + Adaptation) → Run in parallel
+  ↓
+Task 17 (Validate React/Mocked) → All tests pass?
+  ↓
+Task 18 (Validate React/Real API) → All tests pass?
+  ↓
+Task 19 (CI/CD) → Pipeline working?
+  ↓
+DONE: 200-300 tests passing on both Angular and React
+```
+
+Use `superpowers:subagent-driven-development` to parallelize tasks 2-8, 11-16.
+