1 files changed, 158 insertions, 0 deletions
diff --git a/toolkit/content/tests/widgets/test_moz_card.html b/toolkit/content/tests/widgets/test_moz_card.html
new file mode 100644
index 0000000000..ef4e67d0fa
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_card.html
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>moz-card tests</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+  <script type="module" src="chrome://global/content/elements/moz-card.mjs"></script>
+  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
+</head>
+
+<body>
+  <p id="display"></p>
+  <div id="content">
+    <moz-card id="default-card" data-l10n-id="test-id-1" data-l10n-attrs="heading">
+      <div>TEST</div>
+    </moz-card>
+    <hr />
+
+    <moz-card id="accordion-card" data-l10n-id="test-id-2" data-l10n-attrs="heading" heading="accordion heading"
+      type="accordion">
+      <div>accordion test content</div>
+    </moz-card>
+    <hr />
+
+  </div>
+  <pre id="test"></pre>
+  <script>
+    let generatedSlotText = "generated slotted element";
+    let testHeading = "test heading";
+
+    function assertBasicProperties(card, expectedValues) {
+      info(`Testing card with ID: ${card.id}`);
+      ok(card, "The card element should exist");
+      is(card.localName, "moz-card", "The card should have the correct tag");
+      let l10nId = card.getAttribute("data-l10n-id");
+      let l10nAttrs = card.getAttribute("data-l10n-attrs");
+      if (expectedValues["data-l10n-id"]) {
+        is(l10nId, expectedValues["data-l10n-id"], "l10n id should be unchanged");
+      }
+      if (expectedValues["data-l10n-attrs"]) {
+        is(l10nAttrs, expectedValues["data-l10n-attrs"], "l10n attrs should be unchanged");
+      }
+      let cardContent = card.firstElementChild;
+      ok(cardContent, "The content should exist");
+      is(cardContent.textContent, expectedValues.contentText, "The content should be unchanged");
+      is(card.contentSlotEl.id, "content", "The content container should have the correct ID");
+      if (card.type != "accordion") {
+        is(card.contentSlotEl.getAttribute("aria-describedby"), "content", "The content container should be described by the 'content' slot");
+      }
+
+      if (expectedValues.headingText) {
+        ok(card.headingEl, "Heading should exist");
+        is(card.headingEl.textContent, expectedValues.headingText, "Heading should match the 'heading' attribute value");
+      }
+
+    }
+
+    function assertAccordionCardProperties(card, expectedValues) {
+      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");
+    }
+
+    async function generateCard(values) {
+      let card = document.createElement("moz-card");
+      for (let [key, value] of Object.entries(values)) {
+        card.setAttribute(key, value);
+      }
+      let div = document.createElement("div");
+      div.innerText = generatedSlotText;
+      card.appendChild(div);
+      document.body.appendChild(card);
+      await card.updateComplete;
+      document.body.appendChild(document.createElement("hr"));
+      return card;
+    }
+
+    add_task(async function testDefaultCard() {
+      assertBasicProperties(document.getElementById("default-card"),
+        {
+          "data-l10n-id": "test-id-1",
+          "data-l10n-attrs": "heading",
+          contentText: "TEST"
+        }
+      );
+
+      let defaultCard = await generateCard(
+        {
+          "data-l10n-id": "generated-id-1",
+          "data-l10n-attrs": "heading",
+          heading: testHeading,
+          id: "generated-default-card"
+        }
+      );
+
+      assertBasicProperties(defaultCard,
+        {
+          "data-l10n-id": "generated-id-1",
+          "data-l10n-attrs": "heading",
+          contentText: generatedSlotText,
+          heading: testHeading
+        }
+      );
+    });
+
+    add_task(async function testAccordionCard() {
+      assertBasicProperties(document.getElementById("accordion-card"),
+        {
+          "data-l10n-id": "test-id-2",
+          "data-l10n-attrs": "heading",
+          contentText: "accordion test content",
+          headingText: "accordion heading",
+        }
+      );
+      assertAccordionCardProperties(document.getElementById("accordion-card"),
+        {
+          "data-l10n-id": "test-id-2",
+          "data-l10n-attrs": "heading",
+          contentText: "accordion test content",
+          headingText: "accordion heading",
+        }
+      );
+
+      let accordionCard = await generateCard(
+        {
+          type: "accordion",
+          id: "generated-accordion-card",
+          "data-l10n-id": "generated-id-2",
+          "data-l10n-attrs": "heading",
+          heading: testHeading
+        }
+      );
+
+      assertBasicProperties(accordionCard,
+        {
+          "data-l10n-id": "generated-id-2",
+          "data-l10n-attrs": "heading",
+          headingText: testHeading,
+          contentText: generatedSlotText,
+        }
+      );
+      assertAccordionCardProperties(accordionCard,
+        {
+          "data-l10n-id": "generated-id-2",
+          "data-l10n-attrs": "heading",
+          headingText: testHeading,
+          contentText: generatedSlotText,
+        }
+      );
+    });
+
+  </script>
+</body>
+
+</html>