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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tests for the FxA Menu Message component</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script
src="chrome://browser/content/asrouter/components/fxa-menu-message.mjs"
type="module"
></script>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<script>
const { BrowserTestUtils } = ChromeUtils.importESModule(
"resource://testing-common/BrowserTestUtils.sys.mjs"
);
/**
* Tests that the exposed properties of the component are reflected
* as expected in the shadow DOM.
*/
add_task(async function test_exposed_properties() {
let message = document.createElement("fxa-menu-message");
const TEST_IMAGE_URL = "chrome://activity-stream/content/data/content/assets/fox-doodle-waving-static.png";
message.imageURL = TEST_IMAGE_URL;
const TEST_BUTTON_TEXT = "Howdy, partner! Sign up!";
message.buttonText = TEST_BUTTON_TEXT;
const PRIMARY_TEXT = "This is the primary text";
message.primaryText = PRIMARY_TEXT;
const SECONDARY_TEXT = "This is the secondary text";
message.secondaryText = SECONDARY_TEXT;
let content = document.getElementById("content");
content.appendChild(message);
await message.updateComplete;
let shadow = message.shadowRoot;
let image = shadow.querySelector("img");
is(image.src, TEST_IMAGE_URL, "The img element got the expected URL");
let button = shadow.querySelector("#sign-up-button");
is(button.textContent.trim(), TEST_BUTTON_TEXT, "The sign-up button got the right text.");
let primaryText = shadow.querySelector("#primary");
is(primaryText.textContent, PRIMARY_TEXT, "The primary text was correct.");
let secondaryText = shadow.querySelector("#secondary");
is(secondaryText.textContent, SECONDARY_TEXT, "The secondary text was correct.");
let container = shadow.querySelector("#container");
is(container.getAttribute("layout"), "column", "The layout should default to 'column' when no layout is explicitly set.");
const TEST_ROW_LAYOUT = "row";
message.layout = TEST_ROW_LAYOUT
await message.updateComplete;
is(container.getAttribute("layout"), TEST_ROW_LAYOUT, "The layout attribute should update to 'row' when set.");
message.remove();
});
/**
* Tests that the buttons exposed by the component emit the expected
* events.
*/
add_task(async function test_button_properties() {
let message = document.createElement("fxa-menu-message");
const TEST_BUTTON_TEXT = "Howdy, partner! Sign up!";
message.buttonText = TEST_BUTTON_TEXT;
let content = document.getElementById("content");
content.appendChild(message);
await message.updateComplete;
let shadow = message.shadowRoot;
let signUpEventPromise = BrowserTestUtils.waitForEvent(message, "FxAMenuMessage:SignUp");
let signUpButton = shadow.querySelector("#sign-up-button");
signUpButton.click();
await signUpEventPromise;
ok(true, "Got the FxAMenuMessage:SignUp event");
let closeEventPromise = BrowserTestUtils.waitForEvent(message, "FxAMenuMessage:Close");
let closeButton = shadow.querySelector("#close-button");
closeButton.click();
await closeEventPromise;
ok(true, "Got the FxAMenuMessage:Close event");
message.remove();
});
/**
* Tests that the sign-up button is focused by default, and that focus
* can be changed via the keyboard.
*/
add_task(async function test_signup_focus() {
let message = document.createElement("fxa-menu-message");
const TEST_BUTTON_TEXT = "Howdy, partner! Sign up!";
message.buttonText = TEST_BUTTON_TEXT;
let content = document.getElementById("content");
content.appendChild(message);
await message.updateComplete;
message.focus();
let shadow = message.shadowRoot;
let signUpButton = shadow.querySelector("#sign-up-button");
is(shadow.activeElement, signUpButton, "Sign-up button is focused by default.");
let closeButton = shadow.querySelector("#close-button");
const FOCUS_CHANGING_KEYS = [
"ArrowLeft",
"ArrowRight",
"ArrowUp",
"ArrowDown",
];
for (let keyName of FOCUS_CHANGING_KEYS) {
synthesizeKey(`KEY_${keyName}`);
// Now the close button should be focused.
is(shadow.activeElement, closeButton, "Close button is now focused.");
synthesizeKey(`KEY_${keyName}`);
// And pressing the same key should swap focus back to the sign-up
// button.
is(shadow.activeElement, signUpButton, "Sign-up button is now focused.");
}
message.remove();
});
/**
* Tests that setting no imageURL makes it so that the image element is
* not visible, and setting one makes it visible.
*/
add_task(async function test_image_visibility() {
let message = document.createElement("fxa-menu-message");
const TEST_BUTTON_TEXT = "Howdy, partner! Sign up!";
message.buttonText = TEST_BUTTON_TEXT;
let content = document.getElementById("content");
content.appendChild(message);
await message.updateComplete;
let illustrationContainer = message.shadowRoot.querySelector("#illustration-container");
ok(isHidden(illustrationContainer), "Illustration container should be hidden.");
message.imageURL = "some-image.png";
await message.updateComplete;
ok(!isHidden(illustrationContainer), "Illustration container should be visible.");
message.remove();
});
async function testIllustrationOffset({
layout,
offsetVar,
cssProperty,
checkContainerOffset = false,
}) {
const TEST_DEFAULT_VALUE = "0px";
const TEST_CONTAINER_OFFSET = "10px";
const TEST_ILLUSTRATION_OFFSET = "123px";
const TEST_IMAGE_URL =
"chrome://activity-stream/content/data/content/assets/fox-doodle-waving-static.png";
let message = document.createElement("fxa-menu-message");
message.imageURL = TEST_IMAGE_URL;
if (layout) {
message.layout = layout;
}
document.getElementById("content").appendChild(message);
await message.updateComplete;
let illustrationContainer = message.shadowRoot.querySelector(
"#illustration-container"
);
ok(
!isHidden(illustrationContainer),
"Illustration container should not be hidden."
);
let computedStyle = window.getComputedStyle(illustrationContainer);
is(
computedStyle[cssProperty],
TEST_DEFAULT_VALUE,
"Illustration offset should default to 0px"
);
message.style.setProperty(offsetVar, TEST_ILLUSTRATION_OFFSET);
computedStyle = window.getComputedStyle(illustrationContainer);
is(
computedStyle[cssProperty],
TEST_ILLUSTRATION_OFFSET,
"Illustration offset should have been forwarded to the container."
);
if (checkContainerOffset) {
const container = message.shadowRoot.querySelector("#container");
let containerStyle = window.getComputedStyle(container);
is(
containerStyle.marginBlockEnd,
TEST_DEFAULT_VALUE,
"Container offset should default to 0px."
);
message.style.setProperty(
"--container-margin-block-end-offset",
TEST_CONTAINER_OFFSET
);
containerStyle = window.getComputedStyle(container);
is(
containerStyle.marginBlockEnd,
TEST_CONTAINER_OFFSET,
"Container offset should have been applied."
);
}
message.remove();
}
/**
* Tests that setting the --illustration-margin-block-start-offset forwards that
* offset to the illustration container for 'column' layout.
*/
add_task(async function test_column_layout_illustration_offset() {
await testIllustrationOffset({
layout: null,
offsetVar: "--illustration-margin-block-start-offset",
cssProperty: "marginBlockStart",
});
});
/**
* Tests that setting the --illustration-margin-block-end-offset forwards that
* offset to the illustration container for 'row' layout.
*/
add_task(async function test_row_layout_illustration_offset() {
await testIllustrationOffset({
layout: "row",
offsetVar: "--illustration-margin-block-end-offset",
cssProperty: "marginBlockEnd",
checkContainerOffset: true,
});
});
</script>
</head>
<body>
<p id="display"></p>
<div id="content"></div>
<pre id="test"></pre>
</body>
</html>
|
