browser/components/aboutlogins/tests/mochitest/test_login_list.html
author pulselistener
Sat, 18 May 2019 06:45:56 +0000
changeset 2008542 994841e86062161c5febae65f45e7b740e8be01a
parent 2000052 22be0302af4d107d45d7715def74909b2a0a7377
child 2040068 b20abd0505727b1549c7de9617d43a99bab8bcc3
permissions -rw-r--r--
Bug 1551696 - Remove type=text/css from style references since its not necessary. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D31283 Differential Diff: PHID-DIFF-3d7rkdeopnklz57y6l2b

<!DOCTYPE HTML>
<html>
<!--
Test the login-list component
-->
<head>
  <meta charset="utf-8">
  <title>Test the login-list component</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="reflected-fluent-element.js"></script>
  <script src="login-list-item.js"></script>
  <script src="login-list.js"></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="aboutLogins.html"
          sandbox="allow-same-origin"></iframe>
</div>
<pre id="test">
</pre>
<script>
/** Test the login-list component **/

let gLoginList;
const TEST_LOGIN_1 = {
  guid: "123456789",
  hostname: "https://example.com",
  username: "user1",
  password: "pass1",
};
const TEST_LOGIN_2 = {
  guid: "987654321",
  hostname: "https://example.com",
  username: "user2",
  password: "pass2",
};

add_task(async function setup() {
  stubFluentL10n({
    "count": "count",
  });

  let templateFrame = document.getElementById("templateFrame");
  let displayEl = document.getElementById("display");
  importDependencies(templateFrame, displayEl);

  gLoginList = document.createElement("login-list");
  displayEl.appendChild(gLoginList);
});

add_task(async function test_empty_list() {
  ok(gLoginList, "loginList exists");
  is(gLoginList.textContent, "", "Initially empty");
});

add_task(async function test_populated_list() {
  gLoginList.setLogins([TEST_LOGIN_1, TEST_LOGIN_2]);
  await asyncElementRendered();
  let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
  is(loginListItems.length, 2, "Both logins should be displayed");
  is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item should have correct guid attribute");
  is(loginListItems[0].shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname,
     "login-list-item hostname should match");
  is(loginListItems[0].shadowRoot.querySelector(".username").textContent, TEST_LOGIN_1.username,
     "login-list-item username should match");

  ok(!loginListItems[0].classList.contains("selected"), "The first item should not be selected by default");
  ok(!loginListItems[1].classList.contains("selected"), "The second item should not be selected by default");
  loginListItems[0].click();
  ok(loginListItems[0].classList.contains("selected"), "The first item should be selected");
  ok(!loginListItems[1].classList.contains("selected"), "The second item should still not be selected");
});

add_task(async function test_filtered_list() {
  is(gLoginList.shadowRoot.querySelectorAll("login-list-item:not([hidden])").length, 2, "Both logins should be visible");
  let countSpan = gLoginList.shadowRoot.querySelector(".count");
  is(countSpan.textContent, "2", "Count should match full list length");
  window.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
    bubbles: true,
    composed: true,
    detail: "user1",
  }));
  is(countSpan.textContent, "1", "Count should match result amount");
  let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
  is(loginListItems[0].shadowRoot.querySelector(".username").textContent, "user1", "user1 is expected first");
  ok(!loginListItems[0].hidden, "user1 should remain visible");
  ok(loginListItems[1].hidden, "user2 should be hidden");
  window.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
    bubbles: true,
    composed: true,
    detail: "user2",
  }));
  is(countSpan.textContent, "1", "Count should match result amount");
  ok(loginListItems[0].hidden, "user1 should be hidden");
  ok(!loginListItems[1].hidden, "user2 should be visible");
  window.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
    bubbles: true,
    composed: true,
    detail: "user",
  }));
  is(countSpan.textContent, "2", "Count should match result amount");
  ok(!loginListItems[0].hidden, "user1 should be visible");
  ok(!loginListItems[1].hidden, "user2 should be visible");
  window.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
    bubbles: true,
    composed: true,
    detail: "foo",
  }));
  is(countSpan.textContent, "0", "Count should match result amount");
  ok(loginListItems[0].hidden, "user1 should be hidden");
  ok(loginListItems[1].hidden, "user2 should be hidden");
  window.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
    bubbles: true,
    composed: true,
    detail: "",
  }));
  is(countSpan.textContent, "2", "Count should be reset to full list length");
  ok(!loginListItems[0].hidden, "user1 should be visible");
  ok(!loginListItems[1].hidden, "user2 should be visible");
});

add_task(async function test_login_modified() {
  let modifiedLogin = Object.assign(TEST_LOGIN_1, {username: "user11"});
  gLoginList.loginModified(modifiedLogin);
  await asyncElementRendered();
  let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
  is(loginListItems.length, 2, "Both logins should be displayed");
  is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item should have correct guid attribute");
  is(loginListItems[0].shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname,
     "login-list-item hostname should match");
  is(loginListItems[0].shadowRoot.querySelector(".username").textContent, modifiedLogin.username,
     "login-list-item username should have been updated");
  is(loginListItems[1].shadowRoot.querySelector(".username").textContent, TEST_LOGIN_2.username,
     "login-list-item2 username should remain unchanged");
});

add_task(async function test_login_added() {
  let newLogin = Object.assign({}, TEST_LOGIN_1, {username: "user22", guid: "111222"});
  gLoginList.loginAdded(newLogin);
  await asyncElementRendered();
  let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
  is(loginListItems.length, 3, "New login should be added to the list");
  is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item1 should have correct guid attribute");
  is(loginListItems[1].getAttribute("guid"), TEST_LOGIN_2.guid, "login-list-item2 should have correct guid attribute");
  is(loginListItems[2].getAttribute("guid"), newLogin.guid, "login-list-item3 should have correct guid attribute");
  is(loginListItems[2].shadowRoot.querySelector(".hostname").textContent, newLogin.hostname,
     "login-list-item hostname should match");
  is(loginListItems[2].shadowRoot.querySelector(".username").textContent, newLogin.username,
     "login-list-item username should have been updated");
});

add_task(async function test_login_removed() {
  gLoginList.loginRemoved({guid: "111222"});
  await asyncElementRendered();
  let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
  is(loginListItems.length, 2, "New login should be removed from the list");
  is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item1 should have correct guid attribute");
  is(loginListItems[1].getAttribute("guid"), TEST_LOGIN_2.guid, "login-list-item2 should have correct guid attribute");
});
</script>

</body>
</html>