<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Test form autofill - preview and highlight</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="text/javascript" src="formautofill_common.js"></script>
  <script type="text/javascript" src="satchel_common.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
Form autofill test: preview and highlight

<script>
/* import-globals-from ../../../../../toolkit/components/satchel/test/satchel_common.js */

"use strict";

const MOCK_STORAGE = [
  {
    organization: "Sesame Street",
    country: "US",
    "street-address": "123 Sesame Street.",
    tel: "+13453453456",
  },
  {
    organization: "Mozilla",
    country: "US",
    "street-address": "331 E. Evelyn Avenue",
  },
  {
    organization: "Tel org",
    country: "US",
    tel: "+12223334444",
  },
  {
    organization: "Random Org",
    country: "US",
    "address-level1": "First Admin Level",
    tel: "+13453453456",
  },
  {
    organization: "readonly Org",
    country: "US",
    "address-level1": "First Admin Level",
    tel: "+13453453456",
    name: "John Doe",
  },
  {
    organization: "test org",
    country: "US",
    "address-level2": "Not a Town",
    tel: "+13453453456",
    name: "John Doe",
  }
];


initPopupListener();

add_task(async function setup_storage() {
  for (const storage of MOCK_STORAGE) {
    await addAddress(storage);
  }
});

add_task(async function check_preview() {
  const focusedInput = await setInput("#organization", "");

  synthesizeKey("KEY_ArrowDown");
  await expectPopup();
  await checkFormFieldsStyle(null);

  for (let i = 0; i < MOCK_STORAGE.length; i++) {
    info(`Checking organization: ${MOCK_STORAGE[i].organization} preview`);
    synthesizeKey("KEY_ArrowDown");
    await notifySelectedIndex(i);
    await checkFormFieldsStyle(MOCK_STORAGE[i]);
  }

  // Navigate to the footer
  synthesizeKey("KEY_ArrowDown");
  await notifySelectedIndex(MOCK_STORAGE.length);
  await checkFormFieldsStyle(null);

  synthesizeKey("KEY_ArrowDown");
  await notifySelectedIndex(-1);
  await checkFormFieldsStyle(null);

  focusedInput.blur();
});

add_task(async function check_filled_highlight() {
  await triggerPopupAndHoverItem("#organization", 0);
  // filled 1st address
  await triggerAutofillAndCheckProfile(MOCK_STORAGE[0]);
  await checkFormFieldsStyle(MOCK_STORAGE[0], false);
});

</script>

<p id="display"></p>

<div id="content">

  <form id="form1">
    <p>This is a basic form.</p>
    <p><label>organization: <input id="organization" autocomplete="organization"></label></p>
    <p><label>streetAddress: <input id="street-address" autocomplete="street-address"></label></p>
    <p><label>tel: <input id="tel" autocomplete="tel"></label></p>
    <p><label>country: <input id="country" autocomplete="country"></label></p>
    <p><label>address-level1:
      <select id="address-level1" autocomplete="address-level1">
        <option>First Admin Level</option>
        <option>Second Admin Level</option>
      </select>
    </label></p>
    <p><label>full name: <input id="name" autocomplete="name" readonly value="UNCHANGED"></label></p>
    <p><label>address-level2: <input id="address-level2" autocomplete="address-level2" disabled value="Town"></label></p>
  </form>

</div>

<pre id="test"></pre>
</body>
</html>
