fune/devtools/client/responsive/test/browser/browser_device_modal_submit.js

/* 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,";

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;
}