1 files changed, 117 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_device_custom_edit.js b/devtools/client/responsive/test/browser/browser_device_custom_edit.js
new file mode 100644
index 0000000000..35fee3c906
--- /dev/null
+++ b/devtools/client/responsive/test/browser/browser_device_custom_edit.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that adding a device, submitting it, and then editing it updates the device's
+// original values when it is saved.
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+const device = {
+  name: "Original Custom Device",
+  width: 320,
+  height: 480,
+  pixelRatio: 1,
+  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  touch: false,
+};
+
+const newDevice = {
+  name: "Edited Custom Device",
+  width: 300,
+  height: 900,
+  pixelRatio: 4,
+  userAgent: "Different User agent",
+  touch: true,
+};
+
+addRDMTask(
+  TEST_URL,
+  async function ({ ui }) {
+    const { toolWindow } = ui;
+    const { document } = toolWindow;
+
+    await openDeviceModal(ui);
+
+    info("Add device.");
+    const adderShow = document.querySelector("#device-add-button");
+    adderShow.click();
+    await addDeviceInModal(ui, device);
+
+    info("Submit the added device.");
+    let deviceSelector = document.getElementById("device-selector");
+    document.getElementById("device-close-button").click();
+
+    await testMenuItems(toolWindow, deviceSelector, menuItems => {
+      const originalDevice = findMenuItem(menuItems, device.name);
+      ok(originalDevice, "Original custom device menu item exists.");
+    });
+
+    info("Select the added device in menu.");
+    await selectDevice(ui, "Custom Device");
+    await openDeviceModal(ui);
+
+    info("Edit the device.");
+    const editorShow = document.querySelector(
+      ".device-type-custom #device-edit-button"
+    );
+    editorShow.click();
+    await editDeviceInModal(ui, device, newDevice);
+
+    info("Ensure the edited device name is updated in the custom device list.");
+    const customDevicesList = document.querySelector(".device-type-custom");
+    const editedCustomDevice = customDevicesList.querySelector(".device-name");
+    is(
+      editedCustomDevice.textContent,
+      newDevice.name,
+      `${device.name} is updated to ${newDevice.name} in the custom device list`
+    );
+
+    info("Ensure the viewport width and height are updated in the toolbar.");
+    const [width, height] = document.querySelectorAll(
+      ".text-input.viewport-dimension-input"
+    );
+    is(width.value, "300", "Viewport width is 300");
+    is(height.value, "900", "Viewport height is 900");
+
+    info("Ensure the pixel ratio is updated in the toolbar.");
+    const devicePixelRatioSpan = document.querySelector(
+      "#device-pixel-ratio-menu span"
+    );
+    is(
+      devicePixelRatioSpan.textContent,
+      "DPR: 4",
+      "Viewport pixel ratio is 4."
+    );
+
+    info("Ensure the user agent has been updated.");
+    const userAgentInput = document.querySelector("#user-agent-input");
+    is(
+      userAgentInput.value,
+      newDevice.userAgent,
+      `Viewport user agent is ${newDevice.userAgent}`
+    );
+
+    info("Ensure touch simulation has been updated");
+    const touchSimulation = document.querySelector("#touch-simulation-button");
+    ok(
+      touchSimulation.classList.contains("checked"),
+      "Viewport touch simulation is enabled."
+    );
+
+    info(
+      "Ensure the edited device is updated in the device selector when submitted"
+    );
+    document.getElementById("device-close-button").click();
+    deviceSelector = document.getElementById("device-selector");
+
+    await testMenuItems(toolWindow, deviceSelector, menuItems => {
+      const originalDevice = findMenuItem(menuItems, device.name);
+      const editedDevice = findMenuItem(menuItems, newDevice.name);
+      ok(!originalDevice, "Original custom device menu item does not exist");
+      ok(editedDevice, "Edited Custom Device menu item exists");
+    });
+  },
+  { waitForDeviceList: true }
+);