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
|
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozSelect Tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<link
rel="stylesheet"
href="chrome://mochikit/content/tests/SimpleTest/test.css"
/>
<script src="lit-test-helpers.js"></script>
<script>
let testHelpers = new InputTestHelpers();
add_setup(async function setup() {
await testHelpers.setupLit();
let templateFn = (attrs, children) => testHelpers.html`
<moz-select ${attrs}>
<moz-option value="1" label="One"></moz-option>
<moz-option value="value" label="Initial"></moz-option>
<moz-option value="new value" label="Changed"></moz-option>
<moz-option value="4" label="Four"></moz-option>
${children}
</moz-select>
`;
testHelpers.setupTests({ templateFn });
});
add_task(async function testMozSelectProperties() {
await testHelpers.testCommonInputProperties("moz-select");
});
add_task(async function testMozSelectChange() {
let { trackEvent, verifyEvents } = testHelpers.getInputEventHelpers();
let target = await testHelpers.renderTemplate();
let select = target.querySelector("moz-select");
await select.updateComplete;
is(select.value, "1", "First option is selected");
select.addEventListener("change", trackEvent);
select.addEventListener("input", trackEvent);
select.addEventListener("click", trackEvent);
let changed = BrowserTestUtils.waitForEvent(select, "change");
let topWindow = window.docShell.chromeEventHandler.ownerGlobal;
let pickerOpened = BrowserTestUtils.waitForSelectPopupShown(topWindow);
select.focus();
synthesizeKey(" ");
await pickerOpened;
synthesizeKey("KEY_ArrowDown");
synthesizeKey("KEY_Enter");
let event = await changed;
is(select.value, "value", "Second option is selected");
is(event.target, select, "Change event is on moz-select");
verifyEvents([
{ type: "input", localName: "moz-select", value: "value" },
{ type: "change", localName: "moz-select", value: "value" },
]);
changed = BrowserTestUtils.waitForEvent(select, "change");
pickerOpened = BrowserTestUtils.waitForSelectPopupShown(topWindow);
synthesizeMouseAtCenter(select, {});
let menupopup = await pickerOpened;
let thirdOption = menupopup.querySelectorAll("menuitem")[2];
synthesizeMouseAtCenter(thirdOption, {}, topWindow);
event = await changed;
is(select.value, "new value", "Second option is selected");
is(event.target, select, "Change event is on moz-select");
verifyEvents([
{ type: "click", localName: "moz-select", value: "value" },
{ type: "input", localName: "moz-select", value: "new value" },
{ type: "change", localName: "moz-select", value: "new value" },
{ type: "click", localName: "moz-select", value: "new value" },
]);
});
add_task(async function testMozSelectModifyOptions() {
let target = await testHelpers.renderTemplate();
let select = target.querySelector("moz-select");
await select.updateComplete;
let options = select.inputEl.querySelectorAll("option");
let mozOptions = select.querySelectorAll("moz-option");
is(select.value, "1", "moz-select value correct");
is(options[0].textContent.trim(), "One", "First option text correct");
is(options[0].value, "1", "First option value correct");
is(
options[1].textContent.trim(),
"Initial",
"Second option text correct"
);
is(options[1].value, "value", "Second option value correct");
mozOptions[0].label = "First";
mozOptions[0].value = "i";
mozOptions[1].label = "Second";
mozOptions[1].value = "ii";
await TestUtils.waitForTick();
await select.updateComplete;
is(select.value, "i", "moz-select value updated");
is(options[0].textContent.trim(), "First", "First option text updated");
is(options[0].value, "i", "First option value updated");
is(
options[1].textContent.trim(),
"Second",
"Second option text updated"
);
is(options[1].value, "ii", "Second option value updated");
});
add_task(async function testMozSelectOptionWithIcon() {
let target = await testHelpers.renderTemplate();
let select = target.querySelector("moz-select");
await select.updateComplete;
is(select.value, "1", "First option is selected");
let selectWrapper = select.shadowRoot.querySelector(".select-wrapper");
ok(
!selectWrapper.classList.contains("with-icon"),
"Select doesn't have an icon"
);
let mozOptions = select.querySelectorAll("moz-option");
mozOptions[0].iconSrc = "chrome://global/skin/icons/info.svg";
await TestUtils.waitForTick();
await select.updateComplete;
info("New iconSrc value was added to the selected option.");
ok(selectWrapper.classList.contains("with-icon"), "Select has an icon");
});
</script>
</head>
<body></body>
</html>
|
