diff options
Diffstat (limited to 'browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html')
-rw-r--r-- | browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html b/browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html new file mode 100644 index 0000000000..ce6046bf2a --- /dev/null +++ b/browser/components/aboutlogins/tests/chrome/test_fxaccounts_button.html @@ -0,0 +1,96 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test the fxaccounts-button component +--> +<head> + <meta charset="utf-8"> + <title>Test the fxaccounts-button component</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://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> |