browser_device_custom_edit.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that adding a device, submitting it, and then editing it updates the device's

// original values when it is saved.

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

const device = {

  name: "Original Custom Device",

  width: 320,

  height: 480,

  pixelRatio: 1,

  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",

  touch: false,

};

const newDevice = {

  name: "Edited Custom Device",

  width: 300,

  height: 900,

  pixelRatio: 4,

  userAgent: "Different User agent",

  touch: true,

};

addRDMTask(

  TEST_URL,

  async function ({ ui }) {

    const { toolWindow } = ui;

    const { document } = toolWindow;

    await openDeviceModal(ui);

    info("Add device.");

    const adderShow = document.querySelector("#device-add-button");

    adderShow.click();

    await addDeviceInModal(ui, device);

    info("Submit the added device.");

    let deviceSelector = document.getElementById("device-selector");

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

    await testMenuItems(toolWindow, deviceSelector, menuItems => {

      const originalDevice = findMenuItem(menuItems, device.name);

      ok(originalDevice, "Original custom device menu item exists.");

});

    info("Select the added device in menu.");

    await selectDevice(ui, "Custom Device");

    await openDeviceModal(ui);

    info("Edit the device.");

    const editorShow = document.querySelector(

      ".device-type-custom #device-edit-button"

);

    editorShow.click();

    await editDeviceInModal(ui, device, newDevice);

    info("Ensure the edited device name is updated in the custom device list.");

    const customDevicesList = document.querySelector(".device-type-custom");

    const editedCustomDevice = customDevicesList.querySelector(".device-name");

is(

      editedCustomDevice.textContent,

      newDevice.name,

      `${device.name} is updated to ${newDevice.name} in the custom device list`

);

    info("Ensure the viewport width and height are updated in the toolbar.");

    const [width, height] = document.querySelectorAll(

      ".text-input.viewport-dimension-input"

);

    is(width.value, "300", "Viewport width is 300");

    is(height.value, "900", "Viewport height is 900");

    info("Ensure the pixel ratio is updated in the toolbar.");

    const devicePixelRatioSpan = document.querySelector(

      "#device-pixel-ratio-menu span"

);

is(

      devicePixelRatioSpan.textContent,

      "DPR: 4",

      "Viewport pixel ratio is 4."

);

    info("Ensure the user agent has been updated.");

    const userAgentInput = document.querySelector("#user-agent-input");

is(

      userAgentInput.value,

      newDevice.userAgent,

      `Viewport user agent is ${newDevice.userAgent}`

);

    info("Ensure touch simulation has been updated");

    const touchSimulation = document.querySelector("#touch-simulation-button");

ok(

      touchSimulation.classList.contains("checked"),

      "Viewport touch simulation is enabled."

);

    info(

      "Ensure the edited device is updated in the device selector when submitted"

);

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

    deviceSelector = document.getElementById("device-selector");

    await testMenuItems(toolWindow, deviceSelector, menuItems => {

      const originalDevice = findMenuItem(menuItems, device.name);

      const editedDevice = findMenuItem(menuItems, newDevice.name);

      ok(!originalDevice, "Original custom device menu item does not exist");

      ok(editedDevice, "Edited Custom Device menu item exists");

});

},

  { waitForDeviceList: true }

);