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
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test form autofill - preview and highlight</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: preview and highlight
<script>
/* import-globals-from ../../../../../toolkit/components/satchel/test/satchel_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",
},
{
organization: "Random Org",
"address-level1": "First Admin Level",
tel: "+13453453456",
},
{
organization: "readonly Org",
"address-level1": "First Admin Level",
tel: "+13453453456",
name: "John Doe",
},
{
organization: "test org",
"address-level2": "Not a Town",
tel: "+13453453456",
name: "John Doe",
}
];
initPopupListener();
add_task(async function setup_storage() {
for (const storage of MOCK_STORAGE) {
await addAddress(storage);
}
});
add_task(async function check_preview() {
const focusedInput = await setInput("#organization", "");
synthesizeKey("KEY_ArrowDown");
await expectPopup();
await checkFormFieldsStyle(null);
for (let i = 0; i < MOCK_STORAGE.length; i++) {
info(`Checking organization: ${MOCK_STORAGE[i].organization} preview`);
synthesizeKey("KEY_ArrowDown");
await notifySelectedIndex(i);
await checkFormFieldsStyle(MOCK_STORAGE[i]);
}
// Navigate to the footer
synthesizeKey("KEY_ArrowDown");
await notifySelectedIndex(MOCK_STORAGE.length);
await checkFormFieldsStyle(null);
synthesizeKey("KEY_ArrowDown");
await notifySelectedIndex(-1);
await checkFormFieldsStyle(null);
focusedInput.blur();
});
add_task(async function check_filled_highlight() {
await triggerPopupAndHoverItem("#organization", 0);
// filled 1st address
await triggerAutofillAndCheckProfile(MOCK_STORAGE[0]);
await 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>
<p><label>address-level1:
<select id="address-level1" autocomplete="address-level1">
<option>First Admin Level</option>
<option>Second Admin Level</option>
</select>
</label></p>
<p><label>full name: <input id="name" autocomplete="name" readonly value="UNCHANGED"></label></p>
<p><label>address-level2: <input id="address-level2" autocomplete="address-level2" disabled value="Town"></label></p>
</form>
</div>
<pre id="test"></pre>
</body>
</html>
|
