frigate/web/e2e/specs/explore.spec.ts

/**
 * Explore page tests -- HIGH tier.
 *
 * Tests search input, filter button opening popovers,
 * search result thumbnails rendering, and detail dialog.
 */

import { test, expect } from "../fixtures/frigate-test";

test.describe("Explore Page - Search @high", () => {
  test("explore page renders with search and filter controls", async ({
    frigateApp,
  }) => {
    await frigateApp.goto("/explore");
    const pageRoot = frigateApp.page.locator("#pageRoot");
    await expect(pageRoot).toBeVisible();
    const buttons = frigateApp.page.locator("#pageRoot button");
    await expect(buttons.first()).toBeVisible({ timeout: 10_000 });
  });

  test("search input accepts text and can be cleared", async ({
    frigateApp,
  }) => {
    await frigateApp.goto("/explore");
    await frigateApp.page.waitForTimeout(1000);
    const searchInput = frigateApp.page.locator("input").first();
    if (await searchInput.isVisible()) {
      await searchInput.fill("person");
      await expect(searchInput).toHaveValue("person");
      await searchInput.fill("");
      await expect(searchInput).toHaveValue("");
    }
  });
});

test.describe("Explore Page - Filters @high", () => {
  test("camera filter button opens selector and escape closes it", async ({
    frigateApp,
  }) => {
    if (frigateApp.isMobile) {
      test.skip(); // Mobile uses drawer-based filters
      return;
    }
    await frigateApp.goto("/explore");
    await frigateApp.page.waitForTimeout(1000);
    // Find the cameras filter button
    const camerasBtn = frigateApp.page.getByRole("button", {
      name: /cameras/i,
    });
    if (await camerasBtn.isVisible().catch(() => false)) {
      await camerasBtn.click();
      await frigateApp.page.waitForTimeout(500);
      // Popover should open with camera names
      const popover = frigateApp.page.locator(
        "[data-radix-popper-content-wrapper]",
      );
      await expect(popover.first()).toBeVisible({ timeout: 3_000 });
      // Dismiss
      await frigateApp.page.keyboard.press("Escape");
      await frigateApp.page.waitForTimeout(300);
    }
    await expect(frigateApp.page.locator("#pageRoot")).toBeVisible();
  });

  test("filter button opens overlay and page remains stable", async ({
    frigateApp,
  }) => {
    await frigateApp.goto("/explore");
    await frigateApp.page.waitForTimeout(1000);
    const firstButton = frigateApp.page.locator("#pageRoot button").first();
    await expect(firstButton).toBeVisible({ timeout: 5_000 });
    await firstButton.click();
    await frigateApp.page.waitForTimeout(500);
    await frigateApp.page.keyboard.press("Escape");
    await frigateApp.page.waitForTimeout(300);
    await expect(frigateApp.page.locator("#pageRoot")).toBeVisible();
  });
});

test.describe("Explore Page - Content @high", () => {
  test("explore page shows summary content with mock events", async ({
    frigateApp,
  }) => {
    await frigateApp.goto("/explore");
    await frigateApp.page.waitForTimeout(3000);
    // With mock events, the summary view should render thumbnails or content
    const pageText = await frigateApp.page.textContent("#pageRoot");
    expect(pageText?.length).toBeGreaterThan(0);
  });
});