e2e/help-button.spec.ts

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

test.describe('Help Button', () => {
  test('should be visible in header', async ({ page }) => {
    await page.goto('http://localhost:8080');

    // Wait for page to load
    await page.waitForLoadState('networkidle');

    // Take screenshot of header
    await page.screenshot({ path: 'tests/screenshots/header.png', fullPage: false });

    // Check if Help button is visible
    const helpButton = page.locator('button:has-text("Hjælp")');
    const isVisible = await helpButton.isVisible();

    console.log('Help button visible:', isVisible);

    // Also check for HelpCircle icon button
    const helpIcon = page.locator('button:has(svg.lucide-help-circle)');
    const iconVisible = await helpIcon.isVisible();
    console.log('Help icon visible:', iconVisible);

    // Get all buttons in header
    const headerButtons = page.locator('header button');
    const count = await headerButtons.count();
    console.log('Total header buttons:', count);

    // List all button texts
    for (let i = 0; i < count; i++) {
      const text = await headerButtons.nth(i).textContent();
      console.log(`Button ${i}:`, text?.trim() || '[no text]');
    }

    expect(isVisible || iconVisible).toBeTruthy();
  });

  test('should open help dialog when clicked', async ({ page }) => {
    await page.goto('http://localhost:8080');
    await page.waitForLoadState('networkidle');

    // Try clicking help button
    const helpButton = page.locator('button:has-text("Hjælp")').first();

    if (await helpButton.isVisible()) {
      await helpButton.click();

      // Check if dialog opened
      const dialog = page.locator('[role="dialog"]');
      await expect(dialog).toBeVisible({ timeout: 5000 });

      // Check dialog title
      const title = page.locator('[role="dialog"] h2:has-text("Hjælp")');
      await expect(title).toBeVisible();

      await page.screenshot({ path: 'tests/screenshots/help-dialog.png' });
    }
  });
});