change source and allow cloning to multiple cameras

web/e2e/specs/clone-camera.spec.ts

@@ -3,19 +3,42 @@
  *
  * Covers the design invariants that don't depend on per-camera resolution
  * differences in the mock fixture:
- *   1. Dialog opens from the Clone button on a camera row.
- *   2. "Stream URLs and roles" is forced on and disabled for new-camera target.
- *   3. Clicking Clone issues a PUT and shows a restart prompt.
+ *   1. Dialog opens from the "Clone settings" button below Add/Delete.
+ *   2. A source camera must be chosen inside the dialog before cloning.
+ *   3. "Stream URLs and roles" is forced on and disabled for new-camera target.
+ *   4. Cloning to a new camera issues a single add PUT and shows a restart prompt.
+ *   5. The existing-camera target selects multiple destinations via a switch
+ *      popover (with an "All cameras" toggle and source exclusion); the closed
+ *      trigger summarizes the selection by name or as "All cameras".
  *
- * The spatial-mismatch warning path is exercised in unit-level review and
- * via manual QA — the shared mock fixture ships every camera at 1280×720,
- * so an E2E assertion for that path would silently pass without coverage.
+ * The spatial-mismatch warning path is exercised in unit-level review and via
+ * manual QA — the shared mock fixture ships every camera at 1280×720. The
+ * existing-camera PUT fan-out is likewise not asserted here: the mock cameras
+ * are identical apart from stream URLs (which existing-camera clones never
+ * copy) and the schema mock is empty, so a clone onto them produces no diff
+ * and no PUT. That path is covered by unit-level review and manual QA.
  */
 
 import { test, expect } from "../fixtures/frigate-test";
 
