Portfolio/e2e/terminal.e2e.ts

import { expect, test } from '@playwright/test';
import { SIGNATURE_COPY } from '../src/app/core/content/signature-copy';

test.describe('terminal dock', () => {
  test('walks collapsed, expanded and maximized and runs the grammar', async ({
    page,
  }, testInfo) => {
    const copy = SIGNATURE_COPY.de.terminal;
    await page.goto('/');

    const trigger = page.locator('.terminal-dock-trigger');
    const panel = page.locator('.terminal-dock-panel');
    const input = page.locator('#terminal-dock-input');
    const log = page.locator('.terminal-dock-log');
    const maximize = page.locator('.terminal-dock-control[aria-pressed]');

    await expect(trigger).toBeVisible();
    await expect(panel).toHaveCount(0);

    await trigger.click();
    await expect(panel).toBeVisible();
    await expect(page.locator('.terminal-dock-prompt')).toContainText(copy.prompt);

    if (testInfo.project.name === 'mobile') {
      const box = await panel.boundingBox();
      expect(box, 'bottom-sheet panel').toBeTruthy();
      expect(box!.width).toBeGreaterThan(300);
    } else {
      await maximize.click();
      await expect(maximize).toHaveAttribute('aria-pressed', 'true');
      await maximize.click();
      await expect(maximize).toHaveAttribute('aria-pressed', 'false');
    }

    await input.fill('navigate pitch');
    await input.press('Enter');
    await page.waitForURL('**/pitch');
    await expect(page).toHaveURL(/\/pitch$/);
    await expect(log).toContainText(`${copy.prompt} navigate pitch`);

    await input.press('ArrowUp');
    await expect(input).toHaveValue('navigate pitch');

    await input.fill('history');
    await input.press('Enter');
    await expect(log).toContainText(copy.historyIntro);
    await expect(log).toContainText('navigate pitch');

    await input.fill('clear');
    await input.press('Enter');
    await expect(log).toHaveText(copy.clearedMessage);

    await input.fill('navigate p');
    await input.press('Tab');
    await expect(log).toContainText('pitch');
    await expect(log).toContainText('projects');

    await input.fill('navigate nowhere');
    await input.press('Enter');
    await expect(log).toContainText(copy.validTargetsLabel);
    await expect(log).toContainText('pitch');

    await input.fill('nav');
    await input.press('Tab');
    await expect(input).toHaveValue('navigate');
  });

  test('clicking the visible desktop trigger while open collapses the panel', async ({
    page,
  }, testInfo) => {
    test.skip(
      testInfo.project.name === 'mobile',
      'Below md the trigger is hidden while the panel is open.',
    );

    await page.goto('/');
    const trigger = page.locator('.terminal-dock-trigger');
    const panel = page.locator('.terminal-dock-panel');

    await trigger.click();
    await expect(panel).toBeVisible();
    await expect(trigger).toBeVisible();
    await expect(trigger).toHaveAttribute('aria-expanded', 'true');

    await trigger.click();
    await expect(panel).toHaveCount(0);
    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
    await expect(trigger).toBeFocused();
  });

  test('keeps the newest echoed line in the log scrollport after overflow', async ({ page }) => {
    const copy = SIGNATURE_COPY.de.terminal;
    await page.goto('/');

    const trigger = page.locator('.terminal-dock-trigger');
    const input = page.locator('#terminal-dock-input');
    const log = page.locator('.terminal-dock-log');

    await trigger.click();
    await expect(log).toBeVisible();

    for (let index = 0; index < 8; index += 1) {
      await input.fill('help');
      await input.press('Enter');
    }

    await expect(log.locator('p.echo').last()).toHaveText(`${copy.prompt} help`);

    await expect
      .poll(async () =>
        log.evaluate((element) => {
          return element.scrollTop + element.clientHeight >= element.scrollHeight - 2;
        }),
      )
      .toBe(true);

    const last = log.locator('p').last();
    const logBox = await log.boundingBox();
    const lastBox = await last.boundingBox();
    expect(logBox && lastBox).toBeTruthy();
    expect(lastBox!.y).toBeGreaterThanOrEqual(logBox!.y - 1);
    expect(lastBox!.y + lastBox!.height).toBeLessThanOrEqual(logBox!.y + logBox!.height + 1);
  });

  test('Escape from a panel control collapses the dock and returns focus to the trigger', async ({
    page,
  }) => {
    const copy = SIGNATURE_COPY.de.terminal;
    await page.goto('/');

    const trigger = page.locator('.terminal-dock-trigger');
    const panel = page.locator('.terminal-dock-panel');

    await trigger.click();
    await expect(panel).toBeVisible();

    const collapse = page.getByRole('button', { name: copy.collapseLabel });
    await collapse.focus();
    await expect(collapse).toBeFocused();

    await page.keyboard.press('Escape');
    await expect(panel).toHaveCount(0);
    await expect(trigger).toBeFocused();
  });
});