1 files changed, 146 insertions, 0 deletions
diff --git a/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js b/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js
new file mode 100644
index 000000000..90f364ce7
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js
@@ -0,0 +1,146 @@
+/* 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("devtools/client/shared/devices");
+
+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,";
+const Types = require("devtools/client/responsive.html/types");
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  let { store, document } = ui.toolWindow;
+  let modal = document.querySelector("#device-modal-wrapper");
+  let select = document.querySelector(".viewport-device-selector");
+  let submitButton = document.querySelector("#device-submit-button");
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+
+  openDeviceModal(ui);
+
+  info("Checking displayed device checkboxes are checked in the device modal.");
+  let checkedCbs = [...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => cb.checked);
+
+  let remoteList = yield getDevices();
+
+  let featuredCount = remoteList.TYPES.reduce((total, type) => {
+    return total + remoteList[type].reduce((subtotal, device) => {
+      return subtotal + ((device.os != "fxos" && device.featured) ? 1 : 0);
+    }, 0);
+  }, 0);
+
+  is(featuredCount, checkedCbs.length,
+    "Got expected number of displayed devices.");
+
+  for (let 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.");
+  let uncheckedCb = [...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => !cb.checked)[0];
+  let value = uncheckedCb.value;
+  uncheckedCb.click();
+  submitButton.click();
+
+  ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
+    "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.");
+  let options = [...select.options];
+  is(options.length - 2, featuredCount + 1,
+    "Got expected number of devices in device selector.");
+  ok(options.filter(o => o.value === value)[0],
+    value + " added to the device selector.");
+
+  info("Reopen device modal and check new device is correctly checked");
+  openDeviceModal(ui);
+  ok([...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => cb.checked && cb.value === value)[0],
+    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");
+  let checkedCb = [...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => cb.checked && cb.value != value)[0];
+  let checkedVal = checkedCb.value;
+  checkedCb.click();
+  submitButton.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.");
+  options = [...select.options];
+  is(options.length - 2, featuredCount,
+    "Got expected number of devices in device selector.");
+  ok(!options.filter(o => o.value === checkedVal)[0],
+    checkedVal + " removed from the device selector.");
+
+  info("Reopen device modal and check device is correctly unchecked");
+  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);
+});
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  let { store, document } = ui.toolWindow;
+  let select = document.querySelector(".viewport-device-selector");
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+
+  openDeviceModal(ui);
+
+  let remoteList = yield getDevices();
+  let featuredCount = remoteList.TYPES.reduce((total, type) => {
+    return total + remoteList[type].reduce((subtotal, device) => {
+      return subtotal + ((device.os != "fxos" && device.featured) ? 1 : 0);
+    }, 0);
+  }, 0);
+  let 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.");
+  let options = [...select.options];
+  is(options.length - 2, featuredCount
+    - preferredDevices.removed.size + preferredDevices.added.size,
+    "Got expected number of devices in device selector.");
+
+  ok(options.filter(o => o.value === addedDevice.name)[0],
+    "dummy device added to the device selector.");
+
+  ok(options.filter(o => preferredDevices.added.has(o.value))[0],
+    "device added by user still in the device selector.");
+
+  ok(!options.filter(o => preferredDevices.removed.has(o.value))[0],
+    "device removed by user not in the device selector.");
+});