Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozPromo tests</title>
<link
rel="stylesheet"
/>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<script
type="module"
src="chrome://global/content/elements/moz-promo.mjs"
></script>
</head>
<body>
<p id="display"></p>
<div id="content">
<moz-promo
id="promoMessage"
heading="Heading"
message="Test message"
></moz-promo>
<moz-promo id="noProvidedHeadingOrMessage"></moz-promo>
<moz-promo
id="defaultType"
heading="Default type"
type="default"
></moz-promo>
<moz-promo
id="vibrantType"
heading="Vibrant type"
type="vibrant"
></moz-promo>
<moz-promo id="actionsPromo" heading="Actions slot" type="default">
<button slot="actions">Action button</button>
</moz-promo>
<moz-promo
id="supportLinkPromo"
heading="Support link slot"
type="vibrant"
>
<a slot="support-link" href="#learn-more">Learn more</a>
</moz-promo>
</div>
<pre id="test"></pre>
<script class="testbody" type="application/javascript">
function assertContainersAlignment(testPromo) {
let imageAlignment = testPromo.imageAlignment;
is(
testPromo.imageSrc,
"chrome://global/skin/illustrations/about-license.svg",
"imageSrc should not change when modifying imageAlignment."
);
let container = testPromo.shadowRoot.querySelector(".container");
let children = container.children;
is(children.length, 2, "There should still be only two containers.");
if (imageAlignment == "end" || imageAlignment == "center") {
is(
children[0].className,
"text-container",
`The text container should be before the image container when the image is aligned at the ${imageAlignment}.`
);
is(
children[1].className,
"image-container",
`The image container should be after the text container when the image is aligned at the ${imageAlignment}.`
);
}
if (imageAlignment == "start") {
is(
children[0].className,
"image-container",
"The image container should be before the text container when the image is aligned at the start."
);
is(
children[1].className,
"text-container",
"The text container should be after the image container when the image is aligned at the start."
);
}
}
add_task(async function test_component_declaration() {
const mozPromo = document.querySelector("#promoMessage");
ok(mozPromo, "moz-promo component is rendered");
const heading = mozPromo.shadowRoot.querySelector(".heading");
is(
heading.textContent.trim(),
"Heading",
"Heading is correctly rendered"
);
const message = mozPromo.shadowRoot.querySelector(".message");
is(
message.textContent.trim(),
"Test message",
"Message is correctly rendered"
);
});
add_task(async function test_heading_and_message_display() {
const mozPromo = document.querySelector("#noProvidedHeadingOrMessage");
let heading = mozPromo.shadowRoot.querySelector(".heading");
let message = mozPromo.shadowRoot.querySelector(".message");
ok(
!heading,
"Heading element is not displayed if it hasn't been initialized"
);
ok(
!message.textContent.trim(),
"Message element has no text if it hasn't been initialized"
);
mozPromo.heading = "Dynamically added heading";
await mozPromo.updateComplete;
heading = mozPromo.shadowRoot.querySelector(".heading");
is(
heading.textContent.trim(),
"Dynamically added heading",
"New heading element is displayed"
);
mozPromo.message = "Dynamically added message";
await mozPromo.updateComplete;
message = mozPromo.shadowRoot.querySelector(".message");
is(
message.textContent.trim(),
"Dynamically added message",
"New message element is displayed"
);
});
add_task(async function test_promo_types() {
const defaultMozPromo = document.querySelector("#defaultType");
const vibrantMozPromo = document.querySelector("#vibrantType");
is(
defaultMozPromo.getAttribute("type"),
"default",
"Assigned type should not change during initial lifecycle"
);
is(
vibrantMozPromo.getAttribute("type"),
"vibrant",
"Assigned type should not change during initial lifecycle"
);
let defaultStyles = window.getComputedStyle(defaultMozPromo);
let vibrantStyles = window.getComputedStyle(vibrantMozPromo);
// We are not testing the validity of the values assigned to the
// background-color. We are ensuring the colors change
// appropriate when using the "default" or "vibrant" types of
// moz-promo.
let defaultBackgroundColor = defaultStyles.getPropertyValue(
"--promo-background-color"
);
let vibrantBackgroundColor = vibrantStyles.getPropertyValue(
"--promo-background-color"
);
isnot(
defaultBackgroundColor,
vibrantBackgroundColor,
"Each type should have a unique background color"
);
// Now we are going to swap the types of the elements and assert
// that the background colors correctly changed;
defaultMozPromo.type = "vibrant";
vibrantMozPromo.type = "default";
await defaultMozPromo.updateComplete;
await vibrantMozPromo.updateComplete;
let newDefaultBackgroundColor = defaultStyles.getPropertyValue(
"--promo-background-color"
);
let newVibrantBackgroundColor = vibrantStyles.getPropertyValue(
"--promo-background-color"
);
is(
newDefaultBackgroundColor,
vibrantBackgroundColor,
"The default promo was switched to the vibrant type, the background color should be updated"
);
is(
newVibrantBackgroundColor,
defaultBackgroundColor,
"The vibrant promo was switched to the default type, the background color should be updated"
);
});
add_task(async function test_image_alignment() {
let testBody = document.getElementById("content");
let testPromo = document.createElement("moz-promo");
testPromo.id = "test-promo";
testPromo.imageSrc =
"chrome://global/skin/illustrations/about-license.svg";
testBody.append(testPromo);
await testPromo.updateComplete;
ok(
document.getElementById("test-promo"),
"Generated moz-promo should be added to the DOM"
);
is(
testPromo.imageSrc,
"chrome://global/skin/illustrations/about-license.svg",
"imageSrc should not change when moz-promo is added to the document"
);
is(
testPromo.imageAlignment,
"start",
"imageAlignment should be set to 'start' by default"
);
// Assert that the logical ordering of the DOM nodes occurs when changing
// iconAlignment
assertContainersAlignment(testPromo);
testPromo.imageAlignment = "end";
await testPromo.updateComplete;
assertContainersAlignment(testPromo);
testPromo.imageAlignment = "center";
await testPromo.updateComplete;
assertContainersAlignment(testPromo);
});
add_task(async function test_actions_slot() {
let actionsPromo = document.getElementById("actionsPromo");
ok(
actionsPromo,
"Promo element should exist when using an element for the actions slot"
);
let actionsButton = actionsPromo.querySelector("button");
is(
actionsPromo.actionsSlot.assignedElements()[0],
actionsButton,
"Slotted button is correctly assigned"
);
actionsButton.remove();
await actionsPromo.updateComplete;
is(
actionsPromo.actionsSlot.assignedElements().length,
0,
"The actions slot updates correctly when the slotted element is removed"
);
actionsPromo.append(actionsButton);
await actionsPromo.updateComplete;
is(
actionsPromo.actionsSlot.assignedElements()[0],
actionsButton,
"Adding the actions button back to the promo element updates the slotted element correctly"
);
});
add_task(async function test_support_link_slot() {
let supportLinkPromo = document.getElementById("supportLinkPromo");
ok(
supportLinkPromo,
"Promo element should exist when using an element for the support-link slot"
);
let supportLink = supportLinkPromo.querySelector("a");
is(
supportLinkPromo.supportLinkSlot.assignedElements()[0],
supportLink,
"Slotted support link is correctly assigned"
);
supportLink.remove();
await supportLinkPromo.updateComplete;
is(
supportLinkPromo.supportLinkSlot.assignedElements().length,
0,
"The support-link slot updates correctly when the slotted element is removed"
);
supportLinkPromo.append(supportLink);
await supportLinkPromo.updateComplete;
is(
supportLinkPromo.supportLinkSlot.assignedElements()[0],
supportLink,
"Adding the support link back to the promo element updates the slotted element correctly"
);
});
</script>
</body>
</html>