Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Multiline editor placeholder hints test</title>
<link
rel="stylesheet"
/>
<link rel="stylesheet" href="chrome://global/skin/global.css" />
<script src="../../../../../toolkit/content/tests/widgets/lit-test-helpers.js"></script>
<script
type="module"
src="chrome://browser/content/multilineeditor/multiline-editor.mjs"
></script>
<script>
let html;
let testHelpers;
add_setup(async function setup() {
testHelpers = new LitTestHelpers();
({ html } = await testHelpers.setupLit());
testHelpers.setupTests({
templateFn: (attributes) => html`<moz-multiline-editor ${attributes}></moz-multiline-editor>`,
});
});
add_task(async function testPlaceholderHintsRendered() {
const result = await testHelpers.renderTemplate();
const editor = result.querySelector("moz-multiline-editor");
editor.placeholder = "Primary placeholder";
editor.placeholderHints = ["Hint one", "Hint two"];
await editor.updateComplete;
const carousel = editor.shadowRoot.querySelector(".placeholder-hints");
ok(carousel, "Placeholder carousel is rendered");
const items = carousel.querySelectorAll("li");
is(items.length, 3, "Carousel has expected number of items");
is(items[0].textContent, "Primary placeholder", "First item is primary placeholder");
is(items[1].textContent, "Hint one", "Second item is first hint");
is(items[2].textContent, "Hint two", "Third item is second hint");
});
add_task(async function testPlaceholderHintsNotRenderedWhenEmpty() {
const result = await testHelpers.renderTemplate();
const editor = result.querySelector("moz-multiline-editor");
editor.placeholder = "Just a placeholder";
editor.placeholderHints = [];
await editor.updateComplete;
const carousel = editor.shadowRoot.querySelector(".placeholder-hints");
ok(!carousel, "Placeholder carousel is not rendered when hints are empty");
const placeholder = editor.shadowRoot.querySelector(".placeholder");
ok(placeholder, "Regular placeholder is rendered instead");
});
add_task(async function testPlaceholderHintsVisibilityToggles() {
const result = await testHelpers.renderTemplate();
const editor = result.querySelector("moz-multiline-editor");
editor.placeholder = "Primary placeholder";
editor.placeholderHints = ["Hint one"];
await editor.updateComplete;
ok(
editor.shadowRoot.querySelector(".placeholder-hints"),
"Carousel visible when empty"
);
editor.value = "Some text";
await editor.updateComplete;
ok(
!editor.shadowRoot.querySelector(".placeholder-hints"),
"Carousel hidden with content"
);
editor.value = "";
await editor.updateComplete;
ok(
editor.shadowRoot.querySelector(".placeholder-hints"),
"Carousel visible again when cleared"
);
});
add_task(async function testShowPlaceholderAnimation() {
const result = await testHelpers.renderTemplate();
const editor = result.querySelector("moz-multiline-editor");
editor.placeholder = "Primary placeholder";
editor.placeholderHints = ["Hint one", "Hint two"];
await editor.updateComplete;
ok(
!editor.hasAttribute("show-placeholder-animation"),
"Animation disabled by default"
);
editor.showPlaceholderAnimation = true;
await editor.updateComplete;
ok(
editor.hasAttribute("show-placeholder-animation"),
"Attribute is removed when showPlaceholderAnimation is false"
);
const carousel = editor.shadowRoot.querySelector(".placeholder-hints");
ok(carousel, "Carousel is still rendered when animation is disabled");
const items = carousel.querySelectorAll("li");
is(items.length, 3, "All placeholder items are still present");
editor.showPlaceholderAnimation = true;
await editor.updateComplete;
ok(
editor.hasAttribute("show-placeholder-animation"),
"Attribute is set when showPlaceholderAnimation is true"
);
});
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
</body>
</html>