window.testSuites.push( class testState {
    SimpleState() {
        class Home extends Shadow {
            state = {
                pathname: "/"
            }

            render() {
                VStack(() => {
                    p("hi")
                        .top(() => {return (this.state.pathname === "/" ? [11, vw] : [7, vw])})
                })
                .onAppear(() => {
                    this.state.pathname = "/asd"
                })
            }
        }

        register(Home, randomName("home"))
        window.Home()
        if(!($("p").style.top === "7vw")) return "state was not respeccted"
    }

    StateArrayPush() {
        class Home extends Shadow {
            state = {
                logs: []
            }

            render() {
                VStack(() => {
                    p("hi")
                        .fontSize(() => {return this.state.logs.length > 0 ? [2, em] : [1, em]})
                })
                .onAppear(() => {
                    this.state.logs.push("one")
                })
            }
        }

        register(Home, randomName("home"))
        window.Home()

        if(!($("p").style.fontSize === "2em")) return "state did not update!"
    }

    SimpleStack() {
        class Home extends Shadow {
            state = {
                logs: []
            }

            render() {
                VStack(() => {
                    this.state.logs.forEach((log) => {
                        p(log)
                    })
                })
                .onAppear(() => {
                    this.state.logs.push("one")
                    this.state.logs.push("two")
                })
            }
        }

        register(Home, randomName("home"))
        window.Home()

        if(!$("p")) return "no p's rendered"
        if($$("p")[0].innerText !== "one") return "state did not update!"
        if($$("p")[1].innerText !== "two") return "state did not update!"
    }
})