1 files changed, 139 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_device_custom_remove.js b/devtools/client/responsive/test/browser/browser_device_custom_remove.js
new file mode 100644
index 0000000000..8d31aed6cf
--- /dev/null
+++ b/devtools/client/responsive/test/browser/browser_device_custom_remove.js
@@ -0,0 +1,139 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding several devices and removing one to ensure the correct device is removed.
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+const device = {
+  width: 400,
+  height: 570,
+  pixelRatio: 1.5,
+  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  touch: true,
+};
+
+const device1 = Object.assign({}, device, {
+  name: "Test Device 1",
+});
+
+const device2 = Object.assign({}, device, {
+  name: "Test Device 2",
+});
+
+addRDMTask(
+  TEST_URL,
+  async function ({ ui }) {
+    const { toolWindow } = ui;
+    const { store, document } = toolWindow;
+
+    info("Verify that remove buttons affect the correct device");
+
+    const deviceSelector = document.getElementById("device-selector");
+
+    await openDeviceModal(ui);
+
+    info("Reveal device adder form");
+    let adderShow = document.querySelector("#device-add-button");
+    adderShow.click();
+
+    info("Add test device 1");
+    await addDeviceInModal(ui, device1);
+
+    info("Reveal device adder form");
+    adderShow = document.querySelector("#device-add-button");
+    adderShow.click();
+
+    info("Add test device 2");
+    await addDeviceInModal(ui, device2);
+
+    info("Verify all custom devices default to enabled in modal");
+    const deviceCbs = [
+      ...document.querySelectorAll(
+        ".device-type-custom .device-input-checkbox"
+      ),
+    ];
+    is(deviceCbs.length, 2, "Both devices have a checkbox in modal");
+    for (const cb of deviceCbs) {
+      ok(cb.checked, "Custom device enabled");
+    }
+    document.getElementById("device-close-button").click();
+
+    info("Look for device 1 and 2 in device selector");
+
+    await testMenuItems(toolWindow, deviceSelector, menuItems => {
+      const deviceItem1 = findMenuItem(menuItems, device1.name);
+      const deviceItem2 = findMenuItem(menuItems, device2.name);
+      ok(deviceItem1, "Test device 1 menu item added to device selector");
+      ok(deviceItem2, "Test device 2 menu item added to device selector");
+    });
+
+    await openDeviceModal(ui);
+
+    info("Remove device 2");
+    const deviceRemoveButtons = [
+      ...document.querySelectorAll(".device-remove-button"),
+    ];
+    is(
+      deviceRemoveButtons.length,
+      2,
+      "Both devices have a remove button in modal"
+    );
+    const removed = waitUntilState(
+      store,
+      state => state.devices.custom.length == 1
+    );
+    deviceRemoveButtons[1].click();
+    await removed;
+    document.getElementById("device-close-button").click();
+
+    info("Ensure device 2 is no longer in device selector");
+    await testMenuItems(toolWindow, deviceSelector, menuItems => {
+      const deviceItem1 = findMenuItem(menuItems, device1.name);
+      const deviceItem2 = findMenuItem(menuItems, device2.name);
+      ok(deviceItem1, "Test device 1 menu item exists");
+      ok(!deviceItem2, "Test device 2 menu item removed");
+    });
+  },
+  { waitForDeviceList: true }
+);
+
+addRDMTask(
+  TEST_URL,
+  async function ({ ui }) {
+    const { toolWindow } = ui;
+    const { document } = toolWindow;
+
+    const deviceSelector = document.getElementById("device-selector");
+
+    info("Ensure device 1 is still in device selector");
+    await testMenuItems(toolWindow, deviceSelector, menuItems => {
+      const deviceItem1 = findMenuItem(menuItems, device1.name);
+      const deviceItem2 = findMenuItem(menuItems, device2.name);
+      ok(deviceItem1, "Test device 1 menu item exists");
+      ok(!deviceItem2, "Test device 2 option removed");
+    });
+
+    await openDeviceModal(ui);
+
+    info("Ensure device 1 is still in device modal");
+    const deviceCbs = [
+      ...document.querySelectorAll(
+        ".device-type-custom .device-input-checkbox"
+      ),
+    ];
+    is(deviceCbs.length, 1, "Only 1 custom present in modal");
+    const deviceCb1 = deviceCbs.find(cb => cb.value == device1.name);
+    ok(
+      deviceCb1 && deviceCb1.checked,
+      "Test device 1 checkbox exists and enabled"
+    );
+
+    info("Ensure device 2 is no longer in device modal");
+    const deviceCb2 = deviceCbs.find(cb => cb.value == device2.name);
+    ok(!deviceCb2, "Test device 2 checkbox does not exist");
+  },
+  { waitForDeviceList: true }
+);