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

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

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

    test("applies loaderColor and loaderPosition as CSS classes on the loader element", () => {
        const wrapper = shallowMount(loader, {
            props: {
                loaderColor: "blue",
                loaderPosition: "left",
            },
        });

        const loaderElement = wrapper.find(".loader");
        expect(loaderElement.classes()).toContain("blue");
        expect(loaderElement.classes()).toContain("left");
        wrapper.unmount();
    });

    describe("Blocking interaction on page", () => {
        let parent;

        beforeEach(() => {
            parent = document.createElement("div");
            parent.id = "loader-test-parent";
            document.body.appendChild(parent);
        });

        afterEach(() => {
            document.body.querySelectorAll(".intercept-overlay").forEach((el) => el.remove());
            if (parent?.parentNode) {
                parent.parentNode.removeChild(parent);
            }
        });

        test("teleports intercept overlay to document.body when blocking is enabled", () => {
            const wrapper = mount(loader, {
                props: {},
                attachTo: "#loader-test-parent",
            });

            const overlayInBody = document.body.querySelector(".intercept-overlay");
            const overlayInParent = parent.querySelector(".intercept-overlay");

            expect(overlayInBody).toBeTruthy();
            expect(overlayInParent).toBeNull();
            expect(wrapper.find(".intercept-overlay").exists()).toBe(false);

            wrapper.unmount();
        });

        test("does not render intercept overlay when allowPageInteraction is true", () => {
            const wrapper = mount(loader, {
                props: {
                    allowPageInteraction: true,
                },
                attachTo: "#loader-test-parent",
            });

            expect(document.body.querySelector(".intercept-overlay")).toBeNull();
            expect(wrapper.find(".loader").exists()).toBe(true);

            wrapper.unmount();
        });

        test("clicking the teleported overlay does not propagate to document listeners", async () => {
            const documentClickFn = jest.fn();
            document.addEventListener("click", documentClickFn);

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

            const overlay = document.body.querySelector(".intercept-overlay");
            expect(overlay).toBeTruthy();

            overlay.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));

            expect(documentClickFn).not.toHaveBeenCalled();

            document.removeEventListener("click", documentClickFn);
            wrapper.unmount();
        });

        test("teleports overlay to body even when loader is mounted inside a button", async () => {
            const button = document.createElement("button");
            button.type = "button";
            parent.appendChild(button);

            const wrapper = mount(loader, {
                props: {},
                attachTo: button,
            });

            const overlayInBody = document.body.querySelector(".intercept-overlay");
            const overlayInButton = button.querySelector(".intercept-overlay");

            expect(overlayInBody).toBeTruthy();
            expect(overlayInButton).toBeNull();

            wrapper.unmount();
        });
    });
});