tor-browser

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

browser_device_modal_items.js (2988B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test the content of device items in the modal.
      7 
      8 const TEST_URL = "data:text/html;charset=utf-8,";
      9 const {
     10  parseUserAgent,
     11 } = require("resource://devtools/client/responsive/utils/ua.js");
     12 
     13 const L10N = new LocalizationHelper(
     14  "devtools/client/locales/device.properties",
     15  true
     16 );
     17 addRDMTask(
     18  TEST_URL,
     19  async function ({ ui }) {
     20    const { toolWindow } = ui;
     21    const { store, document } = toolWindow;
     22 
     23    await openDeviceModal(ui);
     24 
     25    const { devices } = store.getState();
     26 
     27    ok(devices.types.length, "We have some device types");
     28 
     29    for (const type of devices.types) {
     30      const list = devices[type];
     31 
     32      const header = document.querySelector(
     33        `.device-type-${type} .device-header`
     34      );
     35 
     36      if (type == "custom") {
     37        // we don't have custom devices, so there shouldn't be a header for it.
     38        is(list.length, 0, `We don't have any custom devices`);
     39        ok(!header, `There's no header for "custom"`);
     40        continue;
     41      }
     42 
     43      ok(list.length, `We have ${type} devices`);
     44      ok(header, `There's a header for ${type} devices`);
     45 
     46      is(
     47        header?.textContent,
     48        L10N.getStr(`device.${type}`),
     49        `Got expected text for ${type} header`
     50      );
     51 
     52      for (const item of list) {
     53        info(`Check the element for ${item.name} on the modal`);
     54 
     55        const targetEl = findDeviceLabel(item.name, document);
     56        ok(targetEl, "The element for the device is on the modal");
     57 
     58        const { browser, os } = parseUserAgent(item.userAgent);
     59        const browserEl = targetEl.querySelector(".device-browser");
     60        if (browser) {
     61          ok(browserEl, "The element for the browser is in the device element");
     62          const expectedClassName = browser.name.toLowerCase();
     63          ok(
     64            browserEl.classList.contains(expectedClassName),
     65            `The browser element contains .${expectedClassName}`
     66          );
     67        } else {
     68          ok(
     69            !browserEl,
     70            "The element for the browser is not in the device element"
     71          );
     72        }
     73 
     74        const osEl = targetEl.querySelector(".device-os");
     75        if (os) {
     76          ok(osEl, "The element for the os is in the device element");
     77          const expectedText = os.version
     78            ? `${os.name} ${os.version}`
     79            : os.name;
     80          is(
     81            osEl.textContent,
     82            expectedText,
     83            "The text in os element is correct"
     84          );
     85        } else {
     86          ok(!osEl, "The element for the os is not in the device element");
     87        }
     88      }
     89    }
     90  },
     91  { waitForDeviceList: true }
     92 );
     93 
     94 function findDeviceLabel(deviceName, document) {
     95  const deviceNameEls = document.querySelectorAll(".device-name");
     96  const targetEl = [...deviceNameEls].find(el => el.textContent === deviceName);
     97  return targetEl ? targetEl.closest(".device-label") : null;
     98 }