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";
let tab;
let contentWindow;
let doc;
add_setup(async function () {
const tabmail = document.getElementById("tabmail");
tab = tabmail.openTab("contentTab", {
url: "chrome://mochitests/content/browser/comm/mail/base/test/browser/widgets/files/tbBanner.xhtml",
});
registerCleanupFunction(() => {
tabmail.closeTab(tab);
});
await BrowserTestUtils.browserLoaded(tab.browser);
contentWindow = tab.browser.contentWindow;
doc = contentWindow.document;
});
add_task(async function test_loadsFixture() {
const banner = doc.getElementById("basic");
const bannerElement =
tab.browser.contentWindow.customElements.get("tb-banner");
Assert.ok(bannerElement, "tb-banner is registered");
Assert.ok(banner, "Fixture provides a tb-banner element");
Assert.ok(banner instanceof bannerElement, "tb-banner uses the Banner class");
const { shadowRoot } = banner;
Assert.ok(shadowRoot, "tb-banner attaches a shadow root");
Assert.ok(
shadowRoot.querySelector("link[href$='tb-banner.css']"),
"tb-banner loads its shared stylesheet"
);
Assert.ok(
doc.querySelector(
"link[rel='localization'][href='messenger/tb-banner.ftl']"
),
"Fixture provides tb-banner Fluent strings"
);
Assert.ok(
shadowRoot.querySelector('slot[name="title"]'),
"tb-banner renders the title slot"
);
Assert.ok(
shadowRoot.querySelector("slot[name='description']"),
"tb-banner renders the description slot"
);
});
add_task(async function test_defaultVariantAndUpdateVariant() {
const banner = doc.getElementById("basic");
Assert.equal(
banner.getAttribute("variant"),
"info",
"Default variant is info"
);
banner.update({ variant: "danger" });
Assert.equal(
banner.getAttribute("variant"),
"danger",
"update() applies a supported variant"
);
const icon = banner.shadowRoot.getElementById("icon");
Assert.ok(icon, "tb-banner renders a status icon");
Assert.equal(icon.alt, "", "tb-banner renders a decorative status icon");
banner.update({ variant: "bogus" });
Assert.equal(
banner.getAttribute("variant"),
"info",
"update() normalizes an unsupported variant to 'info'"
);
const expandedBanner = doc.getElementById("expanded");
Assert.equal(
expandedBanner.getAttribute("variant"),
"danger",
"Defined variant attribute kept"
);
});
add_task(async function test_expandAndCollapse() {
const banner = doc.getElementById("collapsible");
Assert.ok(banner, "Fixture provides a collapsible tb-banner element");
const { shadowRoot } = banner;
const details = shadowRoot.querySelector("details");
const description = shadowRoot.getElementById("description");
const actionText = shadowRoot.getElementById("actionText");
Assert.ok(details, "tb-banner renders a details element");
Assert.ok(description, "tb-banner renders a description element");
Assert.ok(actionText, "tb-banner renders action text");
// A banner with description content starts collapsed.
Assert.ok(!banner.expanded, "Banner with a description starts collapsed");
Assert.ok(!details.open, "Details element is closed while collapsed");
Assert.ok(
BrowserTestUtils.isVisible(actionText),
"Action text is visible when a description is present"
);
Assert.ok(
BrowserTestUtils.isHidden(description),
"Description is hidden while collapsed"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-more",
"Collapsed banner shows the expand action text"
);
// Expanding through the property reveals the description.
banner.expanded = true;
Assert.ok(banner.expanded, "Setting expanded reflects the expanded state");
Assert.ok(details.open, "Expanding opens the details element");
await TestUtils.waitForCondition(
() => BrowserTestUtils.isVisible(description),
"Waiting for the description to be revealed"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-less",
"Expanded banner shows the collapse action text"
);
// Collapsing through the property hides the description again.
banner.expanded = false;
Assert.ok(!banner.expanded, "Clearing expanded clears the expanded state");
Assert.ok(!details.open, "Collapsing closes the details element");
await TestUtils.waitForCondition(
() => BrowserTestUtils.isHidden(description),
"Waiting for the description to be hidden"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-more",
"Collapsed banner shows the expand action text again"
);
// update() drives the same expand behavior as the property.
banner.update({ expanded: true });
Assert.ok(banner.expanded, "update() expands the banner");
Assert.ok(details.open, "update() opens the details element");
await TestUtils.waitForCondition(
() => BrowserTestUtils.isVisible(description),
"waiting for update() to reveal the description"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-less",
"update() shows the collapse action text"
);
// Restore the collapsed baseline for later tasks.
banner.expanded = false;
await TestUtils.waitForCondition(
() => BrowserTestUtils.isHidden(description),
"waiting for the banner to return to the collapsed baseline"
);
});
add_task(async function test_expandAndCollapseByUserClick() {
const banner = doc.getElementById("collapsible");
Assert.ok(banner, "Fixture provides a collapsible tb-banner element");
const { shadowRoot } = banner;
const summary = shadowRoot.querySelector("summary");
const details = shadowRoot.querySelector("details");
const description = shadowRoot.getElementById("description");
const actionText = shadowRoot.getElementById("actionText");
Assert.ok(summary, "tb-banner renders a summary control");
Assert.ok(
!banner.expanded,
"Banner starts collapsed before user interaction"
);
summary.scrollIntoView({ block: "center" });
// The user expands the banner by clicking the summary.
let toggled = BrowserTestUtils.waitForEvent(details, "toggle");
EventUtils.synthesizeMouseAtCenter(summary, {}, contentWindow);
await toggled;
Assert.ok(details.open, "Clicking the summary opens the details element");
await TestUtils.waitForCondition(
() => banner.expanded,
"Waiting for the banner to reflect the expanded state after a click"
);
Assert.ok(
BrowserTestUtils.isVisible(description),
"Clicking the summary reveals the description"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-less",
"Clicking to expand shows the collapse action text"
);
// The user collapses the banner by clicking the summary again.
toggled = BrowserTestUtils.waitForEvent(details, "toggle");
EventUtils.synthesizeMouseAtCenter(summary, {}, contentWindow);
await toggled;
Assert.ok(
!details.open,
"Clicking the summary again closes the details element"
);
await TestUtils.waitForCondition(
() => !banner.expanded,
"waiting for the banner to reflect the collapsed state after a click"
);
Assert.ok(
BrowserTestUtils.isHidden(description),
"Clicking the summary again hides the description"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-more",
"Clicking to collapse shows the expand action text"
);
});
add_task(async function test_expandWithoutDescriptionIsNoOp() {
const banner = doc.getElementById("basic");
Assert.ok(
banner,
"Fixture provides a tb-banner element without a description"
);
const { shadowRoot } = banner;
const summary = shadowRoot.querySelector("summary");
const details = shadowRoot.querySelector("details");
const description = shadowRoot.getElementById("description");
const actionText = shadowRoot.getElementById("actionText");
// Without a description there is no disclosure affordance.
Assert.ok(!banner.expanded, "Banner without a description starts collapsed");
Assert.ok(
BrowserTestUtils.isHidden(actionText),
"Action text is hidden without a description"
);
Assert.ok(
BrowserTestUtils.isHidden(description),
"Description is hidden without a description"
);
Assert.equal(
summary.tabIndex,
-1,
"Summary is removed from the tab order without a description"
);
// Setting the property cannot expand a banner that has no description.
banner.expanded = true;
Assert.ok(
!banner.expanded,
"Property cannot expand a banner without a description"
);
Assert.ok(
!details.open,
"Details stays closed when set expanded without a description"
);
// Clicking the summary cannot expand it either.
summary.scrollIntoView({ block: "center" });
EventUtils.synthesizeMouseAtCenter(summary, {}, contentWindow);
await new Promise(resolve => contentWindow.requestAnimationFrame(resolve));
Assert.ok(
!banner.expanded,
"Clicking cannot expand a banner without a description"
);
Assert.ok(
!details.open,
"Details stays closed when clicked without a description"
);
});
add_task(async function test_defaultExpandedBannerCollapsesOnClick() {
const banner = doc.getElementById("expanded");
Assert.ok(banner, "Fixture provides a default-expanded tb-banner element");
const { shadowRoot } = banner;
const summary = shadowRoot.querySelector("summary");
const details = shadowRoot.querySelector("details");
const description = shadowRoot.getElementById("description");
const actionText = shadowRoot.getElementById("actionText");
Assert.ok(summary, "tb-banner renders a summary control");
Assert.ok(banner.expanded, "Banner with expanded attribute starts expanded");
Assert.ok(details.open, "Details element is open by default");
Assert.ok(
BrowserTestUtils.isVisible(description),
"Description is visible by default"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-less",
"Default-expanded banner shows the collapse action text"
);
summary.scrollIntoView({ block: "center" });
// The user collapses the banner by clicking the summary.
const toggled = BrowserTestUtils.waitForEvent(details, "toggle");
EventUtils.synthesizeMouseAtCenter(summary, {}, contentWindow);
await toggled;
Assert.ok(!details.open, "Clicking the summary closes the details element");
await TestUtils.waitForCondition(
() => !banner.expanded,
"Waiting for the banner to reflect the collapsed state after a click"
);
Assert.ok(
BrowserTestUtils.isHidden(description),
"Clicking the summary hides the description"
);
Assert.equal(
doc.l10n.getAttributes(actionText).id,
"tb-banner-show-more",
"Collapsed banner shows the expand action text"
);
// Restore the default expanded baseline for later tasks.
banner.expanded = true;
await TestUtils.waitForCondition(
() => BrowserTestUtils.isVisible(description),
"Waiting for the banner to return to its default expanded baseline"
);
});