-const CLONE_BUTTON_ARIA_PREFIX = "Clone settings from";
-const DIALOG_TITLE_PREFIX = "Clone settings from";
+async function openCloneDialog(frigateApp: {
+  page: import("@playwright/test").Page;
+}) {
+  await frigateApp.page
+    .getByRole("button", { name: /^Clone settings$/i })
+    .click();
+  await expect(frigateApp.page.getByRole("dialog")).toBeVisible();
+}
+
+async function selectSource(
+  frigateApp: { page: import("@playwright/test").Page },
+  source: string,
+) {
+  await frigateApp.page.getByRole("dialog").getByRole("combobox").click();
+  await frigateApp.page
+    .getByRole("option", { name: source, exact: true })
+    .click();
+}
 
 test.describe("Camera clone dialog @medium @mobile", () => {
   test.beforeEach(async ({ frigateApp }) => {
@@ -25,31 +48,26 @@ test.describe("Camera clone dialog @medium @mobile", () => {
     ).toBeVisible();
   });
 
-  test("opens the dialog from a camera row's Clone button", async ({
+  test("opens the dialog from the Clone settings button", async ({
     frigateApp,
   }) => {
-    const cloneButton = frigateApp.page
-      .getByRole("button", { name: new RegExp(CLONE_BUTTON_ARIA_PREFIX, "i") })
-      .first();
-    await cloneButton.click();
+    await openCloneDialog(frigateApp);
 
-    await expect(frigateApp.page.getByRole("dialog")).toBeVisible();
     await expect(
-      frigateApp.page
-        .getByRole("dialog")
-        .getByText(new RegExp(DIALOG_TITLE_PREFIX, "i")),
+      frigateApp.page.getByRole("dialog").getByText(/Clone camera settings/i),
     ).toBeVisible();
+
+    // The Clone button is disabled until a source (and target) is chosen.
+    await expect(
+      frigateApp.page.getByRole("button", { name: /^Clone$/i }),
+    ).toBeDisabled();
   });
 
   test("forces Stream URLs and roles on for new-camera target", async ({
     frigateApp,
   }) => {
-    const cloneButton = frigateApp.page
-      .getByRole("button", { name: new RegExp(CLONE_BUTTON_ARIA_PREFIX, "i") })
-      .first();
-    await cloneButton.click();
-
-    await expect(frigateApp.page.getByRole("dialog")).toBeVisible();
+    await openCloneDialog(frigateApp);
+    await selectSource(frigateApp, "Front Door");
 
     // The "New camera" radio is selected by default; the Streams group renders
     // the ffmpeg_live checkbox as forced-checked and disabled.
@@ -63,7 +81,7 @@ test.describe("Camera clone dialog @medium @mobile", () => {
     await expect(streamsCheckbox).toBeDisabled();
   });
 
-  test("issues a PUT and shows restart toast for new-camera target", async ({
+  test("issues a single add PUT and shows restart toast for new-camera target", async ({
     frigateApp,
   }) => {
     const requests: { body: unknown }[] = [];
@@ -83,20 +101,15 @@ test.describe("Camera clone dialog @medium @mobile", () => {
       frigateApp.page.getByRole("heading", { name: /Manage Cameras/i }),
     ).toBeVisible();
 
-    const cloneButton = frigateApp.page
-      .getByRole("button", { name: new RegExp(CLONE_BUTTON_ARIA_PREFIX, "i") })
-      .first();
-    await cloneButton.click();
-
-    await expect(frigateApp.page.getByRole("dialog")).toBeVisible();
+    await openCloneDialog(frigateApp);
+    await selectSource(frigateApp, "Front Door");
 
     const nameInput = frigateApp.page.getByPlaceholder(
       /e\.g\., back_door or Back Door/i,
     );
     await nameInput.fill("clone_target_one");
 
-    // After typing a valid name, the Clone button becomes enabled because
-    // changeCount > 0 (the dialog's previewPayloads memo watches the name).
+    // With a source picked and a valid name, changeCount > 0 enables Clone.
     await expect(
       frigateApp.page.getByRole("button", { name: /^Clone$/i }),
     ).toBeEnabled({ timeout: 5_000 });
@@ -123,4 +136,46 @@ test.describe("Camera clone dialog @medium @mobile", () => {
       frigateApp.page.getByRole("button", { name: /Restart/i }).first(),
     ).toBeVisible({ timeout: 8_000 });
   });
+
+  test("selects multiple existing destination cameras via a switch popover", async ({
+    frigateApp,
+  }) => {
+    await openCloneDialog(frigateApp);
+    await selectSource(frigateApp, "Front Door");
+
+    await frigateApp.page
+      .getByRole("radio", { name: /Existing cameras/i })
+      .click();
+
+    const dialog = frigateApp.page.getByRole("dialog");
+
+    // The destination trigger starts with the empty-selection placeholder.
+    await dialog
+      .getByRole("button", { name: /Select at least one camera/i })
+      .click();
+
+    // The chosen source is excluded from the destination switch list.
+    await expect(
+      dialog.getByRole("switch", { name: /Backyard/i }),
+    ).toBeVisible();
+    await expect(dialog.getByRole("switch", { name: /Garage/i })).toBeVisible();
+    await expect(
+      dialog.getByRole("switch", { name: /^Front Door$/i }),
+    ).toHaveCount(0);
+
+    // Selecting a single camera summarizes by name once the popover closes.
+    await dialog.getByRole("switch", { name: /Backyard/i }).click();
+    await frigateApp.page.keyboard.press("Escape");
+    await expect(
+      dialog.getByRole("button", { name: /^Backyard$/i }),
+    ).toBeVisible();
+
+    // Reopen and select everything; the trigger collapses to "All cameras".
+    await dialog.getByRole("button", { name: /^Backyard$/i }).click();
+    await dialog.getByRole("switch", { name: /^All cameras$/i }).click();
+    await frigateApp.page.keyboard.press("Escape");
+    await expect(
+      dialog.getByRole("button", { name: /^All cameras$/i }),
+    ).toBeVisible();
+  });
 });