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
|
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozPageHeader Tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link
rel="stylesheet"
href="chrome://mochikit/content/tests/SimpleTest/test.css"
/>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script
type="module"
src="chrome://global/content/elements/moz-page-header.mjs"
></script>
<script src="lit-test-helpers.js"></script>
<script>
let html;
let testHelpers = new LitTestHelpers();
add_setup(async function setup() {
({ html } = await testHelpers.setupLit());
const templateFn = attrs => html`
<moz-page-header ${attrs}></moz-page-header>
`;
testHelpers.setupTests({ templateFn });
});
add_task(async function testMozPageHeaderProperties() {
const HEADING = "Page Heading";
const DESCRIPTION = "Some description of this page.";
const ICON_SRC = "chrome://global/skin/icons/info.svg";
let template = testHelpers.templateFn({
heading: HEADING,
description: DESCRIPTION,
iconsrc: ICON_SRC,
});
let renderTarget = await testHelpers.renderTemplate(template);
let header = renderTarget.firstElementChild;
ok(header, "The page header renders.");
let headingEl = header.shadowRoot.querySelector("h1");
is(
headingEl?.textContent.trim(),
HEADING,
"Heading element renders with the expected text."
);
let descriptionEl = header.shadowRoot.querySelector(".description");
is(
descriptionEl?.textContent.trim(),
DESCRIPTION,
"Description element renders with the expected text."
);
let iconEl = header.shadowRoot.querySelector(".icon");
ok(iconEl, "Icon element is rendered when iconSrc is set.");
is(iconEl.getAttribute("src"), ICON_SRC, "Icon has the expected src.");
let backButton = header.shadowRoot.querySelector(".back-button");
ok(!backButton, "Back button is not rendered by default.");
header.backButton = true;
await header.updateComplete;
backButton = header.shadowRoot.querySelector(".back-button");
ok(backButton, "Back button appears when backButton is true.");
header.backButton = false;
await header.updateComplete;
backButton = header.shadowRoot.querySelector(".back-button");
ok(
!backButton,
"Back button is removed when backButton is set back to false."
);
});
add_task(async function testMozPageHeaderBackButtonEvent() {
let template = testHelpers.templateFn({
heading: "With back button",
backbutton: "",
});
let renderTarget = await testHelpers.renderTemplate(template);
let header = renderTarget.firstElementChild;
let backButton = header.shadowRoot.querySelector(".back-button");
ok(backButton, "Back button is present for click test.");
let eventPromise = new Promise(resolve => {
header.addEventListener("navigate-back", resolve, { once: true });
});
backButton.click();
let event = await eventPromise;
ok(event instanceof Event, "Clicking back button dispatches an Event.");
is(
event.type,
"navigate-back",
"The event type is a 'navigate-back' event."
);
});
add_task(async function testMozPageHeaderBreadcrumbSlot() {
const template = html`
<moz-page-header
heading="With Breadcrumbs"
icon-src="chrome://global/skin/icons/info.svg"
>
<moz-breadcrumb-group slot="breadcrumbs">
<moz-breadcrumb href="about#first" label="First"></moz-breadcrumb>
<moz-breadcrumb
href="about#current"
label="Current"
></moz-breadcrumb>
</moz-breadcrumb-group>
</moz-page-header>
`;
const renderTarget = await testHelpers.renderTemplate(template);
const header = renderTarget.firstElementChild;
const slot = header.shadowRoot.querySelector(
'slot[name="breadcrumbs"]'
);
ok(slot, "Page header renders a slot for breadcrumbs.");
const assigned = slot.assignedElements();
is(
assigned.length,
1,
"One element is assigned into the breadcrumbs slot."
);
const group = assigned[0];
is(
group.localName,
"moz-breadcrumb-group",
"moz-breadcrumb-group is slotted in the breadcrumbs slot."
);
});
add_task(async function testMozPageHeaderSupportPage() {
let supportPageTemplate = testHelpers.templateFn({
label: "Testing support-page",
"support-page": "test",
});
let renderTarget =
await testHelpers.renderTemplate(supportPageTemplate);
let header = renderTarget.firstElementChild;
let supportLink = header.shadowRoot.querySelector(".support-link");
ok(
supportLink,
"moz-page-header renders a support link when supportPage is provided."
);
let adjacentEl = supportLink.previousElementSibling;
is(
adjacentEl.id,
"heading",
"support link is placed next to the heading when no description is provided."
);
header.description = "now we have a description.";
await header.updateComplete;
supportLink = header.shadowRoot.querySelector(".support-link");
adjacentEl = supportLink.previousElementSibling;
is(
adjacentEl.id,
"description",
"support link is placed next to the description when provided."
);
});
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
</body>
</html>
|
