Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!DOCTYPE HTML>
<html>
<!--
Test the fxaccounts-button component
-->
<head>
<meta charset="utf-8">
<title>Test the fxaccounts-button component</title>
<script type="module" src="chrome://browser/content/aboutlogins/components/fxaccounts-button.mjs"></script>
<script src="aboutlogins_common.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display">
</p>
<div id="content" style="display: none">
<iframe id="templateFrame" src="chrome://browser/content/aboutlogins/aboutLogins.html"
sandbox="allow-same-origin"></iframe>
</div>
<pre id="test">
</pre>
<script>
/** Test the fxaccounts-button component **/
const TEST_AVATAR_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let gFxAccountsButton;
add_setup(async () => {
let templateFrame = document.getElementById("templateFrame");
let displayEl = document.getElementById("display");
await importDependencies(templateFrame, displayEl);
gFxAccountsButton = document.createElement("fxaccounts-button");
displayEl.appendChild(gFxAccountsButton);
});
add_task(async function test_default_state() {
ok(gFxAccountsButton, "FxAccountsButton exists");
ok(!isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-out-view")),
"logged-out-view view is visible by default");
ok(isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-in-view")),
"logged-in-view view is hidden by default");
});
add_task(async function test_logged_in_without_login_syncing() {
gFxAccountsButton.updateState({
fxAccountsEnabled: true,
loggedIn: true,
loginSyncingEnabled: false,
});
ok(isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-out-view")),
"logged-out-view view is hidden");
ok(!isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-in-view")),
"logged-in-view view is visible");
});
add_task(async function test_logged_in_with_login_syncing() {
const TEST_EMAIL = "test@example.com";
gFxAccountsButton.updateState({
fxAccountsEnabled: true,
loggedIn: true,
loginSyncingEnabled: true,
email: TEST_EMAIL,
avatarURL: TEST_AVATAR_URL,
});
ok(isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-out-view")),
"logged-out-view view is hidden");
ok(!isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-in-view")),
"logged-in-view view is visible");
is(gFxAccountsButton.shadowRoot.querySelector(".fxaccount-email").textContent,
TEST_EMAIL,
"email should be shown");
is(gFxAccountsButton.shadowRoot.querySelector(".fxaccounts-avatar-button").style.getPropertyValue("--avatar-url"),
`url(${TEST_AVATAR_URL})`,
"--avatar-url should be set");
});
add_task(async function test_fxaccounts_disabled() {
gFxAccountsButton.updateState({
fxAccountsEnabled: false,
});
ok(isHidden(gFxAccountsButton),
"the whole button is hidden when fxaccounts are disabled");
});
</script>
</body>
</html>