mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-02 17:12:16 +03:00
Add frontend tests (#22783)
* basic e2e frontend test framework * improve mock data generation and add test cases * more cases * add e2e tests to PR template * don't generate mock data in PR CI * satisfy codeql check * fix flaky system page tab tests by guarding against crashes from incomplete mock stats * reduce local test runs to 4 workers to match CI
This commit is contained in:
Josh Hawkins
@@ -0,0 +1,253 @@
|
||||
/**
|
||||
* Live page tests -- CRITICAL tier.
|
||||
*
|
||||
* Tests camera dashboard rendering, camera card clicks, single camera view
|
||||
* with named controls, feature toggle behavior, context menu, and mobile layout.
|
||||
*/
|
||||
|
||||
import { test, expect } from "../fixtures/frigate-test";
|
||||
|
||||
test.describe("Live Dashboard @critical", () => {
|
||||
test("dashboard renders all configured cameras by name", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
await frigateApp.goto("/");
|
||||
for (const cam of ["front_door", "backyard", "garage"]) {
|
||||
await expect(
|
||||
frigateApp.page.locator(`[data-camera='${cam}']`),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
|
||||
test("clicking camera card opens single camera view via hash", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
await frigateApp.goto("/");
|
||||
const card = frigateApp.page.locator("[data-camera='front_door']").first();
|
||||
await card.click({ timeout: 10_000 });
|
||||
await expect(frigateApp.page).toHaveURL(/#front_door/);
|
||||
});
|
||||
|
||||
test("back button returns from single camera to dashboard", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
// First navigate to dashboard so there's history to go back to
|
||||
await frigateApp.goto("/");
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
// Click a camera to enter single view
|
||||
const card = frigateApp.page.locator("[data-camera='front_door']").first();
|
||||
await card.click({ timeout: 10_000 });
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
// Now click Back to return to dashboard
|
||||
const backBtn = frigateApp.page.getByText("Back", { exact: true });
|
||||
if (await backBtn.isVisible().catch(() => false)) {
|
||||
await backBtn.click();
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
}
|
||||
// Should be back on the dashboard with cameras visible
|
||||
await expect(
|
||||
frigateApp.page.locator("[data-camera='front_door']"),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("birdseye view loads without crash", async ({ frigateApp }) => {
|
||||
await frigateApp.goto("/#birdseye");
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
await expect(frigateApp.page.locator("body")).toBeVisible();
|
||||
});
|
||||
|
||||
test("empty group shows fallback content", async ({ frigateApp }) => {
|
||||
await frigateApp.page.goto("/?group=nonexistent");
|
||||
await frigateApp.page.waitForSelector("#pageRoot", { timeout: 10_000 });
|
||||
await expect(frigateApp.page.locator("#pageRoot")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Live Single Camera - Controls @critical", () => {
|
||||
test("single camera view shows Back and History buttons (desktop)", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (frigateApp.isMobile) {
|
||||
test.skip(); // On mobile, buttons may show icons only
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/#front_door");
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
// Back and History are visible text buttons in the header
|
||||
await expect(
|
||||
frigateApp.page.getByText("Back", { exact: true }),
|
||||
).toBeVisible({ timeout: 5_000 });
|
||||
await expect(
|
||||
frigateApp.page.getByText("History", { exact: true }),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("single camera view shows feature toggle icons (desktop)", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/#front_door");
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
// Feature toggles are CameraFeatureToggle components rendered as divs
|
||||
// with bg-selected (active) or bg-secondary (inactive) classes
|
||||
// Count the toggles - should have at least detect, recording, snapshots
|
||||
const toggles = frigateApp.page.locator(
|
||||
".flex.flex-col.items-center.justify-center.bg-selected, .flex.flex-col.items-center.justify-center.bg-secondary",
|
||||
);
|
||||
const count = await toggles.count();
|
||||
expect(count).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
test("clicking a feature toggle changes its visual state (desktop)", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/#front_door");
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
// Find active toggles (bg-selected class = feature is ON)
|
||||
const activeToggles = frigateApp.page.locator(
|
||||
".flex.flex-col.items-center.justify-center.bg-selected",
|
||||
);
|
||||
const initialCount = await activeToggles.count();
|
||||
if (initialCount > 0) {
|
||||
// Click the first active toggle to disable it
|
||||
await activeToggles.first().click();
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
// After WS mock echoes back new state, count should decrease
|
||||
const newCount = await activeToggles.count();
|
||||
expect(newCount).toBeLessThan(initialCount);
|
||||
}
|
||||
});
|
||||
|
||||
test("settings gear button opens dropdown (desktop)", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/#front_door");
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
// Find the gear icon button (last button-like element in header)
|
||||
// The settings gear opens a dropdown with Stream, Play in background, etc.
|
||||
const gearButtons = frigateApp.page.locator("button:has(svg)");
|
||||
const count = await gearButtons.count();
|
||||
// Click the last one (gear icon is typically last in the header)
|
||||
if (count > 0) {
|
||||
await gearButtons.last().click();
|
||||
await frigateApp.page.waitForTimeout(500);
|
||||
// A dropdown or drawer should appear
|
||||
const overlay = frigateApp.page.locator(
|
||||
'[role="menu"], [data-radix-menu-content], [role="dialog"]',
|
||||
);
|
||||
const visible = await overlay
|
||||
.first()
|
||||
.isVisible()
|
||||
.catch(() => false);
|
||||
if (visible) {
|
||||
await frigateApp.page.keyboard.press("Escape");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test("keyboard shortcut f does not crash on desktop", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/");
|
||||
await frigateApp.page.keyboard.press("f");
|
||||
await frigateApp.page.waitForTimeout(500);
|
||||
await expect(frigateApp.page.locator("body")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Live Single Camera - Mobile Controls @critical", () => {
|
||||
test("mobile camera view has settings drawer trigger", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (!frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/#front_door");
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
// On mobile, settings gear opens a drawer
|
||||
// The button has aria-label with the camera name like "front_door Settings"
|
||||
const buttons = frigateApp.page.locator("button:has(svg)");
|
||||
const count = await buttons.count();
|
||||
expect(count).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Live Context Menu @critical", () => {
|
||||
test("right-click on camera opens context menu on desktop", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/");
|
||||
const card = frigateApp.page.locator("[data-camera='front_door']").first();
|
||||
await card.waitFor({ state: "visible", timeout: 10_000 });
|
||||
await card.click({ button: "right" });
|
||||
const contextMenu = frigateApp.page.locator(
|
||||
'[role="menu"], [data-radix-menu-content]',
|
||||
);
|
||||
await expect(contextMenu.first()).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
test("context menu closes on escape", async ({ frigateApp }) => {
|
||||
if (frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/");
|
||||
const card = frigateApp.page.locator("[data-camera='front_door']").first();
|
||||
await card.waitFor({ state: "visible", timeout: 10_000 });
|
||||
await card.click({ button: "right" });
|
||||
await frigateApp.page.waitForTimeout(500);
|
||||
await frigateApp.page.keyboard.press("Escape");
|
||||
await frigateApp.page.waitForTimeout(300);
|
||||
const contextMenu = frigateApp.page.locator(
|
||||
'[role="menu"], [data-radix-menu-content]',
|
||||
);
|
||||
await expect(contextMenu).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Live Mobile Layout @critical", () => {
|
||||
test("mobile renders cameras without sidebar", async ({ frigateApp }) => {
|
||||
if (!frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/");
|
||||
await expect(frigateApp.page.locator("aside")).not.toBeVisible();
|
||||
await expect(
|
||||
frigateApp.page.locator("[data-camera='front_door']"),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("mobile camera click opens single camera view", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
if (!frigateApp.isMobile) {
|
||||
test.skip();
|
||||
return;
|
||||
}
|
||||
await frigateApp.goto("/");
|
||||
const card = frigateApp.page.locator("[data-camera='front_door']").first();
|
||||
await card.click({ timeout: 10_000 });
|
||||
await expect(frigateApp.page).toHaveURL(/#front_door/);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user