summaryrefslogtreecommitdiffstats
path: root/browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
commit2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
treeb80bf8bf13c3766139fbacc530efd0dd9d54394c /browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html')
-rw-r--r--browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html116
1 files changed, 116 insertions, 0 deletions
diff --git a/browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html b/browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html
new file mode 100644
index 0000000000..00dff76a5f
--- /dev/null
+++ b/browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html
@@ -0,0 +1,116 @@
+<!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>