1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<!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");
checkMenuEntriesComment(MOCK_STORAGE.map(address =>
makeAddressComment({
primary: address.tel,
secondary: address.name,
status: "Also autofills name, organization"
})
), 2);
// 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([
"Clear Autofill Form", // Clear Autofill Form
"Manage addresses" // FormAutofill Preferemce
], 0);
// 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();
checkMenuEntriesComment(MOCK_STORAGE.map(address =>
makeAddressComment({
primary: address["address-level2"],
secondary: address.name,
status: "Also autofills name, organization, phone"
})
), 2);
// 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>
|
