diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /browser/components/payments/test/mochitest/test_ObservedPropertiesMixin.html | |
parent | Initial commit. (diff) | |
download | firefox-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.html | 116 |
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> |