Bug 1755927 - Add a testcase to ensure autofill state is still recorded after the elements in a form is added or removed. r=credential-management-reviewers,sgalich

Differential Revision: https://phabricator.services.mozilla.com/D176399

browser/extensions/formautofill/test/mochitest/test_form_changes.html

@@ -44,24 +44,41 @@ function addInputField(form, className) {
   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();
-  checkMenuEntries(MOCK_STORAGE.map(address =>
-    JSON.stringify({primary: address.name, secondary: address["address-level2"]})
-  ));
+
+  // 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();
@@ -73,6 +90,11 @@ async function checkFormChangeHappened(formId) {
   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() {