Files
pyscript/pyscript.core/test/pyscript_dom/index.html
Martin 6c938dfe3b Override __getattr__ and __setattr__ on ElementCollection. (#2116)
* Override __getattr__ and __setattr__ on ElementCollection.

* fix: bug when using a string to query an ElementCollection.

* Use Element.find when indexing ElementCollection with a string.

* For consistency also have a find method on ElementCollection.

* ElementCollection.find now returns a collection of collections :)

* fix tests: for textContent

* Revert to extend for ElementCollection.find :)

* Make element_from_dom a classmethod Element.from_dom

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* rename: Element.from_dom -> Element.from_dom_element

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* PyCharm warning sweep.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Workaround for mp not allowing setting via __dict__

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
2024-07-22 10:32:37 -05:00

131 lines
4.6 KiB
HTML

<html lang="en">
<head>
<title>PyDom Test Suite</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../../dist/core.css">
<script type="module" src="../../dist/core.js"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:100,400");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:before, *:after {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
}
body {
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px;
}
h1 { font-size: 24px; font-weight: 700; line-height: 26.4px; }
h2 { font-size: 14px; font-weight: 700; line-height: 15.4px; }
#tests-terminal{
padding: 20px;
}
</style>
</head>
<body>
<script type="py" src="/test/pyscript_dom/run_tests.py" config="/test/pyscript_dom/tests.toml"></script>
<h1>pyscript.dom Tests</h1>
<p>You can pass test parameters to this test suite by passing them as query params on the url.
For instance, to pass "-v -s --pdb" to pytest, you would use the following url:
<label style="color: blue">?-v&-s&--pdb</label>
</p>
<div id="tests-terminal"></div>
<template id="test_card_with_element_template">
<p>This is a test. {foo}</p>
</template>
<div id="test_id_selector" style="visibility: hidden;">You found test_id_selector</div>
<div id="test_class_selector" class="a-test-class" style="visibility: hidden;">You found test_class_selector</div>
<div id="test_selector_w_children" class="a-test-class" style="visibility: hidden;">
<div id="test_selector_w_children_child_1" class="a-test-class" style="visibility: hidden;">Child 1</div>
<div id="test_selector_w_children_child_2" style="visibility: hidden;">Child 2</div>
</div>
<div id="div-no-classes"></div>
<div style="visibility: hidden;">
<h2>Test Read and Write</h2>
<div id="test_rr_div">Content test_rr_div</div>
<h3 id="test_rr_h3">Content test_rr_h3</h3>
<div id="multi-elem-div" class="multi-elems">Content multi-elem-div</div>
<p id="multi-elem-p" class="multi-elems">Content multi-elem-p</p>
<h2 id="multi-elem-h2" class="multi-elems">Content multi-elem-h2</h2>
<form>
<input id="test_rr_input_text" type="text" value="Content test_rr_input_text">
<input id="test_rr_input_button" type="button" value="Content test_rr_input_button">
<input id="test_rr_input_email" type="email" value="Content test_rr_input_email">
<input id="test_rr_input_password" type="password" value="Content test_rr_input_password">
</form>
<select id="test_select_element"></select>
<select id="test_select_element_w_options">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
</select>
<select id="test_select_element_to_clear">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="4">Option 4</option>
</select>
<select id="test_select_element_to_remove">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<div id="element-creation-test"></div>
<button id="a-test-button">I'm a button to be clicked</button>
<button>I'm another button you can click</button>
<button id="a-third-button">2 is better than 3 :)</button>
<div id="element-append-tests"></div>
<p class="collection"></p>
<div class="collection"></div>
<h3 class="collection"></h3>
<div id="element_attribute_tests"></div>
</div>
<script defer>
console.log("remapping console.log")
const terminalDiv = document.getElementById("tests-terminal");
const log = console.log.bind(console)
let testsStarted = false;
console.log = (...args) => {
let txt = args.join(" ");
let token = "<br>";
if (txt.endsWith("FAILED"))
token = " ❌<br>";
else if (txt.endsWith("PASSED"))
token = " ✅<br>";
if (testsStarted)
terminalDiv.innerHTML += args.join(" ") + token;
log(...args)
// if we got the flag that tests are starting, then we can start logging
if (args.join(" ") == "tests starting")
testsStarted = true;
}
</script>
</body>
</html>