import { render, Host } from "@cerxes/csx";
import { testContainer } from "../utils/test-container";

describe("Basic render-options", () => {
    test("opts.host", async () => {
        let startElement = render(<div />);
        let container = testContainer([startElement]);
        
        render(<Host style="width: 10em">Contents</Host>, {host: startElement});
        
        expect(container.innerHTML).toBe(
            `<div style="width: 10em">Contents</div>`
        );
    });
    
    test("opts.vnode", async () => {
        let container = testContainer();
        
        let initialVSpec = (
            <Host>
                <h1>Initial title</h1>
            </Host>
        );
        
        let updatedVSpec = (
            <Host>
                <h1>Updated title</h1>
            </Host>
        );
        render(initialVSpec, {host: container});
        
        // Initial
        expect(container.innerHTML).toBe(
            `<h1>Initial title</h1>`
        );
    
        render(updatedVSpec, {host: container, old: initialVSpec});
        
        // Updated
        expect(container.innerHTML).toBe(
            `<h1>Updated title</h1>`
        );
    });
});