Fix invisible Identify chip and theme token opacity.

2026-08-05 17:15:42 -04:00
parent 79aae27a3a
commit da31ab50a7
6 changed files with 95 additions and 33 deletions
@@ -0,0 +1,46 @@
+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*\)/);
+      }
+    }
+  });
+});