Adding Group

Test/Skeleton/state.test.js

@@ -0,0 +1,126 @@
+window.testSuites.push( class testState {
+
+    SimpleParagraphWithState() {
+        class File extends Shadow {
+            $form
+
+            render = () => {
+                p(this.form.data)
+            }
+        
+            constructor() {
+                super()
+            }
+        }
+
+        window.register(File, randomName("file"))
+        let form = {data: "asdf"}
+        const el = window.File(form)
+
+        if(!(el.firstChild?.matches("p"))) {
+            return `Child paragraph not rendered`
+        }
+        if(!(el.firstChild.innerText === "asdf")) {
+            return "Child para does not have inner text"
+        }
+    }
+
+    ParagraphConstructorChangeState() {
+        register(class File extends Shadow {
+            $name
+
+            render = () => {
+                p(this.name)
+            }
+        
+            constructor() {
+                super()
+            }
+        }, randomName("file"))
+
+
+        let name = "asdf"
+        const file = File(name)
+        file.name = "hey123"
+
+        if(file.firstChild.innerText !== "hey123") {
+            return "Paragraph did not react to change!"
+        }
+    }
+
+    LiteralDoesNotCreateFalseReactivity() {
+        register(class File extends Shadow {
+            $name = "asd"
+
+            render = () => {
+                p(this.name)
+                p("asd")
+            }
+        
+            constructor() {
+                super()
+            }
+        }, randomName("file"))
+
+
+        const file = File()
+        file.name = "hey123"
+
+        if(file.children[1].innerText === "hey123") {
+            return "Paragraph innertext falsely changed"
+        }
+    }
+
+    /*
+        State itself should check if the reactivity is based on an element or a standalone expression
+            If standalone, handle it
+            If element, push the info for initReactivity to handle it
+    */
+
+    TernaryInState() {
+        register(class File extends Shadow {
+            $name
+
+            render = () => {
+                p(this.name)
+                    .fontSize(this.name === "asdf" ? 16 : 32)
+            }
+        
+            constructor() {
+                super()
+            }
+        }, randomName("file"))
+
+        let name = "asdf"
+        const file = File(name)
+
+        if(file.style.fontSize !== "16px") {
+            return "fail"
+        }
+    }
+
+    StateWorksWithCustomStyleFunctions() {
+        // reactive setting needs to use the actual style functions
+
+        register(class File extends Shadow {
+            $paraWidth = 16
+
+            render = () => {
+                p("guppy")
+                    .width(this.paraWidth)
+            }
+        
+            constructor() {
+                super()
+            }
+        }, randomName("file"))
+
+        const file = File()
+        file.paraWidth = 18
+        
+        if(file.firstChild.style.width !== "18px") {
+            return "Width did not reactively change!"
+        }
+    }
+    
+})