Revision control
Copy as Markdown
Other Tools
/* 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
"use strict";
const tabmail = document.getElementById("tabmail");
let contentWindow;
let contentDocument;
function getCheckbox(row) {
return row.shadowRoot.querySelector('input[type="checkbox"]');
}
function getContentSlot(row) {
return row.shadowRoot.querySelector('slot[name="content"]');
}
function getLabel(row) {
return row.querySelector('[slot="label"]');
}
function createRow({ checked = false, content = "Test Content" } = {}) {
const row = contentDocument.createElement("calendar-dialog-toggleable-row");
row.toggleAttribute("checked", checked);
const label = contentDocument.createElement("span");
label.slot = "label";
label.textContent = "Test Label";
row.append(label);
if (content) {
const contentElement = contentDocument.createElement("div");
contentElement.slot = "content";
contentElement.textContent = content;
row.append(contentElement);
}
contentDocument.body.append(row);
return row;
}
add_setup(async function () {
const tab = tabmail.openTab("contentTab", {
});
await BrowserTestUtils.browserLoaded(tab.browser);
tab.browser.focus();
contentWindow = tab.browser.contentWindow;
contentDocument = contentWindow.document;
registerCleanupFunction(() => {
tabmail.closeOtherTabs(tabmail.tabInfo[0]);
});
});
add_task(function test_uncheckedRowHidesContent() {
const row = contentDocument.querySelector("calendar-dialog-toggleable-row");
const content = getContentSlot(row);
Assert.ok(
BrowserTestUtils.isHidden(content),
"Unchecked row should hide its content"
);
});
add_task(function test_checkedRowShowsContent() {
const row = contentDocument.querySelector(
"calendar-dialog-toggleable-row[checked]"
);
const content = getContentSlot(row);
Assert.ok(
BrowserTestUtils.isVisible(content),
"Checked row should show its content"
);
});
add_task(function test_checkedAttributeUpdatesRowState() {
const row = createRow();
const checkbox = getCheckbox(row);
const content = getContentSlot(row);
row.setAttribute("checked", "checked");
Assert.ok(checkbox.checked, "Checked attribute should check the checkbox");
Assert.ok(
BrowserTestUtils.isVisible(content),
"Checked attribute should show content"
);
Assert.equal(
checkbox.getAttribute("aria-expanded"),
"true",
"Checked attribute should identify expanded content"
);
row.removeAttribute("checked");
Assert.ok(!checkbox.checked, "Unchecked row should uncheck the checkbox");
Assert.ok(
BrowserTestUtils.isHidden(content),
"Unchecked row should hide content"
);
Assert.equal(
checkbox.getAttribute("aria-expanded"),
"false",
"Unchecked row should identify collapsed content"
);
row.remove();
});
add_task(function test_clickingToggleLabelUpdatesRow() {
const row = createRow();
const label = getLabel(row);
const content = getContentSlot(row);
EventUtils.synthesizeMouseAtCenter(label, {}, contentWindow);
Assert.ok(row.hasAttribute("checked"), "Label click should check the row");
Assert.ok(
BrowserTestUtils.isVisible(content),
"Label click should show content"
);
EventUtils.synthesizeMouseAtCenter(label, {}, contentWindow);
Assert.ok(
!row.hasAttribute("checked"),
"Second click should uncheck the row"
);
Assert.ok(
BrowserTestUtils.isHidden(content),
"Second click should hide content"
);
row.remove();
});
add_task(function test_pressingSpaceUpdatesRow() {
const row = createRow();
const checkbox = getCheckbox(row);
const content = getContentSlot(row);
checkbox.focus();
EventUtils.synthesizeKey(" ", {}, contentWindow);
Assert.ok(row.hasAttribute("checked"), "Space should check the row");
Assert.ok(BrowserTestUtils.isVisible(content), "Space should show content");
EventUtils.synthesizeKey(" ", {}, contentWindow);
Assert.ok(!row.hasAttribute("checked"), "Space should uncheck the row");
Assert.ok(BrowserTestUtils.isHidden(content), "Space should hide content");
row.remove();
});
add_task(function test_checkboxIsProperlyLabelled() {
const row = createRow();
const checkbox = getCheckbox(row);
const label = getLabel(row);
Assert.ok(BrowserTestUtils.isVisible(label), "Label text should be visible");
Assert.equal(checkbox.labels.length, 1, "Checkbox should have one label");
const nativeLabel = checkbox.labels[0];
Assert.ok(nativeLabel, "Checkbox should have a native label");
Assert.equal(
nativeLabel.querySelector('slot[name="label"]').assignedElements()[0],
label,
"Checkbox label should contain the visible label text"
);
row.remove();
});