punimtag/e2e/tests/viewer.identify-chip-contrast.spec.ts

import { test, expect } from '../fixtures';

/**
 * Guards dark-mode face tooltip regression: never pair forced `bg-white` with
 * theme `text-foreground` (light-on-light when `.dark`).
 */
test.describe('viewer face identify chip @smoke', () => {
  test('Identify chip source does not use bg-white + text-foreground', async ({
    page,
    playkitConfig,
  }) => {
    await page.goto(playkitConfig.baseUrl);
    await expect(page.locator('body')).toBeVisible({ timeout: 20_000 });
    await page.evaluate(() => document.documentElement.classList.add('dark'));

    const photoLink = page.locator('a[href*="photo="]').first();
    test.skip((await photoLink.count()) === 0, 'No photo deep-links on gallery home');

    await photoLink.click();
    await expect(page.locator('[role="dialog"], img').first()).toBeVisible({ timeout: 15_000 });

    const hasBadPairing = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('div')).some((el) => {
        const cls = typeof el.className === 'string' ? el.className : '';
        return (
          cls.includes('bg-white') &&
          cls.includes('text-foreground') &&
          (el.textContent || '').includes('Identify')
        );
      });
    });
    expect(hasBadPairing).toBe(false);

    // Prefer asserting live chip when a face hover works
    const img = page.locator('[role="dialog"] img, img').first();
    const box = await img.boundingBox();
    if (box) {
      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 3);
      const chip = page.getByText(/^Identify$/i).first();
      if (await chip.isVisible({ timeout: 2_000 }).catch(() => false)) {
        const color = await chip.evaluate((el) => getComputedStyle(el).color);
        expect(color).toMatch(/rgb\(\s*255,\s*255,\s*255\s*\)/);
      }
    }
  });
});