Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 12:51:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1873534 - moz-card should emit a toggle event when expanding or collapsing. r=reusable-components-reviewers,mstriemer

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D210734
This commit is contained in:
Irene Ni 2024-05-23 17:51:04 +00:00
parent 01a6870fef
commit b9642088b1
2 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
toolkit/content/tests/widgets/test_moz_card.html
View File

@ -41,6 +41,9 @@
<script>
let generatedSlotText = "generated slotted element";
let testHeading = "test heading";
const { BrowserTestUtils } = ChromeUtils.importESModule(
"resource://testing-common/BrowserTestUtils.sys.mjs"
);
function assertBasicProperties(card, expectedValues) {
info(`Testing card with ID: ${card.id}`);
@ -69,10 +72,24 @@
}
function assertAccordionCardProperties(card) {
async function assertAccordionCardProperties(card) {
ok(card.detailsEl, "The details element should exist");
ok(card.detailsEl.querySelector("summary"), "There should be a summary element within the details element");
ok(card.detailsEl.querySelector("summary").querySelector(".chevron-icon"), "There should be a chevron icon div within the summary element");
let cardToggled = BrowserTestUtils.waitForEvent(card, "toggle");
card.detailsEl.querySelector("summary").click();
let openEvent = await cardToggled;
is(openEvent.newState, "open", "Event shows new state is open");
is(openEvent.oldState, "closed", "Event shows old state is closed");
ok(card.detailsEl.open, "When the accordion is closed, it should expand when clicked");
cardToggled = BrowserTestUtils.waitForEvent(card, "toggle");
card.detailsEl.querySelector("summary").click();
let closeEvent = await cardToggled;
is(closeEvent.newState, "closed", "Event shows new state is closed");
is(closeEvent.oldState, "open", "Event shows old state is open");
ok(!card.detailsEl.open, "When the accordion is open, it should collapse when clicked");
}
function assertHeadingIconCardProperties(card) {
@ -130,7 +147,7 @@
headingText: "accordion heading",
}
);
assertAccordionCardProperties(document.getElementById("accordion-card"),
await assertAccordionCardProperties(document.getElementById("accordion-card"),
{
"data-l10n-id": "test-id-2",
"data-l10n-attrs": "heading",
@ -157,7 +174,7 @@
contentText: generatedSlotText,
}
);
assertAccordionCardProperties(accordionCard,
await assertAccordionCardProperties(accordionCard,
{
"data-l10n-id": "generated-id-2",
"data-l10n-attrs": "heading",

11
toolkit/content/widgets/moz-card/moz-card.mjs
View File

@ -70,7 +70,7 @@ export default class MozCard extends MozLitElement {
cardTemplate() {
if (this.type === "accordion") {
return html`
<details id="moz-card-details">
<details id="moz-card-details" @toggle="${this.onToggle}">
<summary>${this.headingTemplate()}</summary>
<div id="content"><slot></slot></div>
</details>
@ -106,6 +106,15 @@ export default class MozCard extends MozLitElement {
this.detailsEl.open = force ?? !this.detailsEl.open;
}
onToggle() {
this.dispatchEvent(
new ToggleEvent("toggle", {
newState: this.detailsEl.open ? "open" : "closed",
oldState: this.detailsEl.open ? "closed" : "open",
})
);
}
render() {
return html`
<link