tor-browser

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

test_setting_control_controlAttrs.html (3438B)

      1 <!doctype html>
      2 <html>
      3  <head>
      4    <meta charset="utf-8" />
      5    <title>setting-control controlAttrs 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/setting-group.mjs"
     17    ></script>
     18    <script
     19      type="module"
     20      src="chrome://browser/content/preferences/widgets/setting-control.mjs"
     21    ></script>
     22    <script
     23      type="module"
     24      src="chrome://global/content/elements/moz-message-bar.mjs"
     25    ></script>
     26    <script
     27      type="application/javascript"
     28      src="chrome://global/content/preferencesBindings.js"
     29    ></script>
     30    <script>
     31      const { Assert } = ChromeUtils.importESModule(
     32        "resource://testing-common/Assert.sys.mjs"
     33      );
     34      /* import-globals-from /toolkit/content/preferencesBindings.js */
     35      let html, testHelpers;
     36 
     37      async function renderTemplate(itemConfig) {
     38        let config = {
     39          items: [itemConfig],
     40        };
     41        let result = await testHelpers.renderTemplate(html`
     42          <setting-group
     43            .config=${config}
     44            .getSetting=${(...args) => Preferences.getSetting(...args)}
     45          ></setting-group>
     46        `);
     47        await result.firstElementChild.updateComplete;
     48        if (document.hasPendingL10nMutations) {
     49          await BrowserTestUtils.waitForEvent(
     50            document,
     51            "L10nMutationsFinished"
     52          );
     53        }
     54        return result.querySelector("setting-control");
     55      }
     56 
     57      add_setup(async function setup() {
     58        testHelpers = new InputTestHelpers();
     59        ({ html } = await testHelpers.setupLit());
     60        testHelpers.setupTests({
     61          templateFn: () => html`<setting-group></setting-group>`,
     62        });
     63        MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
     64        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
     65      });
     66 
     67      add_task(async function testConfigBasedControlWithControlAttrs() {
     68        const SETTING = "setting-control-message-bar";
     69 
     70        Preferences.addSetting({
     71          id: SETTING,
     72        });
     73 
     74        let itemConfig = {
     75          control: "moz-message-bar",
     76          l10nId: "preferences-text-zoom-override-warning",
     77          id: SETTING,
     78        };
     79        let setting = Preferences.getSetting(SETTING);
     80        let control = await renderTemplate(itemConfig, setting);
     81 
     82        is(
     83          control.controlEl.localName,
     84          "moz-message-bar",
     85          "The control rendered a message bar"
     86        );
     87        is(control.controlEl.type, "info", "Message bar has the default type");
     88 
     89        itemConfig.controlAttrs = {
     90          type: "warning",
     91        };
     92        control = await renderTemplate(itemConfig, setting);
     93 
     94        is(
     95          control.controlEl.type,
     96          "warning",
     97          "Message bar has type warning after config changes"
     98        );
     99      });
    100    </script>
    101  </head>
    102  <body>
    103    <p id="display"></p>
    104    <div id="content" style="display: none"></div>
    105    <pre id="test"></pre>
    106  </body>
    107 </html>