Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>ModelOptin Tests</title>
<script type="module" src="chrome://global/content/elements/moz-button.mjs"></script>
<script type="module" src="chrome://global/content/elements/moz-button-group.mjs"></script>
<link rel="stylesheet" href="chrome://global/skin/design-system/tokens-brand.css">
<link rel="stylesheet" href="chrome://global/skin/design-system/text-and-typography.css">
<script>
// Utility: wait for Lit to finish rendering
async function waitForUpdateComplete(element) {
if (element && typeof element.updateComplete === "object") {
await element.updateComplete;
}
}
/**
* Verify a ModelOptin's default state.
*/
add_task(async function test_model_optin_default_state() {
const mo = document.querySelector("#model-optin");
ok(mo, "Found the ModelOptin element in the DOM.");
await waitForUpdateComplete(mo);
// Defaults from your constructor:
is(mo.isLoading, false, "ModelOptin should not be loading by default.");
is(mo.isHidden, false, "ModelOptin should be visible by default.");
// If you want to confirm the <section> is not hidden in the shadow DOM:
const section = mo.shadowRoot.querySelector("section.optin-wrapper");
ok(section, "Found the main <section> in the shadow DOM.");
ok(!section.hasAttribute("hidden"), "Section should not be hidden initially.");
// Now hide it to see if it properly hides
mo.isHidden = true;
await waitForUpdateComplete(mo);
ok(section.hasAttribute("hidden"), "Section is now hidden after setting isHidden = true.");
});
/**
* Verify that clicking the confirm/deny buttons dispatches the correct events.
*/
add_task(async function test_model_optin_confirm_deny() {
const mo = document.querySelector("#model-optin");
// Make sure it's visible and not loading
mo.isHidden = false;
mo.isLoading = false;
await waitForUpdateComplete(mo);
let eventsFired = [];
function onConfirm() {
eventsFired.push("MlModelOptinConfirm");
}
function onDeny() {
eventsFired.push("MlModelOptinDeny");
}
mo.addEventListener("MlModelOptinConfirm", onConfirm);
mo.addEventListener("MlModelOptinDeny", onDeny);
// Grab the buttons by their IDs inside the component's shadow root
const confirmBtn = mo.shadowRoot.querySelector("#optin-confirm-button");
const denyBtn = mo.shadowRoot.querySelector("#optin-deny-button");
ok(confirmBtn, "Found the confirm button with an ID");
ok(denyBtn, "Found the deny button with an ID");
// Synthesize a click on the confirm button
synthesizeMouseAtCenter(confirmBtn, {});
is(eventsFired.length, 1, "One event fired after confirm click.");
is(eventsFired[0], "MlModelOptinConfirm", "Confirm event was fired.");
// Synthesize a click on the deny button
synthesizeMouseAtCenter(denyBtn, {});
is(eventsFired.length, 2, "Second event fired after deny click.");
is(eventsFired[1], "MlModelOptinDeny", "Deny event was fired.");
});
/**
* Test loading mode: check that we see the inline <progress> bar & can cancel.
*/
add_task(async function test_model_optin_loading_mode() {
const mo = document.querySelector("#model-optin");
mo.isHidden = false;
mo.isLoading = true;
mo.progressStatus = 30; // Show partial progress
await waitForUpdateComplete(mo);
// The cancel button plus a <progress> element should appear in loading mode
const cancelBtn = mo.shadowRoot.querySelector("moz-button");
ok(cancelBtn, "Found the cancel button in loading mode.");
const progressEl = mo.shadowRoot.querySelector("progress.optin-progress-bar");
ok(progressEl, "Found the inline <progress> in loading mode.");
is(progressEl.getAttribute("value"), "30", "<progress> should have value='30'.");
// Listen for the MlModelOptinCancelDownload event
let cancelEventFired = false;
mo.addEventListener("MlModelOptinCancelDownload", () => {
cancelEventFired = true;
});
// Click the cancel button
synthesizeMouseAtCenter(cancelBtn, {});
is(cancelEventFired, true, "Should dispatch 'MlModelOptinCancelDownload' event on click.");
is(mo.isLoading, false, "After canceling, isLoading should be false.");
is(mo.progressStatus, undefined, "progressStatus is cleared after canceling.");
});
</script>
</head>
<body>
<model-optin
id="model-optin"
class="genai-model-optin"
>
</model-optin>
</body>
</html>