carmanagement/apps/homepage/tests/browser/navigation.spec.ts

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

test.use({ viewport: { width: 390, height: 844 } });

test('mobile navigation opens modally, closes with Escape, and returns focus', async ({ page }) => {
  await page.goto('/en/system');
  const trigger = page.getByRole('button', { name: 'Open navigation menu' });
  await trigger.focus();
  await trigger.click();

  const dialog = page.getByRole('dialog', { name: 'Primary navigation' });
  await expect(dialog).toBeVisible();
  await expect(page.locator('body')).toHaveAttribute('data-navigation-open', 'true');
  await expect(page.getByRole('button', { name: 'Close navigation menu' })).toBeFocused();

  await page.keyboard.press('Escape');
  await expect(dialog).not.toBeVisible();
  await expect(trigger).toBeFocused();
});

test('skip navigation moves focus to the main landmark', async ({ page }) => {
  await page.goto('/en/system');
  await page.keyboard.press('Tab');
  const skip = page.getByRole('link', { name: 'Skip to main content' });
  await expect(skip).toBeFocused();
  await skip.press('Enter');
  await expect(page.locator('#main-content')).toBeFocused();
});


test.describe('primary navigation visibility', () => {
  test.use({ viewport: { width: 1024, height: 768 } });

  test('keeps the complete navbar visible at common laptop widths', async ({ page }) => {
    await page.goto('/en/system');

    const navigation = page.getByRole('navigation', { name: 'Primary navigation' }).first();
    await expect(navigation).toBeVisible();

    for (const label of ['Product', 'Workflow', 'Modules', 'Pricing', 'FAQ']) {
      await expect(navigation.getByRole('link', { name: label, exact: true })).toBeVisible();
    }
  });
});

test.describe('mobile primary navigation destinations', () => {
  test.use({ viewport: { width: 390, height: 844 } });

  test('keeps every navbar destination in the mobile drawer', async ({ page }) => {
    await page.goto('/en/system');
    await page.getByRole('button', { name: 'Open navigation menu' }).click();

    const dialog = page.getByRole('dialog', { name: 'Primary navigation' });
    for (const label of ['Product', 'Workflow', 'Modules', 'Pricing', 'FAQ']) {
      await expect(dialog.getByRole('link', { name: label, exact: true })).toBeVisible();
    }
  });
});