Files
flights_web/tests/e2e-angular
gnezim 375bcfb0fa Add e2e test suite from flights-front with Angular API mocks
Copies Playwright e2e tests (58 specs, 300+ tests) designed for cross-app
testing. Adapts API mocks to match real Aeroflot dictionary format (title
objects with multilingual keys), adds board/schedule/days endpoint mocks,
and provides Angular-specific Playwright config on port 4203.
2026-04-15 23:07:44 +03:00
..

E2E Test Suite

Comprehensive Playwright e2e test suite for the Aeroflot-style flight search application.

Structure

e2e/
├── fixtures/           # Test data fixtures
│   ├── cities.json     # City data (20+ cities)
│   ├── flights.json    # Flight data (scheduled, arrived, delayed, cancelled)
│   ├── routes.json     # Route data (Moscow-Sochi, Moscow-St Petersburg, etc.)
│   ├── api-responses.json  # API response templates
│   └── errors.json     # Error response examples
├── support/
│   └── test-utilities.ts  # Comprehensive test utilities (740+ lines)
├── integration/
│   └── templates/      # Template files for generating 300+ tests
│       ├── online-board-arrival.template.ts
│       ├── online-board-departure.template.ts
│       ├── online-board-route.template.ts
│       ├── online-board-flight.template.ts
│       ├── schedule-search.template.ts
│       ├── flight-details.template.ts
│       ├── flights-map.template.ts
│       └── popular-requests.template.ts
└── visual/             # Visual regression tests
    ├── landing.spec.ts
    ├── flight-board.spec.ts
    └── flight-expanded.spec.ts

Test Utilities

The test-utilities.ts file provides:

Test Data Generators

  • generateFlight() - Generate flight objects with random data
  • generateFlights(count) - Generate multiple flights
  • generateScheduleEntry() - Generate schedule entries
  • generateScheduleEntries(count) - Generate multiple schedule entries
  • generateDestination() - Generate destination objects
  • generateDestinations(count) - Generate multiple destinations

Constants

  • CITIES - 20+ Russian cities with codes (MOW, LED, AER, etc.)
  • AIRPORTS - 10+ airports (SVO, DME, VKO, LED, AER, etc.)
  • FLIGHT_NUMBERS - 20+ flight numbers
  • AIRLINE_CODES - ['SU', 'FV']
  • AIRLINE_NAMES - { SU: 'Aeroflot', FV: 'Rossiya' }
  • AIRCRAFT_TYPES - 7 aircraft types
  • STATUS_TYPES - 10 flight statuses

URL Helpers

  • buildRouteParam(cityCode, date) - Build route parameter
  • buildOnlineBoardPath(direction, cityCode, date) - Build online board URL
  • buildSchedulePath() - Build schedule URL
  • buildFlightsMapPath() - Build flights map URL
  • buildFlightDetailsPath(flightNumber, date) - Build flight details URL

Search Helpers

  • searchFlightByNumber(page, flightNumber, date?) - Search by flight number
  • searchFlightByRoute(page, departureCity, arrivalCity, date?) - Search by route
  • searchFlightByDate(page, date) - Search by date
  • openFlightDetails(page, flightIndex) - Open flight details

Assertion Helpers

  • expectUrlToMatch(page, pattern) - Verify URL matches pattern
  • expectElementToBeVisible(locator, message?) - Element visible
  • expectElementToBeHidden(locator, message?) - Element hidden
  • expectElementToHaveText(locator, text, message?) - Element has text
  • expectElementToContainText(locator, text, message?) - Element contains text
  • expectElementToHaveAttribute(locator, attribute, value, message?) - Element has attribute
  • expectElementToHaveClass(locator, className, message?) - Element has class
  • expectElementToBeEnabled(locator, message?) - Element enabled
  • expectElementToBeDisabled(locator, message?) - Element disabled
  • expectElementToBeChecked(locator, message?) - Element checked
  • expectElementToBeUnchecked(locator, message?) - Element unchecked
  • expectElementToHaveValue(locator, value, message?) - Element has value
  • expectElementToHaveCount(locator, count, message?) - Element count
  • expectElementToBeFocused(locator, message?) - Element focused
  • expectElementNotToBeFocused(locator, message?) - Element not focused

Date Helpers

  • getToday() - Get today's date
  • getTomorrow() - Get tomorrow's date
  • getYesterday() - Get yesterday's date
  • getFutureDate(days) - Get future date
  • getPastDate(days) - Get past date
  • formatDateForUrl(date) - Format date for URL
  • formatDateForDisplay(date, locale) - Format date for display

Error Generators

  • generateNotFoundError() - 404 error
  • generateBadRequestError() - 400 error
  • generateUnauthorizedError() - 401 error
  • generateForbiddenError() - 403 error
  • generateServerError() - 500 error
  • generateTimeoutError() - 504 error

Fixtures

cities.json

{
  "cities": [
    {
      "code": "MOW",
      "name": "Moscow",
      "nameRu": "Москва",
      "latitude": 55.7558,
      "longitude": 37.6173,
      "country": "Russia",
      "countryCode": "RU"
    },
    ...
  ]
}

flights.json

