Files
pyscript/pyscript.core/test/pyscript_dom/index.html
Fabio Pliger e81830a2ea Value property to PyDom.Element and ElementCollection (#1828)
* add base test for input value field

* add value property to Element

* add test for non supported element

* prevent users to set value attribute on elements that do not support it

* add test for setting value on collections

* add value property to collection and add more tests

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

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

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
2023-11-01 08:33:38 -07:00

111 lines
3.9 KiB
HTML

<html lang="en">
<head>
<title>PyperCard PyTest 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="run_tests.py" config="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>
<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>
<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>