browser/components/aboutlogins/tests/mochitest/test_login_list.html
author Jared Wein <jwein@mozilla.com>
Fri, 10 May 2019 18:32:06 +0000
changeset 535362 7e08cf4753a79d765acc9721c65104c229a3f5fd
parent 535361 452720b78ca75587668030394cfcb806aa48cbda
child 535368 54f367c785cbd4cf3ccb3f4d1478aea7c636d6cb
permissions -rw-r--r--
Bug 1549803 - Move the handling of the selected login list item to the login list. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D30679

<!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="login-list-item.js"></script>
  <script src="login-list.js"></script>
  <script src="aboutlogins_common.js"></script>

  <link rel="stylesheet" type="text/css" 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() {
  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_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>