import { render, CustomElement, Host, defineElement, state, prop } from "@cerxes/csx";
import { testContainer } from "../utils/test-container";
import { nextAnimationFrame } from "../utils/next-animation-frame";

describe("Function components", () => {
    /**
     * Assert that a basic component renders as expected
     */
    test("Simple example-component", async () => {
        
        function FuncComponent(props, children){
            return (
                <div {...props}>
                    <div className={"header"}>
                        Header
                    </div>
                    <div className={"content"}>
                        {children}
                    </div>
                </div>
            )
        }
        
        @defineElement('test-component')
        class TestComponent extends CustomElement{
            render(){
                return (
                    <FuncComponent className={"page"}>
                        I am example content
                    </FuncComponent>
                )
            }
        }
        
        let container = testContainer(
            render(<TestComponent/>)
        );
        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
        
        expect(
            container.innerHTML
        ).toBe([
            `<test-component>`,
            `<div class="page">`,
            `<div class="header">`,
            `Header`,
            `</div>`,
            `<div class="content">`,
            `I am example content`,
            `</div>`,
            `</div>`,
            `</test-component>`,
        ].join(''));
        
        document.body.removeChild(container);
    });
});