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

describe("SVG-rendering test", () => {
    test("Simple", async () => {
        let makeSpec = (stroke, strokeWidth) => (
            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"
                 stroke={stroke}>
                <g fill="none" fill-rule="evenodd">
                    <g transform="translate(1 1)" stroke-width={strokeWidth}>
                        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
                        <path d="M36 18c0-9.94-8.06-18-18-18">
                            <animateTransform
                                attributeName="transform"
                                type="rotate"
                                from="0 18 18"
                                to="360 18 18"
                                dur="1s"
                                repeatCount="indefinite"/>
                        </path>
                    </g>
                </g>
            </svg>
        )
        let initialVSpec = makeSpec("#000", 2);
        let rendered = render(initialVSpec);
        let container = testContainer(rendered);
        
        expect(container.innerHTML).toBe([
            `<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">`,
            `<g fill="none" fill-rule="evenodd">`,
            `<g transform="translate(1 1)" stroke-width="2">`,
            `<circle stroke-opacity=".5" cx="18" cy="18" r="18">`,
            `</circle>`,
            `<path d="M36 18c0-9.94-8.06-18-18-18">`,
            `<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite">`,
            `</animateTransform>`,
            `</path>`,
            `</g>`,
            `</g>`,
            `</svg>`
        ].join(''));
        
        let updatedVSpec = makeSpec("#FFF", 4);
        render(updatedVSpec, { host: rendered, old: initialVSpec });
        
        expect(container.innerHTML).toBe([
            `<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#FFF">`,
            `<g fill="none" fill-rule="evenodd">`,
            `<g transform="translate(1 1)" stroke-width="4">`,
            `<circle stroke-opacity=".5" cx="18" cy="18" r="18">`,
            `</circle>`,
            `<path d="M36 18c0-9.94-8.06-18-18-18">`,
            `<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite">`,
            `</animateTransform>`,
            `</path>`,
            `</g>`,
            `</g>`,
            `</svg>`
        ].join(''));
    });
});