Bug 1395173 - Part2. Add a mochitest for the display of form autofill popup while switching between forms. r=lchang
MozReview-Commit-ID: 2DZr91ZR2zF
--- a/browser/extensions/formautofill/test/mochitest/formautofill_common.js
+++ b/browser/extensions/formautofill/test/mochitest/formautofill_common.js
@@ -2,31 +2,34 @@
/* import-globals-from ../../../../../toolkit/components/satchel/test/satchel_common.js */
/* eslint-disable no-unused-vars */
"use strict";
let formFillChromeScript;
let expectingPopup = null;
-function setInput(selector, value) {
+async function sleep(ms = 500, reason = "Intentionally wait for UI ready") {
+ SimpleTest.requestFlakyTimeout(reason);
+ await new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function setInput(selector, value) {
let input = document.querySelector("input" + selector);
input.value = value;
input.focus();
// "identifyAutofillFields" is invoked asynchronously in "focusin" event. We
// should make sure fields are ready for popup before doing tests.
//
- // TODO: "setTimeout" is used here temporarily because there's no event to
+ // TODO: "sleep" is used here temporarily because there's no event to
// notify us of the state of "identifyAutofillFields" for now. We should
// figure out a better way after the heuristics land.
- SimpleTest.requestFlakyTimeout("Guarantee asynchronous identifyAutofillFields is invoked");
- return new Promise(resolve => setTimeout(() => {
- resolve(input);
- }, 500));
+ await sleep(500, "Guarantee asynchronous identifyAutofillFields is invoked");
+ return input;
}
function clickOnElement(selector) {
let element = document.querySelector(selector);
if (!element) {
throw new Error("Can not find the element");
}
--- a/browser/extensions/formautofill/test/mochitest/mochitest.ini
+++ b/browser/extensions/formautofill/test/mochitest/mochitest.ini
@@ -3,9 +3,10 @@ support-files =
../../../../../toolkit/components/satchel/test/satchel_common.js
../../../../../toolkit/components/satchel/test/parent_utils.js
formautofill_common.js
formautofill_parent_utils.js
[test_autofocus_form.html]
[test_basic_autocomplete_form.html]
[test_formautofill_preview_highlight.html]
+[test_multiple_forms.html]
[test_on_address_submission.html]
new file mode 100644
--- /dev/null
+++ b/browser/extensions/formautofill/test/mochitest/test_multiple_forms.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test autofill submit</title>
+ <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
+ <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+ <script type="text/javascript" src="/tests/SimpleTest/SpawnTask.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>
+
+<script>
+/* import-globals-from ../../../../../testing/mochitest/tests/SimpleTest/SpawnTask.js */
+/* import-globals-from ../../../../../toolkit/components/satchel/test/satchel_common.js */
+/* import-globals-from formautofill_common.js */
+
+"use strict";
+
+let MOCK_STORAGE = [{
+ "given-name": "John",
+ "additional-name": "R",
+ "family-name": "Smith",
+}];
+
+initPopupListener();
+
+add_task(async function setupStorage() {
+ await addAddress(MOCK_STORAGE[0]);
+});
+
+add_task(async function check_switch_form_popup() {
+ await setInput("#additional-name", "");
+ doKey("down");
+ await expectPopup();
+
+ // We need an intentional wait here before switching form.
+ await sleep();
+ await setInput("#organization", "");
+ doKey("down");
+ const {open: popupOpen} = await getPopupState();
+ is(popupOpen, false);
+
+ await sleep();
+ await setInput("#given-name", "");
+ doKey("down");
+ await expectPopup();
+});
+
+</script>
+
+<div>
+
+ <form>
+ <label>Name:<input id="name" autocomplete="name"></label>
+ <label>Organization:<input id="organization" autocomplete="organization"></label>
+ <label>City:<input autocomplete="address-level2"></label>
+ </form>
+
+ <form>
+ <label>Given-Name: <input id="given-name" autocomplete="given-name"></label>
+ <label>Additional-Name/Middle: <input id="additional-name" autocomplete="additional-name"></label>
+ <label>FamilyName-LastName: <input id="family-name" autocomplete="family-name"></label>
+ </form>
+
+</div>
+</body>
+</html>