From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../test/browser/browser_device_modal_submit.js | 203 +++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 devtools/client/responsive/test/browser/browser_device_modal_submit.js (limited to 'devtools/client/responsive/test/browser/browser_device_modal_submit.js') diff --git a/devtools/client/responsive/test/browser/browser_device_modal_submit.js b/devtools/client/responsive/test/browser/browser_device_modal_submit.js new file mode 100644 index 0000000000..45cf23e10e --- /dev/null +++ b/devtools/client/responsive/test/browser/browser_device_modal_submit.js @@ -0,0 +1,203 @@ +/* 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("resource://devtools/client/shared/devices.js"); + +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; +} -- cgit v1.2.3