tor-browser

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

test_model_optin.html (5054B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8" />
      5  <title>ModelOptin Tests</title>
      6  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      7  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
      8  <script type="module" src="chrome://global/content/elements/moz-button.mjs"></script>
      9  <script type="module" src="chrome://global/content/elements/moz-button-group.mjs"></script>
     10  <script type="module" src="chrome://browser/content/genai/content/model-optin.mjs"></script>
     11  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
     12  <link rel="stylesheet" href="chrome://global/skin/design-system/tokens-brand.css">
     13  <link rel="stylesheet" href="chrome://global/skin/design-system/text-and-typography.css">
     14 
     15  <script>
     16    // Utility: wait for Lit to finish rendering
     17    async function waitForUpdateComplete(element) {
     18      if (element && typeof element.updateComplete === "object") {
     19        await element.updateComplete;
     20      }
     21    }
     22 
     23    /**
     24     * Verify a ModelOptin's default state.
     25     */
     26    add_task(async function test_model_optin_default_state() {
     27      const mo = document.querySelector("#model-optin");
     28      ok(mo, "Found the ModelOptin element in the DOM.");
     29 
     30      await waitForUpdateComplete(mo);
     31 
     32      // Defaults from your constructor:
     33      is(mo.isLoading, false, "ModelOptin should not be loading by default.");
     34      is(mo.isHidden, false, "ModelOptin should be visible by default.");
     35 
     36      // If you want to confirm the <section> is not hidden in the shadow DOM:
     37      const section = mo.shadowRoot.querySelector("section.optin-wrapper");
     38      ok(section, "Found the main <section> in the shadow DOM.");
     39      ok(!section.hasAttribute("hidden"), "Section should not be hidden initially.");
     40 
     41      // Now hide it to see if it properly hides
     42      mo.isHidden = true;
     43      await waitForUpdateComplete(mo);
     44      ok(section.hasAttribute("hidden"), "Section is now hidden after setting isHidden = true.");
     45    });
     46 
     47    /**
     48     * Verify that clicking the confirm/deny buttons dispatches the correct events.
     49     */
     50     add_task(async function test_model_optin_confirm_deny() {
     51      const mo = document.querySelector("#model-optin");
     52 
     53      // Make sure it's visible and not loading
     54      mo.isHidden = false;
     55      mo.isLoading = false;
     56      await waitForUpdateComplete(mo);
     57 
     58      let eventsFired = [];
     59      function onConfirm() {
     60        eventsFired.push("MlModelOptinConfirm");
     61      }
     62      function onDeny() {
     63        eventsFired.push("MlModelOptinDeny");
     64      }
     65 
     66      mo.addEventListener("MlModelOptinConfirm", onConfirm);
     67      mo.addEventListener("MlModelOptinDeny", onDeny);
     68 
     69      // Grab the buttons by their IDs inside the component's shadow root
     70      const confirmBtn = mo.shadowRoot.querySelector("#optin-confirm-button");
     71      const denyBtn = mo.shadowRoot.querySelector("#optin-deny-button");
     72      ok(confirmBtn, "Found the confirm button with an ID");
     73      ok(denyBtn, "Found the deny button with an ID");
     74 
     75      // Synthesize a click on the confirm button
     76      synthesizeMouseAtCenter(confirmBtn, {});
     77      is(eventsFired.length, 1, "One event fired after confirm click.");
     78      is(eventsFired[0], "MlModelOptinConfirm", "Confirm event was fired.");
     79 
     80      // Synthesize a click on the deny button
     81      synthesizeMouseAtCenter(denyBtn, {});
     82      is(eventsFired.length, 2, "Second event fired after deny click.");
     83      is(eventsFired[1], "MlModelOptinDeny", "Deny event was fired.");
     84    });
     85 
     86    /**
     87     * Test loading mode: check that we see the inline <progress> bar & can cancel.
     88     */
     89    add_task(async function test_model_optin_loading_mode() {
     90      const mo = document.querySelector("#model-optin");
     91      mo.isHidden = false;
     92      mo.isLoading = true;
     93      mo.progressStatus = 30; // Show partial progress
     94      await waitForUpdateComplete(mo);
     95 
     96      // The cancel button plus a <progress> element should appear in loading mode
     97      const cancelBtn = mo.shadowRoot.querySelector("moz-button");
     98      ok(cancelBtn, "Found the cancel button in loading mode.");
     99 
    100      const progressEl = mo.shadowRoot.querySelector("progress.optin-progress-bar");
    101      ok(progressEl, "Found the inline <progress> in loading mode.");
    102      is(progressEl.getAttribute("value"), "30", "<progress> should have value='30'.");
    103 
    104      // Listen for the MlModelOptinCancelDownload event
    105      let cancelEventFired = false;
    106      mo.addEventListener("MlModelOptinCancelDownload", () => {
    107        cancelEventFired = true;
    108      });
    109 
    110      // Click the cancel button
    111      synthesizeMouseAtCenter(cancelBtn, {});
    112      is(cancelEventFired, true, "Should dispatch 'MlModelOptinCancelDownload' event on click.");
    113      is(mo.isLoading, false, "After canceling, isLoading should be false.");
    114      is(mo.progressStatus, undefined, "progressStatus is cleared after canceling.");
    115    });
    116  </script>
    117 </head>
    118 
    119 <body>
    120  <model-optin
    121    id="model-optin"
    122    class="genai-model-optin"
    123  >
    124  </model-optin>
    125 </body>
    126 </html>