Add Brython + Brython unit test system

V3/assets/auto-liss/test.ts

@@ -1,7 +1,8 @@
 // @ts-ignore
-import addTest from "TESTS";
+import {addCodeTest} from "TESTS";
 
-await addTest({
+await addCodeTest({
+    files: "js",
     test: async (tagname: string) => {
 
         // @ts-ignore

V3/assets/auto-vanilla/test.ts

@@ -1,7 +1,10 @@
 // @ts-ignore
-import addTest from "TESTS";
+import {addCodeTest} from "TESTS";
+
+await addCodeTest({
+
+    files: "js",
 
-await addTest({
     test: async (tagname: string) => {
 
         // @ts-ignore

V3/assets/test-bry/index.bry

@@ -4,10 +4,4 @@ WebC = self.wrapjs(self.LISS())
 
 class DefaultExport(WebC):
     def __init__(this):
-        this.content.replaceChildren("Hello!")
-
-    def foo(this):
-        print( self.document.querySelector("test-bry").faa() )
-
-    def faa(this):
-        print(2)
+        this.content.replaceChildren("Hello (py)!")

V3/assets/test-bry/index.js

@@ -0,0 +1,8 @@
+
+export default class extends LISS() {
+    constructor() {
+        super();
+        this.content.replaceChildren("Hello (js)!")
+    }
+}
+

V3/components/playground/liss-playground/index.ts

@@ -27,19 +27,21 @@ class LISSPlayground extends PlaygroundArea {
 
     override generateIFrameContent() {
 
-        /*
-        const brython = this.host.hasAttribute("brython");
-        let p_js    = codes["page.js"   ];
-        if( brython )
-            p_js = `globalThis.__BRYTHON__.runPythonSource(\`${codes["page.bry"]}\`, "_");`;
-        */
+        let files: string = "";
+        if( this.codeLang === "bry")
+            files = "bry,html+css";
+        if( this.codeLang === "js")
+            files = "js,html+css";
 
         return buildTestPage({
+            // liss config
             liss   : `/${LISS.VERSION}/libs/LISS/index.js`,
             cdir   : `${this.klass.ASSETS_DIR}/`,
-            js     : this.codes["page.js"  ].getCode(),
+            files,
             sw     : `/${LISS.VERSION}/assets/sw.js`,
+            // page config
             html   : this.codes["page.html"].getCode(),
+            js     : this.codes["page.js"  ].getCode(),
             tagname: this.name!.split(':')[0],
         })
     }

V3/pages/playground/index.css

@@ -7,4 +7,8 @@ main {
     overflow-x: auto;
     /* TODO width */
     /* TODO height with scale+zoom... */
+}
+
+footer {
+    display: none;
 }

V3/src/define/autoload.ts

@@ -6,9 +6,16 @@ import whenPageLoaded from "@LISS/src/utils/DOM/whenPageLoaded";
 import fetchText      from "@LISS/src/utils/network/fetchText";
 import execute        from "@LISS/src/utils/execute";
 
-const script =  document.querySelector<HTMLElement>('script:is([liss-auto],[liss-cdir],[liss-sw])');
+const script =  document.querySelector<HTMLElement>('script:is([liss-auto],[liss-cdir],[liss-sw],[liss-files])');
+
+function parseLISSFiles(files: string|null|undefined) {
+    if( ! files )
+        return ["js", "bry", "html+css"]
+    return files.split(",");
+}
 
 export const LISS_MODE    = script?.getAttribute('liss-mode') ?? null;
+export const LISS_FILES   = parseLISSFiles( script?.getAttribute('liss-files') );
 export const DEFAULT_CDIR = script?.getAttribute('liss-cdir') ?? null;
 
 // TODO: default ?
@@ -25,7 +32,7 @@ export function autoload(cdir: string) {
     const SW: Promise<void> = new Promise( async (resolve) => {
 
         if( SW_PATH === null || SW_PATH === "") {
-            //console.warn("You are using LISS Auto mode without sw.js.");
+            console.info("You are using LISS Auto mode without sw.js.");
             return resolve();
         }
 
@@ -90,6 +97,40 @@ type loadComponent_Opts = {
 
 type Cstr<T> = (...args: any[]) => T;
 
+
+async function tryFile( compo_dir: string,
+                        ext: string,
+                        target:Record<string,string>): Promise<boolean> {
+
+    // special value...
+    if( ext === "html+css") {
+        const promises = [
+            fetchText(`${compo_dir}index.html`, true)!,
+            fetchText(`${compo_dir}index.css` , true)!
+        ];
+
+        let result = await Promise.all(promises);
+
+        if( result[0] === undefined)
+            return false;
+
+        target["html"] = result[0];
+        if( result[1] !== undefined)
+            target["css" ] = result[1];
+
+        return true;
+    }
+
+    const result = await fetchText(`${compo_dir}index.${ext}`, true);
+
+    if( result === undefined )
+        return false;
+
+    target[ext] = result;
+
+    return true;
+}
+
 export async function loadComponent<T extends HTMLElement = HTMLElement>(
 	tagname: string,
 	{
@@ -104,29 +145,14 @@ export async function loadComponent<T extends HTMLElement = HTMLElement>(
 
 	const compo_dir = `${cdir}${true_tagdir}/`;
 
-	const files: Record<string,string|undefined> = {};
-
-	// strats : JS -> Bry -> HTML+CSS (cf script attr).
-
-    files["js"] = await fetchText(`${compo_dir}index.js`, true);
-
-    if( files["js"] === undefined) {
+    const files: Record<string,string> = {};
+    let found = false;
+    for(let file of LISS_FILES)
+        if( found = await tryFile(compo_dir, file, files) )
+            break;
 
-        files["bry"] = await fetchText(`${compo_dir}index.bry`, true);      
-
-        if( files["bry"] === undefined ) {
-
-            const promises = [
-                fetchText(`${compo_dir}index.html`, true)!,
-                fetchText(`${compo_dir}index.css` , true)!
-            ];
-
-            [files["html"], files["css" ]] = await Promise.all(promises);
-
-            if( files["html"] === undefined )
-                throw new Error(`No files found for webcomponent ${tagname}`)
-        }
-    }
+    if( ! found )
+        throw new Error(`No files found for webcomponent ${tagname}`)
 
 	return await defineWebComponent(tagname, files, compo_dir);
 }

V3/src/define/define.ts

@@ -54,10 +54,6 @@ function WrapPythonClass(Klass: new(...args:any[]) => HTMLElement) {
 
             // @ts-ignore
             this[symbol] = bry;
-
-            console.warn("before call")
-
-            this.#call("foo");
         }
 
         #call(name: string, ...args: any[]) {

V3/src/utils/execute/bry.ts

@@ -26,7 +26,7 @@ def wrapjs(js_klass):
 			return this
 
 		def __getattr__(this, name: str):
-			print( name in this._js, var(this._js) )
+			#print( name in this._js, dir(this._js) )
 			return self.getProp(this._js, name)
 			#return this._js[name]
 

V3/src/utils/tests/buildTestPage.ts

@@ -1,9 +1,12 @@
 // <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.13.0/brython.min.js"></script>
 
 export default function buildTestPage(args: {
+        // liss config
         liss: string,
         cdir: string,
+        files?: string,
         sw ?: string,
+        // page config
         js  : string,
         html: string,
         tagname?: string
@@ -20,11 +23,16 @@ export default function buildTestPage(args: {
                     background-color: white;
                 }
             </style>
-            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js" defer></script>
+            ${
+                args.files === "" || args.files === undefined || args.files?.includes("bry")
+                    ? `<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js" defer></script>`
+                    : ""
+            }
             <script type="module" src='${args.liss}'
                     liss-sw="${args.sw ?? ""}"
                     liss-mode="auto-load"
                     liss-cdir="${args.cdir}"
+                    liss-files="${args.files ?? ""}"
             ></script>
             <script type="module">
                 ${args.js}

V3/tests/addTest.ts

@@ -26,26 +26,38 @@ type addTest_Opts = {
     test        : (tagname: string) => Promise<void>
 }
 
-export default async function addTest( {
-                                            page_html,
-                                            test_suffix = "",
-                                            test
-                                        }: addTest_Opts ) {
-
-    const tagname   = getComponentName();
-    const test_name = tagname + test_suffix;
-    const callback  = test;
+async function getHTMLPage(page_html: undefined|null|string, component_dir: string, tagname: string) {
 
     if( page_html === undefined ) {
 
         page_html = null;
-        const page_html_file = getComponentDir() + './page.html';
+        const page_html_file = component_dir + './page.html';
         if( await exists(page_html_file) )
             page_html = await Deno.readTextFile( page_html_file )
     }
     if( page_html === null )
         page_html = `<${tagname}></${tagname}>`;
 
+    return page_html as string;
+}
+
+export async function addCodeTest({
+    page_html,
+    test_suffix,
+    files,
+    tagname,
+    component_dir,
+    test
+}: addTest_Opts & {tagname?: string, component_dir?: string, files: "bry"|"js"|"html"|"bry,html+css"|"js,html+css"}) {
+
+    tagname       ??= getComponentName();
+    component_dir ??= getComponentDir();
+
+    const test_name = tagname + (test_suffix ?? "");
+    const callback  = test;
+
+    const html = await getHTMLPage(page_html, component_dir, tagname);
+
     let browser: keyof typeof browsers;
     for( browser in browsers) {
         for(const use_brython of /*["true", */["false"]) {
@@ -62,7 +74,8 @@ export default async function addTest( {
                                 body: buildTestPage({
                                     liss: "./libs/LISS/index.js",
                                     cdir: "./assets/",
-                                    html: page_html,
+                                    files,
+                                    html,
                                     js  : ``
                                 }),
                                 contentType: "text/html"
@@ -77,4 +90,27 @@ export default async function addTest( {
             });
         }
     }
+}
+
+export default async function addTest( {
+                                            page_html,
+                                            test_suffix = "",
+                                            test
+                                        }: addTest_Opts ) {
+
+    const tagname       = getComponentName();
+    const component_dir = getComponentDir();
+
+    page_html = await getHTMLPage(page_html, component_dir, tagname);
+
+    for(let files of ["js,html+css", "bry,html+css"] as const) {
+        await addCodeTest({
+            page_html,
+            files,
+            test_suffix: test_suffix + ":" + files,
+            test,
+            tagname,
+            component_dir,
+        })
+    }
 }

dist/prod/V3/assets/auto-liss/test.ts

@@ -1,7 +1,8 @@
 // @ts-ignore
-import addTest from "TESTS";
+import {addCodeTest} from "TESTS";
 
-await addTest({
+await addCodeTest({
+    files: "js",
     test: async (tagname: string) => {
 
         // @ts-ignore

dist/prod/V3/assets/auto-vanilla/test.ts

@@ -1,7 +1,10 @@
 // @ts-ignore
-import addTest from "TESTS";
+import {addCodeTest} from "TESTS";
+
+await addCodeTest({
+
+    files: "js",
 
-await addTest({
     test: async (tagname: string) => {
 
         // @ts-ignore

dist/prod/V3/assets/test-bry/index.bry

@@ -0,0 +1,7 @@
+from browser import self
+
+WebC = self.wrapjs(self.LISS())
+
+class DefaultExport(WebC):
+    def __init__(this):
+        this.content.replaceChildren("Hello (py)!")

dist/prod/V3/assets/test-bry/index.js

@@ -0,0 +1,8 @@
+
+export default class extends LISS() {
+    constructor() {
+        super();
+        this.content.replaceChildren("Hello (js)!")
+    }
+}
+

dist/prod/V3/assets/test-bry/test.ts

@@ -0,0 +1,14 @@
+// @ts-ignore
+/*
+import {test} from "TEST_HELPER";
+
+await test("cstr-params",
+    `<cstr-params></cstr-params>`,
+    async () => {
+
+        // @ts-ignore
+        await assertElemEquals('cstr-params', {
+            shadow_html: "HTML"
+        });
+    }
+)*/