126 lines
4.9 KiB
HTML
126 lines
4.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>ModelOptin Tests</title>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
|
|
<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>
|
|
<script type="module" src="chrome://browser/content/genai/content/model-optin.mjs"></script>
|
|
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
|
<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>
|