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

describe("Key-property tests", () => {
    test("Keyed list", async () => {
        let renderedIndexes = [];
        let initIndexes = [0, 1, 2, 3];
        
        let makeSpec = (targetList, indexes)=>(
            <ul>
                {
                    indexes.map(index => (
                        <li id={`li_${index}`} key={index} ref={(el) => targetList[ index ] = el}>
                            {index}
                        </li>
                    ))
                }
            </ul>
        );
        
        let initialVSpec = makeSpec(renderedIndexes, initIndexes);
        
        let rendered = render(initialVSpec);
        let container = testContainer(rendered);
        
        expect(container.innerHTML).toBe(
            [
                `<ul>`,
                ...initIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
                `</ul>`
            ].join('')
        );
        
        expect(renderedIndexes.length).toBe(4);
        for(let rendered of renderedIndexes){
            expect(rendered).not.toBeUndefined();
        }
        
        let reorderedIndexes = [3,2,1,0];
        let rerenderedIndexes = renderedIndexes.slice();
        let updatedVSpec =  makeSpec(rerenderedIndexes, reorderedIndexes);
        render(updatedVSpec, {host: rendered, old: initialVSpec});// Is this host right? it seems inconsistent and the source of our bug (as it is probably also misused in custom-elements)
    
        // Updated
        expect(container.innerHTML).toBe(
            [
                `<ul>`,
                ...reorderedIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
                `</ul>`
            ].join('')
        );
    
        // Validate that items were merely re-arranged and not re-created
        expect(rerenderedIndexes.length).toBe(4);
        for(let i=0; i<4; ++i){
            let initRendered = renderedIndexes[i];
            let reorderedRendered = rerenderedIndexes[i];
            expect(initRendered === reorderedRendered).toBe(true); // These should've remained the same
        }
    });
});