diff options
Diffstat (limited to 'browser/extensions/formautofill/test/mochitest/test_form_changes.html')
-rw-r--r-- | browser/extensions/formautofill/test/mochitest/test_form_changes.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/browser/extensions/formautofill/test/mochitest/test_form_changes.html b/browser/extensions/formautofill/test/mochitest/test_form_changes.html new file mode 100644 index 0000000000..2eace91a53 --- /dev/null +++ b/browser/extensions/formautofill/test/mochitest/test_form_changes.html @@ -0,0 +1,128 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test basic autofill</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: autocomplete on an autofocus form + +<script> +/* import-globals-from ../../../../../toolkit/components/satchel/test/satchel_common.js */ + +"use strict"; + +let MOCK_STORAGE = [{ + name: "John Doe", + organization: "Sesame Street", + "address-level2": "Austin", + tel: "+13453453456", +}, { + name: "Foo Bar", + organization: "Mozilla", + "address-level2": "San Francisco", + tel: "+16509030800", +}]; + +initPopupListener(); + +async function setupAddressStorage() { + await addAddress(MOCK_STORAGE[0]); + await addAddress(MOCK_STORAGE[1]); +} + +function addInputField(form, className) { + let newElem = document.createElement("input"); + newElem.name = className; + newElem.autocomplete = className; + newElem.type = "text"; + form.appendChild(newElem); +} + +async function checkFieldsAutofilled(formId, profile) { + const elements = document.querySelectorAll(`#${formId} input`); + for (const element of elements) { + await SimpleTest.promiseWaitForCondition(() => { + return element.value == profile[element.name]; + }); + await checkFieldHighlighted(element, true); + } +} + +async function checkFormChangeHappened(formId) { + info("expecting form changed"); + await focusAndWaitForFieldsIdentified(`#${formId} input[name=tel]`); + synthesizeKey("KEY_ArrowDown"); + await expectPopup(); + synthesizeKey("KEY_ArrowDown"); + checkMenuEntries(MOCK_STORAGE.map(address => + JSON.stringify({primary: address.tel, secondary: address.name}) + )); + + // Click the first entry of the autocomplete popup and make sure all fields are autofilled + synthesizeKey("KEY_Enter"); + await checkFieldsAutofilled(formId, MOCK_STORAGE[0]); + // This is for checking the changes of element count. + addInputField(document.querySelector(`#${formId}`), "address-level2"); + + await focusAndWaitForFieldsIdentified(`#${formId} input[name=name]`); + synthesizeKey("KEY_ArrowDown"); + await expectPopup(); + + // Click on an autofilled field would show an autocomplete popup with "clear form" entry + checkMenuEntries([ + JSON.stringify({primary: "", secondary: ""}), // Clear Autofill Form + JSON.stringify({primary: "", secondary: ""}) // FormAutofill Preferemce + ], false); + + // This is for checking the changes of element removed and added then. + document.querySelector(`#${formId} input[name=address-level2]`).remove(); + addInputField(document.querySelector(`#${formId}`), "address-level2"); + + await focusAndWaitForFieldsIdentified(`#${formId} input[name=address-level2]`, true); + synthesizeKey("KEY_ArrowDown"); + await expectPopup(); + checkMenuEntries(MOCK_STORAGE.map(address => + JSON.stringify({primary: address["address-level2"], secondary: address.name}) + )); + + // Make sure everything is autofilled in the end + synthesizeKey("KEY_ArrowDown"); + synthesizeKey("KEY_Enter"); + await checkFieldsAutofilled(formId, MOCK_STORAGE[0]); +} + +add_task(async function init_storage() { + await setupAddressStorage(); +}); + +add_task(async function check_change_happened_in_form() { + await checkFormChangeHappened("form1"); +}); + +add_task(async function check_change_happened_in_body() { + await checkFormChangeHappened("form2"); +}); +</script> + +<p id="display"></p> +<div id="content"> + <form id="form1"> + <p><label>organization: <input name="organization" autocomplete="organization" type="text"></label></p> + <p><label>tel: <input name="tel" autocomplete="tel" type="text"></label></p> + <p><label>name: <input name="name" autocomplete="name" type="text"></label></p> + </form> + <div id="form2"> + <p><label>organization: <input name="organization" autocomplete="organization" type="text"></label></p> + <p><label>tel: <input name="tel" autocomplete="tel" type="text"></label></p> + <p><label>name: <input name="name" autocomplete="name" type="text"></label></p> + </div> +</div> +<pre id="test"></pre> +</body> +</html> |