forked from mirrors/gecko-dev
117 lines
3.6 KiB
JavaScript
117 lines
3.6 KiB
JavaScript
/* 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 }
|
|
);
|