jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-03-04 17:01:19 -05:00
Code Issues Projects Releases Wiki Activity

[NEXT] Pydom (#1681)

Browse Source 
* add pyweb

* build

* add test file

* fix pydom example code

* remove old reference to js

* temporarily comment out query functions on BaseElement while rearranging code to reuse the same underlying logic accross PyDom and other elements

* add temp TODO comment to content as it breaks with template elements

* update pydom example to define code on external file

* fix name type while renaming document -> dom

* add real pydom test files

* add classes to dom scope

* __len__ to ElementCollection

* fix some of the old tests

* rename test from test_query_by_class to test_getitem_by_class

* change test for read and write multiple elements

* add find method to BaseElement

* fix remaining tests

* add Collection Tests

* add equality to Collection

* add test for collection style manipulation

* fix getter for style property and rename style related attribute from pop to remove

* add single element creation test

* remove append on BaseElement and add body and head to dom

* add test_create_element_child to verify child creation

* add children getter property to Element

* remove old code

* remove more old code, change style attribute from visibility to visible and now default getters on collection to return a list with the value of an attribute for every element in the collection

* remove more old code and add possibility to customize test flags via url

* add support to pass Js and pydom.Element elements to when decorator

* remove methods related to input type of elements until we have a better design for it

* rename _element to _js

* add test_when decorator with a ElementCollection input

* when decorator now supporte pydom.ElementCollection as input

* update pyscript.js

* remove useless variable from when decorator

* remove base.py from pyweb

* add nodes for append collection test and add better feedback on successes vs failure

* add tests and fix code for support of append Element and ElementCollection

* manage access to content attribute when tagname is template

* fix comment

---------

Co-authored-by: Fabio Pliger <fpliger@anaconda.com>
This commit is contained in:
Fabio Pliger
2023-09-14 13:31:23 -07:00
committed by GitHub
parent 9660976d1d
commit 00fdc73015
12 changed files with 771 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
pyscript.core/test/pyscript_dom/index.html Normal file
View File

@@ -0,0 +1,111 @@
<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_txt" type="text" value="Content test_rr_input_txt">
<input id="test_rr_input_btn" type="button" value="Content test_rr_input_btn">
<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) => {
log("---IN---");
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>