flights_web/tests/e2e-angular/search-panel.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Search Panel - Filter Sidebar (US-6)', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000');
  });

  test('should render filter accordion container', async ({ page }) => {
    const filterAccordion = page.locator('[data-testid="filter-accordion"]');
    await expect(filterAccordion).toBeVisible();
  });

  test('should render flight number search tab', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await expect(flightTab).toBeVisible();
  });

  test('should render route search tab', async ({ page }) => {
    const routeTab = page.locator('[data-testid="filter-route-tab"]');
    await expect(routeTab).toBeVisible();
  });

  test('should expand flight tab when clicked', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');

    // Click to ensure it's expanded
    await flightTab.click();

    // Wait for search panel to appear
    const searchByFlight = page.locator('[data-testid="search-by-flight"]');
    await expect(searchByFlight).toBeVisible({ timeout: 5000 });
  });

  test('should display flight number input when flight tab is active', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const flightInput = page.locator('[data-testid="filter-flight-number-input"]');
    await expect(flightInput).toBeVisible();
  });

  test('should allow entering flight number', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const flightInput = page.locator('[data-testid="filter-flight-number-input"]');
    await flightInput.fill('1402');
    await expect(flightInput).toHaveValue('1402');
  });

  test('should display flight suffix input', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const suffixInput = page.locator('[data-testid="filter-flight-number-suffix-input"]');
    await expect(suffixInput).toBeVisible();
  });

  test('should allow entering flight suffix', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const suffixInput = page.locator('[data-testid="filter-flight-number-suffix-input"]');
    await suffixInput.fill('A');
    await expect(suffixInput).toHaveValue('A');
  });

  test('should display date picker', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const datePicker = page.locator('[data-testid="filter-flight-number-calendar"]');
    await expect(datePicker).toBeVisible();
  });

  test('should display search button', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const searchButton = page.locator('[data-testid="filter-flight-number-search"]');
    await expect(searchButton).toBeVisible();
  });

  test('should expand route tab when clicked', async ({ page }) => {
    const routeTab = page.locator('[data-testid="filter-route-tab"]');

    // Click to ensure it's expanded
    await routeTab.click();

    // Wait for search panel to appear
    const searchByRoute = page.locator('[data-testid="search-by-route"]');
    await expect(searchByRoute).toBeVisible({ timeout: 5000 });
  });

  test('should toggle between flight and route tabs', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    const routeTab = page.locator('[data-testid="filter-route-tab"]');

    // Open flight tab
    await flightTab.click();
    let flightContent = page.locator('[data-testid="search-by-flight"]');
    await expect(flightContent).toBeVisible();

    // Switch to route tab
    await routeTab.click();
    const routeContent = page.locator('[data-testid="search-by-route"]');
    await expect(routeContent).toBeVisible();

    // Flight content should no longer be visible
    flightContent = page.locator('[data-testid="search-by-flight"]');
    await expect(flightContent).not.toBeVisible();
  });

  test('should have SU prefix displayed', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const suPrefix = page.locator('.prefix');
    await expect(suPrefix).toContainText('SU');
  });

  test('should have clear button for flight number', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const flightInput = page.locator('[data-testid="filter-flight-number-input"]');
    await flightInput.fill('1402');

    const clearButton = page.locator('[data-testid="filter-flight-number-clear"]').first();
    await expect(clearButton).toBeVisible();
  });

  test('should clear flight number when clear button clicked', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');
    await flightTab.click();

    const flightInput = page.locator('[data-testid="filter-flight-number-input"]');
    await flightInput.fill('1402');

    const clearButton = page.locator('[data-testid="filter-flight-number-clear"]').first();
    await clearButton.click();

    await expect(flightInput).toHaveValue('');
  });

  test('should display all three search sections in filter accordion', async ({ page }) => {
    const filterAccordion = page.locator('[data-testid="filter-accordion"]');

    // Get all section headers
    const sectionHeaders = filterAccordion.locator('button[class*="sectionHeader"]');
    const count = await sectionHeaders.count();

    expect(count).toBeGreaterThanOrEqual(3); // At least 3 sections (flight, route, arrival)
  });

  test('should support keyboard navigation', async ({ page }) => {
    const flightTab = page.locator('[data-testid="filter-flight-tab"]');

    // Focus the button
    await flightTab.focus();

    // Press Enter to activate
    await flightTab.press('Enter');

    const searchByFlight = page.locator('[data-testid="search-by-flight"]');
    await expect(searchByFlight).toBeVisible({ timeout: 5000 });
  });
});