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>