tor-browser

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

test_nav_notice.html (3680B)

      1 <!doctype html>
      2 <html>
      3  <head>
      4    <meta charset="utf-8" />
      5    <title>nav-notice Tests</title>
      6    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      7    <link
      8      rel="stylesheet"
      9      href="chrome://mochikit/content/tests/SimpleTest/test.css"
     10    />
     11    <link rel="stylesheet" href="chrome://global/skin/global.css" />
     12    <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
     13    <script src="../../../../../toolkit/content/tests/widgets/lit-test-helpers.js"></script>
     14    <script
     15      type="module"
     16      src="chrome://browser/content/preferences/widgets/nav-notice.mjs"
     17    ></script>
     18    <script>
     19      let html, testHelpers;
     20 
     21      const TEST_LABEL = "This goes in the page nav";
     22 
     23      add_setup(async function setup() {
     24        testHelpers = new LitTestHelpers();
     25        ({ html } = await testHelpers.setupLit());
     26        testHelpers.setupTests({
     27          templateFn: () => html`<nav-notice label=${TEST_LABEL}></nav-notice>`,
     28        });
     29      });
     30 
     31      add_task(async function testNavNotice() {
     32        let {
     33          children: [navNotice],
     34        } = await testHelpers.renderTemplate();
     35 
     36        ok(navNotice, "nav-notice element renders");
     37        is(
     38          navNotice.boxEl.labelEl.textContent.trim(),
     39          TEST_LABEL,
     40          "Label text is displayed."
     41        );
     42 
     43        const TEST_ICON_SRC = "chrome://global/skin/icons/edit-copy.svg";
     44        navNotice.iconSrc = TEST_ICON_SRC;
     45        await navNotice.updateComplete;
     46 
     47        let icon = navNotice.boxEl.shadowRoot.querySelector(".icon");
     48        ok(icon, "Icon element is rendered when iconSrc is set.");
     49        is(icon.src, TEST_ICON_SRC, "Icon element uses the expected src.");
     50 
     51        const TEST_HREF = "about:blank";
     52        navNotice.href = TEST_HREF;
     53        await navNotice.updateComplete;
     54 
     55        let link = navNotice.boxEl.shadowRoot.querySelector("a");
     56        ok(link, "Nav notice renders a link when href is supplied.");
     57        is(link.href, TEST_HREF, "Link uses the expected href.");
     58 
     59        const TEST_THEME = {
     60          themeBg: "rgb(153, 37, 11)",
     61          themeFg: "rgb(255, 255, 255)",
     62        };
     63 
     64        let styles = window.getComputedStyle(navNotice.boxEl);
     65        let originalBackgroundColor = styles.backgroundColor;
     66        let originalTextColor = styles.color;
     67        isnot(
     68          originalBackgroundColor,
     69          TEST_THEME.themeBg,
     70          "Nav notice background is not themed by default."
     71        );
     72        isnot(
     73          originalTextColor,
     74          TEST_THEME.themeFg,
     75          "Nav notice text color is not themed by default."
     76        );
     77 
     78        navNotice.theme = TEST_THEME;
     79        await navNotice.updateComplete;
     80 
     81        styles = window.getComputedStyle(navNotice.boxEl);
     82        is(
     83          styles.backgroundColor,
     84          TEST_THEME.themeBg,
     85          "Nav notice background now uses the theme background color."
     86        );
     87        is(
     88          styles.color,
     89          TEST_THEME.themeFg,
     90          "Nav notice text color now uses the theme foreground color."
     91        );
     92 
     93        navNotice.theme = "";
     94        await navNotice.updateComplete;
     95 
     96        styles = window.getComputedStyle(navNotice.boxEl);
     97        is(
     98          styles.backgroundColor,
     99          originalBackgroundColor,
    100          "Nav notice background color is reset if theme is removed."
    101        );
    102        is(
    103          styles.color,
    104          originalTextColor,
    105          "Nav notice text color is reset if theme is removed."
    106        );
    107      });
    108    </script>
    109  </head>
    110  <body>
    111    <p id="display"></p>
    112    <div id="content" style="display: none"></div>
    113    <pre id="test"></pre>
    114  </body>
    115 </html>