{
  "flights": {
    "domestic": { ... },
    "international": { ... },
    "scheduled": { ... },
    "arrived": { ... },
    "delayed": { ... },
    "cancelled": { ... }
  }
}

routes.json

{
  "routes": {
    "moscow-sochi": { ... },
    "moscow-stPetersburg": { ... },
    "moscow-sochi-return": { ... },
    ...
  }
}

api-responses.json

Complete API response templates for:

  • Flight board (departure/arrival)
  • Flight details
  • Schedule search
  • Flights map
  • Popular requests

errors.json

Error response examples:

  • 404 Not Found
  • 400 Bad Request
  • 401 Unauthorized
  • 403 Forbidden
  • 422 Validation Error
  • 429 Rate Limit
  • 500 Server Error
  • 503 Service Unavailable

Templates

Each template file contains comprehensive test suites for a specific feature:

1. online-board-arrival.template.ts

  • Page navigation tests
  • Flight display tests
  • Flight search tests
  • Date navigation tests
  • Filtering tests
  • Flight card tests
  • Error handling tests
  • Accessibility tests

2. online-board-departure.template.ts

  • Page navigation tests
  • Flight display tests
  • Flight search tests
  • Date navigation tests
  • Filtering tests
  • Flight card tests
  • Error handling tests
  • Accessibility tests

3. online-board-route.template.ts

  • Page navigation tests
  • Route search tests
  • Flight display tests
  • Date navigation tests
  • Filtering tests
  • Flight card tests
  • Error handling tests
  • Accessibility tests

4. online-board-flight.template.ts

  • Page navigation tests
  • Flight information tests
  • Flight details tests
  • Aircraft information tests
  • Schedule information tests
  • Error handling tests
  • Navigation tests
  • Accessibility tests

5. schedule-search.template.ts

  • Page navigation tests
  • Search form tests
  • Search functionality tests
  • Schedule entry display tests
  • Filtering tests
  • Error handling tests
  • Accessibility tests

6. flight-details.template.ts

  • Page navigation tests
  • Flight information tests
  • Flight details tests
  • Aircraft information tests
  • Schedule information tests
  • Error handling tests
  • Navigation tests
  • Accessibility tests

7. flights-map.template.ts

  • Page navigation tests
  • Map display tests
  • Filtering tests
  • Flight details panel tests
  • Map controls tests
  • Cluster markers tests
  • Error handling tests
  • Accessibility tests
  • Responsive design tests
  • Page navigation tests
  • Request display tests
  • Request interaction tests
  • Request sorting tests
  • Request filtering tests
  • Request pagination tests
  • Error handling tests
  • Accessibility tests
  • Responsive design tests

Running Tests

# Run all tests
pnpm e2e

# Run specific test file
pnpm e2e -- tests/landing.spec.ts

# Run in headless mode
pnpm e2e --headless

# Run with UI
pnpm e2e --ui

# Run with trace
pnpm e2e --trace on

# Run with video
pnpm e2e --video on

Test Data Examples

Generate a flight

import { generateFlight } from '@e2e/support/test-utilities';

const flight = generateFlight({
  direction: 'departure',
  cityCode: 'MOW',
  status: 'scheduled',
  date: '2026-04-06',
});

Generate multiple flights

import { generateFlights } from '@e2e/support/test-utilities';

const flights = generateFlights(20, {
  direction: 'departure',
  cityCode: 'MOW',
});

Generate a schedule entry

import { generateScheduleEntry } from '@e2e/support/test-utilities';

const entry = generateScheduleEntry({
  from: 'MOW',
  to: 'AER',
  dateFrom: '2026-04-06',
  dateTo: '2026-04-12',
  direct: true,
});

Generate an error

import { generateNotFoundError } from '@e2e/support/test-utilities';

const error = generateNotFoundError();
// Returns: { status: 404, body: { error: 'Not Found', message: '...' } }

Best Practices

  1. Use test utilities - Always use the provided utilities instead of hardcoding data
  2. Follow naming conventions - Use test.describe for groups, test for individual tests
  3. Use data-testid - Always use data-testid attributes for element selection
  4. Wait for network idle - Use page.waitForLoadState('networkidle') after navigation
  5. Use assertions - Always use Playwright's expect() for assertions
  6. Handle errors - Include error handling tests for each feature
  7. Test accessibility - Include accessibility tests for each feature
  8. Test responsive - Include responsive design tests for each feature
  9. Use fixtures - Use JSON fixtures for complex data structures
  10. Keep tests independent - Each test should be able to run independently

Creating New Tests

  1. Copy the appropriate template file
  2. Replace .template.ts with .spec.ts
  3. Update the test descriptions
  4. Add specific test cases
  5. Run the test to verify

Example:

cp e2e/integration/templates/online-board-arrival.template.ts \
   e2e/integration/online-board-arrival.spec.ts

Test Coverage

The template files provide comprehensive coverage for:

  • Online Board (Arrival/Departure/Route/Flight): 40+ tests each
  • Schedule Search: 30+ tests
  • Flight Details: 40+ tests
  • Flights Map: 30+ tests
  • Popular Requests: 30+ tests

Total: 300+ tests with full coverage of all features.