mirror of
https://github.com/Feodor2/Mypal68.git
synced 2025-06-18 14:55:44 -04:00
117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Test the ObservedPropertiesMixin
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test the ObservedPropertiesMixin</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="payments_common.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
</head>
|
|
<body>
|
|
<p id="display">
|
|
<test-element id="el1" one="foo" two-word="bar"></test-element>
|
|
</p>
|
|
<div id="content" style="display: none">
|
|
|
|
</div>
|
|
<pre id="test">
|
|
</pre>
|
|
<script type="module">
|
|
/** Test the ObservedPropertiesMixin **/
|
|
|
|
import ObservedPropertiesMixin from "../../res/mixins/ObservedPropertiesMixin.js";
|
|
|
|
class TestElement extends ObservedPropertiesMixin(HTMLElement) {
|
|
static get observedAttributes() {
|
|
return ["one", "two-word"];
|
|
}
|
|
|
|
render() {
|
|
this.textContent = JSON.stringify({
|
|
one: this.one,
|
|
twoWord: this.twoWord,
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("test-element", TestElement);
|
|
let el1 = document.getElementById("el1");
|
|
|
|
add_task(async function test_default_properties() {
|
|
is(el1.one, "foo", "Check .one matches @one");
|
|
is(el1.twoWord, "bar", "Check .twoWord matches @two-word");
|
|
let expected = `{"one":"foo","twoWord":"bar"}`;
|
|
is(el1.textContent, expected, "Check textContent");
|
|
});
|
|
|
|
add_task(async function test_set_properties() {
|
|
el1.one = "a";
|
|
el1.twoWord = "b";
|
|
is(el1.one, "a", "Check .one value");
|
|
is(el1.getAttribute("one"), "a", "Check @one");
|
|
is(el1.twoWord, "b", "Check .twoWord value");
|
|
is(el1.getAttribute("two-word"), "b", "Check @two-word");
|
|
let expected = `{"one":"a","twoWord":"b"}`;
|
|
await asyncElementRendered();
|
|
is(el1.textContent, expected, "Check textContent");
|
|
});
|
|
|
|
add_task(async function test_set_attributes() {
|
|
el1.setAttribute("one", "X");
|
|
el1.setAttribute("two-word", "Y");
|
|
is(el1.one, "X", "Check .one value");
|
|
is(el1.getAttribute("one"), "X", "Check @one");
|
|
is(el1.twoWord, "Y", "Check .twoWord value");
|
|
is(el1.getAttribute("two-word"), "Y", "Check @two-word");
|
|
let expected = `{"one":"X","twoWord":"Y"}`;
|
|
await asyncElementRendered();
|
|
is(el1.textContent, expected, "Check textContent");
|
|
});
|
|
|
|
add_task(async function test_async_render() {
|
|
// Setup
|
|
el1.setAttribute("one", "1");
|
|
el1.setAttribute("two-word", "2");
|
|
await asyncElementRendered(); // Wait for the async render
|
|
|
|
el1.setAttribute("one", "new1");
|
|
|
|
is(el1.one, "new1", "Check .one value");
|
|
is(el1.getAttribute("one"), "new1", "Check @one");
|
|
is(el1.twoWord, "2", "Check .twoWord value");
|
|
is(el1.getAttribute("two-word"), "2", "Check @two-word");
|
|
let expected = `{"one":"1","twoWord":"2"}`;
|
|
is(el1.textContent, expected, "Check textContent is still old value due to async rendering");
|
|
await asyncElementRendered();
|
|
expected = `{"one":"new1","twoWord":"2"}`;
|
|
is(el1.textContent, expected, "Check textContent now has the new value");
|
|
});
|
|
|
|
add_task(async function test_batched_render() {
|
|
// Setup
|
|
el1.setAttribute("one", "1");
|
|
el1.setAttribute("two-word", "2");
|
|
await asyncElementRendered();
|
|
|
|
el1.setAttribute("one", "new1");
|
|
el1.setAttribute("two-word", "new2");
|
|
|
|
is(el1.one, "new1", "Check .one value");
|
|
is(el1.getAttribute("one"), "new1", "Check @one");
|
|
is(el1.twoWord, "new2", "Check .twoWord value");
|
|
is(el1.getAttribute("two-word"), "new2", "Check @two-word");
|
|
let expected = `{"one":"1","twoWord":"2"}`;
|
|
is(el1.textContent, expected, "Check textContent is still old value due to async rendering");
|
|
await asyncElementRendered();
|
|
expected = `{"one":"new1","twoWord":"new2"}`;
|
|
is(el1.textContent, expected, "Check textContent now has the new value");
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|