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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint max-len: ["error", 80] */
let htmlAboutAddonsWindow;
const HTML_NS = "http://www.w3.org/1999/xhtml";
function clickElement(el) {
el.dispatchEvent(new CustomEvent("click"));
}
function createMessageBar(messageBarStack, { attrs, children, onclose } = {}) {
const win = messageBarStack.ownerGlobal;
const messageBar = win.document.createElementNS(HTML_NS, "message-bar");
if (attrs) {
for (const [k, v] of Object.entries(attrs)) {
messageBar.setAttribute(k, v);
}
}
if (children) {
if (Array.isArray(children)) {
messageBar.append(...children);
} else {
messageBar.append(children);
}
}
messageBar.addEventListener("message-bar:close", onclose, { once: true });
messageBarStack.append(messageBar);
return messageBar;
}
add_setup(async function () {
htmlAboutAddonsWindow = await loadInitialView("extension");
registerCleanupFunction(() => closeView(htmlAboutAddonsWindow));
});
add_task(async function test_message_bar_stack() {
const win = htmlAboutAddonsWindow;
let messageBarStack = win.document.getElementById("abuse-reports-messages");
ok(messageBarStack, "Got a message-bar-stack in HTML about:addons page");
is(
messageBarStack.maxMessageBarCount,
3,
"Got the expected max-message-bar-count property"
);
is(
messageBarStack.childElementCount,
0,
"message-bar-stack is initially empty"
);
});
add_task(async function test_create_message_bar_create_and_onclose() {
const win = htmlAboutAddonsWindow;
const messageBarStack = win.document.getElementById("abuse-reports-messages");
let messageEl = win.document.createElementNS(HTML_NS, "span");
messageEl.textContent = "A message bar text";
let buttonEl = win.document.createElementNS(HTML_NS, "button");
buttonEl.textContent = "An action button";
let messageBar;
let onceMessageBarClosed = new Promise(resolve => {
messageBar = createMessageBar(messageBarStack, {
children: [messageEl, buttonEl],
onclose: resolve,
});
});
is(
messageBarStack.childElementCount,
1,
"message-bar-stack has a child element"
);
is(
messageBarStack.firstElementChild,
messageBar,
"newly created message-bar added as message-bar-stack child element"
);
const slot = messageBar.shadowRoot.querySelector("slot");
is(
slot.assignedNodes()[0],
messageEl,
"Got the expected span element assigned to the message-bar slot"
);
is(
slot.assignedNodes()[1],
buttonEl,
"Got the expected button element assigned to the message-bar slot"
);
let dismissed = BrowserTestUtils.waitForEvent(
messageBar,
"message-bar:user-dismissed"
);
info("Click the close icon on the newly created message-bar");
clickElement(messageBar.closeButton);
await dismissed;
info("Expect the onclose function to be called");
await onceMessageBarClosed;
is(
messageBarStack.childElementCount,
0,
"message-bar-stack has no child elements"
);
});
add_task(async function test_max_message_bar_count() {
const win = htmlAboutAddonsWindow;
const messageBarStack = win.document.getElementById("abuse-reports-messages");
info("Create a new message-bar");
let messageElement = document.createElementNS(HTML_NS, "span");
messageElement = "message bar label";
let onceMessageBarClosed = new Promise(resolve => {
createMessageBar(messageBarStack, {
children: messageElement,
onclose: resolve,
});
});
is(
messageBarStack.childElementCount,
1,
"message-bar-stack has the expected number of children"
);
info("Create 3 more message bars");
const allBarsPromises = [];
for (let i = 2; i <= 4; i++) {
allBarsPromises.push(
new Promise(resolve => {
createMessageBar(messageBarStack, {
attrs: { dismissable: "" },
children: [messageElement, i],
onclose: resolve,
});
})
);
}
info("Expect first message-bar to closed automatically");
await onceMessageBarClosed;
is(
messageBarStack.childElementCount,
3,
"message-bar-stack has the expected number of children"
);
info("Click on close icon for the second message-bar");
clickElement(messageBarStack.firstElementChild.closeButton);
info("Expect the second message-bar to be closed");
await allBarsPromises[0];
is(
messageBarStack.childElementCount,
2,
"message-bar-stack has the expected number of children"
);
info("Clear the entire message-bar-stack content");
messageBarStack.textContent = "";
info("Expect all the created message-bar to be closed automatically");
await Promise.all(allBarsPromises);
is(
messageBarStack.childElementCount,
0,
"message-bar-stack has no child elements"
);
});
|
