114 lines
3.8 KiB
JavaScript
114 lines
3.8 KiB
JavaScript
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();
|
|
});
|
|
});
|
|
});
|