1 files changed, 203 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_device_modal_submit.js b/devtools/client/responsive/test/browser/browser_device_modal_submit.js
new file mode 100644
index 0000000000..45cf23e10e
--- /dev/null
+++ b/devtools/client/responsive/test/browser/browser_device_modal_submit.js
@@ -0,0 +1,203 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test submitting display device changes on the device modal
+const { getDevices } = require("resource://devtools/client/shared/devices.js");
+
+const addedDevice = {
+  name: "Fake Phone RDM Test",
+  width: 320,
+  height: 570,
+  pixelRatio: 1.5,
+  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  touch: true,
+  firefoxOS: false,
+  os: "custom",
+  featured: true,
+};
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+addRDMTask(
+  TEST_URL,
+  async function ({ ui }) {
+    const { toolWindow } = ui;
+    const { document, store } = toolWindow;
+    const deviceSelector = document.getElementById("device-selector");
+
+    await openDeviceModal(ui);
+
+    info(
+      "Checking displayed device checkboxes are checked in the device modal."
+    );
+    const checkedCbs = document.querySelectorAll(
+      ".device-input-checkbox:checked"
+    );
+    const remoteList = await getDevices();
+
+    const featuredCount = getNumberOfFeaturedDevices(remoteList);
+    is(
+      featuredCount,
+      checkedCbs.length,
+      "Got expected number of displayed devices."
+    );
+
+    for (const cb of checkedCbs) {
+      ok(
+        Object.keys(remoteList).filter(type => remoteList[type][cb.value]),
+        cb.value + " is correctly checked."
+      );
+    }
+
+    // Tests where the user adds a non-featured device
+    info("Check the first unchecked device and submit new device list.");
+    const uncheckedCb = document.querySelector(
+      ".device-input-checkbox:not(:checked)"
+    );
+    const value = uncheckedCb.value;
+    uncheckedCb.click();
+    document.getElementById("device-close-button").click();
+
+    ok(
+      !store.getState().devices.isModalOpen,
+      "The device modal is closed on submit."
+    );
+
+    info("Checking that the new device is added to the user preference list.");
+    let preferredDevices = _loadPreferredDevices();
+    ok(preferredDevices.added.has(value), value + " in user added list.");
+
+    info("Checking new device is added to the device selector.");
+    await testMenuItems(toolWindow, deviceSelector, menuItems => {
+      is(
+        menuItems.length - 1,
+        featuredCount + 1,
+        "Got expected number of devices in device selector."
+      );
+
+      const menuItem = findMenuItem(menuItems, value);
+      ok(menuItem, value + " added to the device selector.");
+    });
+
+    info("Reopen device modal and check new device is correctly checked");
+    await openDeviceModal(ui);
+
+    const previouslyClickedCb = [
+      ...document.querySelectorAll(".device-input-checkbox"),
+    ].find(cb => cb.value === value);
+    ok(previouslyClickedCb.checked, value + " is checked in the device modal.");
+
+    // Tests where the user removes a featured device
+    info("Uncheck the first checked device different than the previous one");
+    const checkboxes = [...document.querySelectorAll(".device-input-checkbox")];
+    const checkedCb = checkboxes.find(cb => {
+      if (!cb.checked || cb.value == value) {
+        return false;
+      }
+      // In the list, we have devices with similar names (e.g. "Galaxy Note 20" and "Galaxy Note 20 Ultra")
+      // Given how some test helpers are using `includes` to check device names, we might
+      // get positive result for "Galaxy Note 20" although it would actually match "Galaxy Note 20 Ultra".
+      // To prevent such issue without modifying existing helpers, we're excluding any
+      // item whose name is part of another device.
+      return !checkboxes.some(
+        innerCb =>
+          innerCb.value !== cb.value && innerCb.value.includes(cb.value)
+      );
+    });
+    const checkedVal = checkedCb.value;
+    checkedCb.click();
+    document.getElementById("device-close-button").click();
+
+    info("Checking that the device is removed from the user preference list.");
+    preferredDevices = _loadPreferredDevices();
+    ok(
+      preferredDevices.removed.has(checkedVal),
+      checkedVal + " in removed list"
+    );
+
+    info("Checking that the device is not in the device selector.");
+    await testMenuItems(toolWindow, deviceSelector, menuItems => {
+      is(
+        menuItems.length - 1,
+        featuredCount,
+        "Got expected number of devices in device selector."
+      );
+
+      const menuItem = findMenuItem(menuItems, checkedVal);
+      ok(!menuItem, checkedVal + " removed from the device selector.");
+    });
+
+    info("Reopen device modal and check device is correctly unchecked");
+    await openDeviceModal(ui);
+    ok(
+      [...document.querySelectorAll(".device-input-checkbox")].filter(
+        cb => !cb.checked && cb.value === checkedVal
+      )[0],
+      checkedVal + " is unchecked in the device modal."
+    );
+
+    // Let's add a dummy device to simulate featured flag changes for next test
+    addDeviceForTest(addedDevice);
+  },
+  { waitForDeviceList: true }
+);
+
+addRDMTask(
+  TEST_URL,
+  async function ({ ui }) {
+    const { toolWindow } = ui;
+    const { document } = toolWindow;
+
+    await openDeviceModal(ui);
+
+    const remoteList = await getDevices();
+    const featuredCount = getNumberOfFeaturedDevices(remoteList);
+    const preferredDevices = _loadPreferredDevices();
+
+    // Tests to prove that reloading the RDM didn't break our device list
+    info("Checking new featured device appears in the device selector.");
+    const deviceSelector = document.getElementById("device-selector");
+    await testMenuItems(toolWindow, deviceSelector, items => {
+      is(
+        items.length - 1,
+        featuredCount -
+          preferredDevices.removed.size +
+          preferredDevices.added.size,
+        "Got expected number of devices in device selector."
+      );
+
+      const added = findMenuItem(items, addedDevice.name);
+      ok(added, "Dummy device added to the device selector.");
+
+      for (const name of preferredDevices.added.keys()) {
+        const menuItem = findMenuItem(items, name);
+        ok(menuItem, "Device added by user still in the device selector.");
+      }
+
+      for (const name of preferredDevices.removed.keys()) {
+        const menuItem = findMenuItem(items, name);
+        ok(!menuItem, "Device removed by user not in the device selector.");
+      }
+    });
+  },
+  { waitForDeviceList: true }
+);
+
+/**
+ * Returns the number of featured devices
+ *
+ * @param {Map} devicesByType: Map of devices, keyed by type (as returned by getDevices)
+ * @returns {Integer}
+ */
+function getNumberOfFeaturedDevices(devicesByType) {
+  let count = 0;
+  const devices = [...devicesByType.values()].flat();
+  for (const device of devices) {
+    if (device.featured && device.os != "fxos") {
+      count++;
+    }
+  }
+  return count;
+}