docs: add e2e test implementation plan with detailed task breakdown
This commit is contained in:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user