import { shallowMount, mount } from "@vue/test-utils";
import loader from "./loader";

describe("loader.vue", () => {
    test("if it rendered the HTML element with class", () => {
        // Arrange/Act
        const wrapper = shallowMount(loader, {
            props: {},
        });

        // Assert
        expect(wrapper.find("div").exists()).toBeTruthy();
        expect(wrapper.find(".loader").exists()).toBeTruthy();
    });

    test("if it correctly passed props", () => {
        // Arrange/Act
        const wrapper = shallowMount(loader, {
            props: {
                loaderColor: "blue",
                loaderPosition: "left",
            },
        });

        // Assert
        expect(wrapper.props()).toMatchObject({
            loaderColor: "blue",
            loaderPosition: "left",
        });
    });

    describe("Blocking interaction on page", () => {
        test("Does capture clicks if enabled (default)", async () => {
            // Arrange
            const div = document.createElement("div");
            div.id = "parent";
            document.body.appendChild(div);

            const parentClickFn = jest.fn();

            div.addEventListener("click", parentClickFn);

            const wrapper = shallowMount(loader, {
                props: {},
                attachTo: "#parent",
            });

            // Act
            await wrapper.trigger("click");

            // Assert
            expect(parentClickFn).not.toBeCalled();

            // Cleanup
            document.body.removeChild(div);
        });

        test("Does not capture clicks if disabled", async () => {
            // Arrange
            const div = document.createElement("div");
            div.id = "parent";
            document.body.appendChild(div);

            const parentClickFn = jest.fn();

            div.addEventListener("click", parentClickFn);

            const wrapper = shallowMount(loader, {
                props: {
                    allowPageInteraction: true,
                },
                attachTo: "#parent",
            });

            // Act
            await wrapper.trigger("click");

            // Assert
            expect(parentClickFn).toBeCalled();

            // Cleanup
            document.body.removeChild(div);
        });
    });
});