diff options
Diffstat (limited to 'devtools/client/responsive/test/browser/browser_device_custom_edit.js')
-rw-r--r-- | devtools/client/responsive/test/browser/browser_device_custom_edit.js | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_device_custom_edit.js b/devtools/client/responsive/test/browser/browser_device_custom_edit.js new file mode 100644 index 0000000000..35fee3c906 --- /dev/null +++ b/devtools/client/responsive/test/browser/browser_device_custom_edit.js @@ -0,0 +1,117 @@ +/* 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 } +); |