tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_device_custom_edit.js (3736B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that adding a device, submitting it, and then editing it updates the device's
      7 // original values when it is saved.
      8 
      9 const TEST_URL = "data:text/html;charset=utf-8,";
     10 
     11 const device = {
     12  name: "Original Custom Device",
     13  width: 320,
     14  height: 480,
     15  pixelRatio: 1,
     16  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
     17  touch: false,
     18 };
     19 
     20 const newDevice = {
     21  name: "Edited Custom Device",
     22  width: 300,
     23  height: 900,
     24  pixelRatio: 4,
     25  userAgent: "Different User agent",
     26  touch: true,
     27 };
     28 
     29 addRDMTask(
     30  TEST_URL,
     31  async function ({ ui }) {
     32    const { toolWindow } = ui;
     33    const { document } = toolWindow;
     34 
     35    await openDeviceModal(ui);
     36 
     37    info("Add device.");
     38    const adderShow = document.querySelector("#device-add-button");
     39    adderShow.click();
     40    await addDeviceInModal(ui, device);
     41 
     42    info("Submit the added device.");
     43    let deviceSelector = document.getElementById("device-selector");
     44    document.getElementById("device-close-button").click();
     45 
     46    await testMenuItems(toolWindow, deviceSelector, menuItems => {
     47      const originalDevice = findMenuItem(menuItems, device.name);
     48      ok(originalDevice, "Original custom device menu item exists.");
     49    });
     50 
     51    info("Select the added device in menu.");
     52    await selectDevice(ui, "Custom Device");
     53    await openDeviceModal(ui);
     54 
     55    info("Edit the device.");
     56    const editorShow = document.querySelector(
     57      ".device-type-custom #device-edit-button"
     58    );
     59    editorShow.click();
     60    await editDeviceInModal(ui, device, newDevice);
     61 
     62    info("Ensure the edited device name is updated in the custom device list.");
     63    const customDevicesList = document.querySelector(".device-type-custom");
     64    const editedCustomDevice = customDevicesList.querySelector(".device-name");
     65    is(
     66      editedCustomDevice.textContent,
     67      newDevice.name,
     68      `${device.name} is updated to ${newDevice.name} in the custom device list`
     69    );
     70 
     71    info("Ensure the viewport width and height are updated in the toolbar.");
     72    const [width, height] = document.querySelectorAll(
     73      ".text-input.viewport-dimension-input"
     74    );
     75    is(width.value, "300", "Viewport width is 300");
     76    is(height.value, "900", "Viewport height is 900");
     77 
     78    info("Ensure the pixel ratio is updated in the toolbar.");
     79    const devicePixelRatioSpan = document.querySelector(
     80      "#device-pixel-ratio-menu span"
     81    );
     82    is(
     83      devicePixelRatioSpan.textContent,
     84      "DPR: 4",
     85      "Viewport pixel ratio is 4."
     86    );
     87 
     88    info("Ensure the user agent has been updated.");
     89    const userAgentInput = document.querySelector("#user-agent-input");
     90    is(
     91      userAgentInput.value,
     92      newDevice.userAgent,
     93      `Viewport user agent is ${newDevice.userAgent}`
     94    );
     95 
     96    info("Ensure touch simulation has been updated");
     97    const touchSimulation = document.querySelector("#touch-simulation-button");
     98    ok(
     99      touchSimulation.classList.contains("checked"),
    100      "Viewport touch simulation is enabled."
    101    );
    102 
    103    info(
    104      "Ensure the edited device is updated in the device selector when submitted"
    105    );
    106    document.getElementById("device-close-button").click();
    107    deviceSelector = document.getElementById("device-selector");
    108 
    109    await testMenuItems(toolWindow, deviceSelector, menuItems => {
    110      const originalDevice = findMenuItem(menuItems, device.name);
    111      const editedDevice = findMenuItem(menuItems, newDevice.name);
    112      ok(!originalDevice, "Original custom device menu item does not exist");
    113      ok(editedDevice, "Edited Custom Device menu item exists");
    114    });
    115  },
    116  { waitForDeviceList: true }
    117 );