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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
<!DOCTYPE HTML>
<html>
<!--
Test the rich-select component
-->
<head>
<meta charset="utf-8">
<title>Test the rich-select component</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="payments_common.js"></script>
<script src="../../res/unprivileged-fallbacks.js"></script>
<script src="autofillEditForms.js"></script>
<link rel="stylesheet" type="text/css" href="../../res/components/rich-select.css"/>
<link rel="stylesheet" type="text/css" href="../../res/components/address-option.css"/>
<link rel="stylesheet" type="text/css" href="../../res/components/basic-card-option.css"/>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display">
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
<script type="module">
/** Test the rich-select address-option component **/
import AddressOption from "../../res/components/address-option.js";
import RichSelect from "../../res/components/rich-select.js";
let addresses = {
"58gjdh354k": {
"email": "emzembrano92@email.com",
"name": "Emily Zembrano",
"street-address": "717 Hyde Street #6",
"address-level2": "San Francisco",
"address-level1": "CA",
"tel": "415 203 0845",
"postal-code": "94109",
"country": "USA",
"guid": "58gjdh354k",
},
"67gjdh354k": {
"email": "jenz9382@email.com",
"name": "Jennifer Zembrano",
"street-address": "42 Fairydust Lane",
"address-level2": "Lala Land",
"address-level1": "HI",
"tel": "415 439 2827",
"postal-code": "98765",
"country": "USA",
"guid": "67gjdh354k",
},
};
let select1 = new RichSelect();
for (let address of Object.values(addresses)) {
let option = document.createElement("option");
option.textContent = address.name + " " + address["street-address"];
option.setAttribute("value", address.guid);
option.dataset.fieldSeparator = ", ";
for (let field of Object.keys(address)) {
option.setAttribute(field, address[field]);
}
select1.popupBox.appendChild(option);
}
select1.setAttribute("option-type", "address-option");
select1.value = "";
document.getElementById("display").appendChild(select1);
let options = select1.popupBox.children;
let option1 = options[0];
let option2 = options[1];
function get_selected_clone() {
return select1.querySelector(".rich-select-selected-option");
}
function is_visible(element, message) {
ok(!isHidden(element), message);
}
add_task(async function test_clickable_area() {
ok(select1, "select1 exists");
isnot(document.activeElement, select1.popupBox, "<select> shouldn't have focus");
synthesizeMouseAtCenter(select1, {});
is(document.activeElement, select1.popupBox, "<select> should have focus when clicked");
document.activeElement.blur();
});
add_task(async function test_closed_state_on_selection() {
ok(select1, "select1 exists");
select1.popupBox.focus();
synthesizeKey(option1.textContent, {});
await asyncElementRendered();
ok(option1.selected, "option 1 is now selected");
let selectedClone = get_selected_clone();
is_visible(selectedClone, "The selected clone should be visible at all times");
is(selectedClone.getAttribute("email"), option1.getAttribute("email"),
"The selected clone email should be equivalent to the selected option 2");
is(selectedClone.getAttribute("name"), option1.getAttribute("name"),
"The selected clone name should be equivalent to the selected option 2");
});
add_task(async function test_multi_select_not_supported_in_dropdown() {
ok(option1.selected, "Option 1 should be selected from prior test");
select1.popupBox.focus();
synthesizeKey(option2.textContent, {});
await asyncElementRendered();
ok(!option1.selected, "Option 1 should no longer be selected after selecting option1");
ok(option2.selected, "Option 2 should now have selected property set to true");
});
add_task(async function test_selected_clone_should_equal_selected_option() {
ok(option2.selected, "option 2 should be selected");
let clonedOptions = select1.querySelectorAll(".rich-select-selected-option");
is(clonedOptions.length, 1, "there should only be one cloned option");
let clonedOption = clonedOptions[0];
for (let attrName of AddressOption.recordAttributes) {
is(clonedOption.attributes[attrName] && clonedOption.attributes[attrName].value,
option2.attributes[attrName] && option2.attributes[attrName].value,
"attributes should have matching value; name=" + attrName);
}
select1.popupBox.focus();
synthesizeKey(option1.textContent, {});
await asyncElementRendered();
clonedOptions = select1.querySelectorAll(".rich-select-selected-option");
is(clonedOptions.length, 1, "there should only be one cloned option");
clonedOption = clonedOptions[0];
for (let attrName of AddressOption.recordAttributes) {
is(clonedOption.attributes[attrName] && clonedOption.attributes[attrName].value,
option1.attributes[attrName] && option1.attributes[attrName].value,
"attributes should have matching value; name=" + attrName);
}
});
</script>
</body>
</html>
|
