diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /toolkit/content/tests/widgets/test_moz_card.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/tests/widgets/test_moz_card.html')
| -rw-r--r-- | toolkit/content/tests/widgets/test_moz_card.html | 158 |
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> |