<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Test autocomplete due to multiple matching logins</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="text/javascript" src="../../../satchel/test/satchel_common.js"></script>
  <script type="text/javascript" src="pwmgr_common.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
Login Manager test: autocomplete due to multiple matching logins
<p id="display"></p>
<!-- we presumably can't hide the content for this test. -->
<div id="content"></div>
<pre id="test">
<script class="testbody" type="text/javascript">
/** Test for Login Manager: autocomplete due to multiple matching logins **/

add_setup(async () => {
  await setStoredLoginsAsync(
    [location.origin, "https://autocomplete:8888", null, "name", "pass", "uname", "pword"],
    [location.origin, "https://autocomplete:8888", null, "Name", "Pass", "uname", "pword"],
    [location.origin, "https://autocomplete:8888", null, "USER", "PASS", "uname", "pword"]
  );
})

add_task(async function test_empty_first_entry() {
  const form = createLoginForm({
    action: "https://autocomplete:8888"
  });

  // Make sure initial form is empty.
  checkLoginForm(form.uname, "", form.pword, "");

  // Trigger autocomplete popup
  form.uname.focus();

  let popupState = await getPopupState();
  is(popupState.open, false, "Check popup is initially closed");
  const { items } = await openPopupOn(form.uname);
  popupState = await getPopupState();
  is(popupState.selectedIndex, -1, "Check no entries are selected");
  checkAutoCompleteResults(items, ["name", "Name", "USER"], "example.com", "initial");

  // Check first entry
  const index0Promise = notifySelectedIndex(0);
  synthesizeKey("KEY_ArrowDown");
  await index0Promise;
  checkLoginForm(form.uname, "", form.pword, ""); // value shouldn't update
  synthesizeKey("KEY_Enter");
  await promiseFormsProcessedInSameProcess();
  checkLoginForm(form.uname, "name", form.pword, "pass");
});

add_task(async function test_empty_second_entry() {
  const form = createLoginForm({
    action: "https://autocomplete:8888"
  });

  await openPopupOn(form.uname);
  synthesizeKey("KEY_ArrowDown"); // first
  synthesizeKey("KEY_ArrowDown"); // second
  synthesizeKey("KEY_Enter");
  await promiseFormsProcessedInSameProcess();
  checkLoginForm(form.uname, "Name", form.pword, "Pass");
});

add_task(async function test_empty_third_entry() {
  const form = createLoginForm({
    action: "https://autocomplete:8888"
  });

  await openPopupOn(form.uname);
  synthesizeKey("KEY_ArrowDown"); // first
  synthesizeKey("KEY_ArrowDown"); // second
  synthesizeKey("KEY_ArrowDown"); // third
  synthesizeKey("KEY_Enter");
  await promiseFormsProcessedInSameProcess();
  checkLoginForm(form.uname, "USER", form.pword, "PASS");
});

add_task(async function test_preserve_matching_username_case() {
  const form = createLoginForm({
    action: "https://autocomplete:8888"
  });
  await promiseFormsProcessedInSameProcess();

  await openPopupOn(form.uname, { inputValue: "user" });
  // Check that we don't clobber user-entered text when tabbing away
  // (even with no autocomplete entry selected)
  synthesizeKey("KEY_Tab");
  await promiseFormsProcessedInSameProcess();
  checkLoginForm(form.uname, "user", form.pword, "PASS");
});
</script>
</pre>
</body>
</html>
