Bug 1873534 - moz-card should emit a toggle event when expanding or c…

…ollapsing. r=reusable-components-reviewers,mstriemer

Differential Revision: https://phabricator.services.mozilla.com/D210734

toolkit/content/tests/widgets/test_moz_card.html

@@ -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) {

toolkit/content/widgets/moz-card/moz-card.mjs

@@ -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