firefox/devtools/client/responsive/test/browser/browser_device_custom.js

/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test adding and removing custom devices via the modal.

const L10N = new LocalizationHelper(
  "devtools/client/locales/device.properties",
  true
);

const device = {
  name: "Test 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 unicodeDevice = {
  name: "\u00B6\u00C7\u00DA\u00E7\u0126",
  width: 400,
  height: 570,
  pixelRatio: 1.5,
  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
  touch: true,
};

const TEST_URL = "data:text/html;charset=utf-8,";

addRDMTask(
  TEST_URL,
  async function ({ ui }) {
    const { toolWindow } = ui;
    const { document } = toolWindow;

    await openDeviceModal(ui);

    is(
      getCustomHeaderEl(document),
      null,
      "There's no Custom header when we don't have custom devices"
    );

    info("Reveal device adder form, check that defaults match the viewport");
    const adderShow = document.getElementById("device-add-button");
    adderShow.click();
    testDeviceAdder(ui, {
      name: "Custom Device",
      width: 320,
      height: 480,
      pixelRatio: window.devicePixelRatio,
      userAgent: navigator.userAgent,
      touch: false,
    });

    info("Fill out device adder form and save");
    await addDeviceInModal(ui, device);

    info("Verify device defaults to enabled in modal");
    const deviceCb = [
      ...document.querySelectorAll(".device-input-checkbox"),
    ].find(cb => {
      return cb.value == device.name;
    });
    ok(deviceCb, "Custom device checkbox added to modal");
    ok(deviceCb.checked, "Custom device enabled");

    const customHeaderEl = getCustomHeaderEl(document);
    ok(customHeaderEl, "There's a Custom header when add a custom devices");
    is(
      customHeaderEl.textContent,
      L10N.getStr(`device.custom`),
      "The custom header has the expected text"
    );

    document.getElementById("device-close-button").click();

    info("Look for custom device in device selector");
    const deviceSelector = document.getElementById("device-selector");
    await testMenuItems(toolWindow, deviceSelector, items => {
      const menuItem = findMenuItem(items, device.name);
      ok(menuItem, "Custom device menu item added to device selector");
    });
  },
  { waitForDeviceList: true }
);

addRDMTask(
  TEST_URL,
  async function ({ ui }) {
    const { toolWindow } = ui;
    const { store, document } = toolWindow;

    info("Select existing device from the selector");
    await selectDevice(ui, "Test Device");

    await openDeviceModal(ui);

    info(
      "Reveal device adder form, check that defaults are based on selected device"
    );
    const adderShow = document.getElementById("device-add-button");
    adderShow.click();
    testDeviceAdder(
      ui,
      Object.assign({}, device, {
        name: "Test Device (Custom)",
      })
    );

    info("Remove previously added custom device");
    // Close the form since custom device buttons are only shown when form is not open.
    const cancelButton = document.getElementById("device-form-cancel");
    cancelButton.click();

    const deviceRemoveButton = document.querySelector(".device-remove-button");
    const removed = Promise.all([
      waitUntilState(store, state => !state.devices.custom.length),
      once(ui, "device-association-removed"),
    ]);
    deviceRemoveButton.click();
    await removed;

    info("Close the form before submitting.");
    document.getElementById("device-close-button").click();

    info("Ensure custom device was removed from device selector");
    await waitUntilState(store, state => state.viewports[0].device == "");
    const deviceSelectorTitle = document.querySelector("#device-selector");
    is(
      deviceSelectorTitle.textContent,
      "Responsive",
      "Device selector reset to no device"
    );

    info("Look for custom device in device selector");
    const deviceSelector = document.getElementById("device-selector");
    await testMenuItems(toolWindow, deviceSelector, menuItems => {
      const menuItem = findMenuItem(menuItems, device.name);
      ok(!menuItem, "Custom device option removed from device selector");
    });

    info("Ensure device properties like UA have been reset");
    await testUserAgent(ui, navigator.userAgent);
  },
  { waitForDeviceList: true }
);

addRDMTask(
  TEST_URL,
  async function ({ ui }) {
    const { toolWindow } = ui;
    const { document } = toolWindow;

    await openDeviceModal(ui);

    info("Reveal device adder form");
    const adderShow = document.querySelector("#device-add-button");
    adderShow.click();

    info(
      "Fill out device adder form by setting details to unicode device and save"
    );
    await addDeviceInModal(ui, unicodeDevice);

    info("Verify unicode device defaults to enabled in modal");
    const deviceCb = [
      ...document.querySelectorAll(".device-input-checkbox"),
    ].find(cb => {
      return cb.value == unicodeDevice.name;
    });
    ok(deviceCb, "Custom unicode device checkbox added to modal");
    ok(deviceCb.checked, "Custom unicode device enabled");
    document.getElementById("device-close-button").click();

    info("Look for custom unicode device in device selector");
    const deviceSelector = document.getElementById("device-selector");
    await testMenuItems(toolWindow, deviceSelector, items => {
      const menuItem = findMenuItem(items, unicodeDevice.name);
      ok(menuItem, "Custom unicode device option added to device selector");
    });
  },
  { waitForDeviceList: true }
);

addRDMTask(
  TEST_URL,
  async function ({ ui }) {
    const { toolWindow } = ui;
    const { document } = toolWindow;

    // Check if the unicode custom device is present in the list of device options since
    // we want to ensure that unicode device names are not forgotten after restarting RDM
    // see bug 1379687
    info("Look for custom unicode device in device selector");
    const deviceSelector = document.getElementById("device-selector");
    await testMenuItems(toolWindow, deviceSelector, items => {
      const menuItem = findMenuItem(items, unicodeDevice.name);
      ok(menuItem, "Custom unicode device option present in device selector");
    });
  },
  { waitForDeviceList: true }
);

function testDeviceAdder(ui, expected) {
  const { document } = ui.toolWindow;

  const nameInput = document.querySelector("#device-form-name input");
  const [widthInput, heightInput] = document.querySelectorAll(
    "#device-form-size input"
  );
  const pixelRatioInput = document.querySelector(
    "#device-form-pixel-ratio input"
  );
  const userAgentInput = document.querySelector(
    "#device-form-user-agent input"
  );
  const touchInput = document.querySelector("#device-form-touch input");

  is(nameInput.value, expected.name, "Device name matches");
  is(parseInt(widthInput.value, 10), expected.width, "Width matches");
  is(parseInt(heightInput.value, 10), expected.height, "Height matches");
  is(
    parseFloat(pixelRatioInput.value),
    expected.pixelRatio,
    "devicePixelRatio matches"
  );
  is(userAgentInput.value, expected.userAgent, "User agent matches");
  is(touchInput.checked, expected.touch, "Touch matches");
}

function getCustomHeaderEl(doc) {
  return doc.querySelector(`.device-type-custom .device-header`);
}