import { VetproviehTable } from "../../../lib";

const template: HTMLTemplateElement = document.createElement("template");
template.innerHTML = "<p> {{item.position}}. {{item.name}} </p>";

var createObjectsToBind = () => {
    return [
        {
            position: 1,
            name: "Test1"
        },
        {
            position: 2,
            name: "Test2"
        }
    ];
}

describe('ConnectedCallback', () => {

    describe('objects=', () => {
        let objectsToBind = createObjectsToBind();


        var table: VetproviehTable;
        beforeEach(() => {
            table = new VetproviehTable(template);
            table.connectedCallback();
        });

        it('render objects', () => {
            let shadowRoot = table.shadowRoot as ShadowRoot;
            table.objects = objectsToBind;
            objectsToBind.forEach((object) => {
                expect(shadowRoot.innerHTML).toMatch(`<p> ${object.position}. ${object.name} </p>`);
            });
        });
    });

});

describe('delete', () => {

    var table: VetproviehTable;
    const template: HTMLTemplateElement = document.createElement("template");
    template.innerHTML = `<p> {{item.position}}. {{item.name}} <button data-action="delete"></button></p>`;
    beforeEach(() => {
        table = new VetproviehTable(template);
        table.connectedCallback();
    });

    it('should delete object', () => {
        let objectsToBind = createObjectsToBind();
        table.objects = objectsToBind;
        table.delete(1);
        expect(objectsToBind.length).toEqual(1);
        expect(objectsToBind[0].position).toEqual(1);
    });

    it('should delete object by clicking item', () => {
        let objectsToBind = createObjectsToBind();
        table.objects = objectsToBind;
        if (table.shadowRoot) {
            let btn = table.shadowRoot.querySelector("button") as HTMLButtonElement;
            
            btn.click();

            expect(objectsToBind.length).toEqual(1);
        }

    });
});