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
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test form autofill - preview and highlight</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.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>
Form autofill test: preview and highlight
<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";
const MOCK_STORAGE = [{
organization: "Sesame Street",
"street-address": "123 Sesame Street.",
tel: "+13453453456",
}, {
organization: "Mozilla",
"street-address": "331 E. Evelyn Avenue",
}, {
organization: "Tel org",
tel: "+12223334444",
}];
function checkFormFieldsStyle(profile, isPreviewing = true) {
const elems = document.querySelectorAll("input, select");
for (const elem of elems) {
const fillableValue = profile && profile[elem.id];
const previewValue = isPreviewing && fillableValue || "";
checkFieldHighlighted(elem, !!fillableValue);
checkFieldPreview(elem, previewValue);
}
}
initPopupListener();
add_task(async function setup_storage() {
await addAddress(MOCK_STORAGE[0]);
await addAddress(MOCK_STORAGE[1]);
await addAddress(MOCK_STORAGE[2]);
});
add_task(async function check_preview() {
const focusedInput = await setInput("#organization", "");
synthesizeKey("KEY_ArrowDown");
await expectPopup();
checkFormFieldsStyle(null);
for (let i = 0; i < MOCK_STORAGE.length; i++) {
synthesizeKey("KEY_ArrowDown");
await notifySelectedIndex(i);
checkFormFieldsStyle(MOCK_STORAGE[i]);
}
// Navigate to the footer
synthesizeKey("KEY_ArrowDown");
await notifySelectedIndex(MOCK_STORAGE.length);
checkFormFieldsStyle(null);
synthesizeKey("KEY_ArrowDown");
await notifySelectedIndex(-1);
checkFormFieldsStyle(null);
focusedInput.blur();
});
add_task(async function check_filled_highlight() {
await triggerPopupAndHoverItem("#organization", 0);
// filled 1st address
await triggerAutofillAndCheckProfile(MOCK_STORAGE[0]);
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>
</form>
</div>
<pre id="test"></pre>
</body>
</html>
|
