TenantAtlas/apps/website/tests/smoke/interaction.spec.ts

import { expect, test } from '@playwright/test';
import {
  expectCoreCapabilitiesVisible,
  expectNoHorizontalOverflow,
} from './smoke-helpers';

test('mobile navigation opens with vendored foundation behavior', async ({
  page,
  isMobile,
}) => {
  test.skip(!isMobile, 'mobile navigation is covered by the mobile project');

  await page.goto('/');
  await page.getByLabel('Toggle navigation').click();

  const mobilePanel = page.locator('#navbar-collapse-with-animation');

  await expect(
    mobilePanel.getByRole('link', { name: 'Plattform', exact: true })
  ).toBeVisible();
  await expect(
    mobilePanel.getByRole('link', { name: 'Docs', exact: true })
  ).toHaveAttribute('href', '/welcome-to-docs/');
  await expect(
    mobilePanel.getByRole('link', { name: 'Walkthrough anfragen' })
  ).toBeVisible();
  await expectNoHorizontalOverflow(page);
});

test('theme toggle keeps page content visible', async ({ page }) => {
  await page.goto('/');

  await page.locator('button[aria-label="Dark Theme Toggle"]:visible').click();
  await expect(
    page.getByRole('heading', {
      name: /Evidenzbasierte Governance für Microsoft-Tenant-Konfiguration/,
    })
  ).toBeVisible();

  await page.locator('button[aria-label="Light Theme Toggle"]:visible').click();
  await expect(
    page.getByRole('heading', {
      name: /Evidenzbasierte Governance für Microsoft-Tenant-Konfiguration/,
    })
  ).toBeVisible();
});

test('homepage mobile first viewport remains readable', async ({
  page,
  isMobile,
}) => {
  test.skip(!isMobile, 'mobile viewport is covered by the mobile project');

  await page.goto('/');

  const heading = page.getByRole('heading', {
    name: /Evidenzbasierte Governance für Microsoft-Tenant-Konfiguration/i,
  });
  await expect(heading).toBeVisible();

  const box = await heading.boundingBox();
  expect(box?.y ?? Number.POSITIVE_INFINITY).toBeLessThan(360);
  await expectCoreCapabilitiesVisible(page);
  await expectNoHorizontalOverflow(page);
});

test('desktop keyboard reaches navigation, CTAs, footer, and contact controls', async ({
  page,
  isMobile,
}) => {
  test.skip(
    isMobile,
    'desktop keyboard order is covered by the desktop project'
  );

  await page.goto('/contact');

  const reached = new Set<string>();

  for (let index = 0; index < 80; index += 1) {
    await page.keyboard.press('Tab');

    const active = await page.evaluate(() => {
      const element = document.activeElement as HTMLElement | null;

      return {
        id: element?.id || '',
        href: element?.getAttribute('href') || '',
        text: element?.textContent?.replace(/\s+/g, ' ').trim() || '',
        aria: element?.getAttribute('aria-label') || '',
        tag: element?.tagName || '',
      };
    });

    for (const value of [
      active.id,
      active.href,
      active.text,
      active.aria,
      active.tag,
    ]) {
      if (value) {
        reached.add(value);
      }
    }
  }

  expect([...reached].join('\n')).toContain('/platform');
  expect([...reached].join('\n')).toContain('/welcome-to-docs/');
  expect([...reached].join('\n')).toContain('Kontakt');
  expect([...reached].join('\n')).toContain('/privacy');
  expect([...reached].join('\n')).toContain('hs-firstname-contacts');
  expect([...reached].join('\n')).toContain('E-Mail-Entwurf vorbereiten');
});

test('reduced motion keeps preview pages understandable', async ({ page }) => {
  await page.emulateMedia({ reducedMotion: 'reduce' });

  for (const route of ['/', '/platform', '/pricing'] as const) {
    await page.goto(route);

    await expect(page.locator('h1').first()).toBeVisible();
    await expect(page.locator('main')).toContainText('Tenantial');
    await expectNoHorizontalOverflow(page);
  }
});

test.describe('without JavaScript', () => {
  test.use({ javaScriptEnabled: false });

  test('primary content and links remain usable', async ({ page }) => {
    for (const route of ['/', '/platform', '/contact'] as const) {
      await page.goto(route);

      await expect(page.locator('h1').first()).toBeVisible();
      await expect(
        page.getByRole('link', { name: /Kontakt|Walkthrough/i }).first()
      ).toBeVisible();
      await expectNoHorizontalOverflow(page);
    }
  });
});

test('language picker switches between German default and English routes', async ({
  page,
  isMobile,
}) => {
  test.skip(isMobile, 'desktop language picker is covered by this interaction');

  await page.goto('/platform');

  await page.getByLabel('Sprache wechseln').click();
  await page.getByRole('link', { name: 'English', exact: true }).click();

  await expect(page).toHaveURL(/\/en\/platform\/?$/);
  await expect(
    page.getByRole('heading', { name: /Platform review model/i })
  ).toBeVisible();

  await page.getByLabel('Sprache wechseln').click();
  await page.getByRole('link', { name: 'Deutsch', exact: true }).click();

  await expect(page).toHaveURL(/\/platform\/?$/);
  await expect(
    page.getByRole('heading', { name: /Plattform-Review-Modell/i })
  ).toBeVisible();
});