Unit test updates + compatibility changes.

src/digital-components/modal/ux-components/modal-button-main/modal-button-main.spec.js

@@ -36,48 +36,6 @@ describe("modal-button-main.vue", () => {
         expect(button.attributes()["aria-disabled"]).toEqual("true");
     });
 
-    it("Should return loader color", async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            modalButtonMain,
-            setupMocks({
-                propsData: {
-                    loaderColor: "blue",
-                    loaderEnabled: true,
-                },
-            })
-        );
-
-        // Act
-        wrapper.vm.clicked();
-        await nextTick();
-
-        // Assert
-        const loader = wrapper.find("loader-stub");
-        expect(loader.attributes("class")).toContain("blue");
-    });
-
-    it("Should return loader position", async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            modalButtonMain,
-            setupMocks({
-                propsData: {
-                    loaderPosition: "right",
-                    loaderEnabled: true,
-                },
-            })
-        );
-
-        // Act
-        wrapper.vm.clicked();
-        await nextTick();
-
-        // Assert
-        const loader = wrapper.find("loader-stub");
-        expect(loader.attributes("class")).toContain("right");
-    });
-
     it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
         // Arrange
         const wrapper = shallowMount(

src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue

@@ -13,7 +13,8 @@
         <loader
             class="ms-2"
             v-if="isLoaderDisplayed && !suppressLoader"
-            v-bind:class="[this.loaderColor, this.loaderPosition]" />
+            :loaderColor="loaderColor"
+            :loaderPosition="loaderPosition" />
     </button>
 </template>
 

src/fmg-components/nav-bar/nav-bar.spec.js

@@ -33,21 +33,15 @@ describe("nav-bar.vue", () => {
         expect(wrapper.componentVM.customButtontext).toBe("newText");
     });
 
-    test("should run removeLoader fn on buttonMain and return false for onkeydown fn", async () => {
+    test("should run removeLoader on buttonMain", async () => {
-        // Arrange
         const wrapper = mount(navbar, {
             mixins: [mockMixin],
         });
 
-        // Act
         wrapper.vm.$refs.buttonMain.removeLoader = jest.fn();
         wrapper.vm.removeLoader();
-        const spy = jest.spyOn(document, "onkeydown");
-        document.onkeydown();
 
-        // Assert
         expect(wrapper.vm.$refs.buttonMain.removeLoader).toHaveBeenCalled();
-        expect(spy).toReturnWith(true);
     });
 });
 

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -27,7 +27,7 @@
                         </span>
                         <loader
                             v-if="isLoaderDisplayed"
-                            :loaderPosition="left"
+                            loaderPosition="left"
                             :allowPageInteraction="true" />
                     </div>
                 </div>

src/ux-components/button-main/button-main.spec.js

@@ -36,48 +36,6 @@ describe("buttonMain.vue", () => {
         expect(button.attributes()["aria-disabled"]).toEqual("true");
     });
 
-    it("Should return loader color", async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            buttonMain,
-            setupMocks({
-                propsData: {
-                    loaderColor: "blue",
-                    loaderEnabled: true,
-                },
-            })
-        );
-
-        // Act
-        wrapper.vm.clicked();
-        await nextTick();
-
-        // Assert
-        const loader = wrapper.find("loader-stub");
-        expect(loader.attributes("class")).toContain("blue");
-    });
-
-    it("Should return loader position", async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            buttonMain,
-            setupMocks({
-                propsData: {
-                    loaderPosition: "right",
-                    loaderEnabled: true,
-                },
-            })
-        );
-
-        // Act
-        wrapper.vm.clicked();
-        await nextTick();
-
-        // Assert
-        const loader = wrapper.find("loader-stub");
-        expect(loader.attributes("class")).toContain("right");
-    });
-
     it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
         // Arrange
         const wrapper = shallowMount(

src/ux-components/intercept-overlay/intercept-overlay.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils";
+import { mount, shallowMount } from "@vue/test-utils";
 import interceptOverlay from "./intercept-overlay";
 
 describe("intercept-overlay.vue", () => {
@@ -43,4 +43,30 @@ describe("intercept-overlay.vue", () => {
             wrapper.unmount();
         });
     });
+
+    describe("click interception", () => {
+        test("captureClick prevents default and stops propagation", () => {
+            const wrapper = shallowMount(interceptOverlay);
+            const event = { preventDefault: jest.fn(), stopPropagation: jest.fn() };
+            wrapper.vm.captureClick(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(event.stopPropagation).toHaveBeenCalled();
+            wrapper.unmount();
+        });
+
+        test("clicking the overlay does not propagate to document listeners", async () => {
+            const documentClickFn = jest.fn();
+            document.addEventListener("click", documentClickFn);
+
+            const wrapper = mount(interceptOverlay, { attachTo: document.body });
+
+            const overlay = wrapper.find(".intercept-overlay");
+            await overlay.trigger("click");
+
+            expect(documentClickFn).not.toHaveBeenCalled();
+
+            document.removeEventListener("click", documentClickFn);
+            wrapper.unmount();
+        });
+    });
 });

src/ux-components/list-button/list-button.spec.js

@@ -31,59 +31,6 @@ describe("list-button.vue", () => {
             expect(loader.exists()).toBe(true);
         });
 
-        it("Should return loader color", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                mockData: {
-                    global: {
-                        mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
-                            GaActions: GaActions,
-                            pushEventToGA: jest.fn(),
-                        },
-                    },
-                    propsData: {
-                        loaderColor: "blue",
-                        selectingInitiatesLoad: true,
-                    },
-                },
-            });
-
-            // Act
-            wrapper.vm.selectedValue = "something";
-            await wrapper.vm.$nextTick();
-
-            // Assert
-            const loader = wrapper.findComponent({ name: "loader" });
-            expect(loader.attributes("class")).toContain("blue");
-        });
-
-        it("Should return loader position", async () => {
-            // Act
-            const { wrapper } = setupMocks({
-                mockData: {
-                    global: {
-                        mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
-                            GaActions: GaActions,
-                            pushEventToGA: jest.fn(),
-                        },
-                    },
-                    propsData: {
-                        loaderPosition: "right",
-                        selectingInitiatesLoad: true,
-                    },
-                },
-            });
-
-            // Act
-            wrapper.vm.selectedValue = "something";
-            await wrapper.vm.$nextTick();
-
-            // Assert
-            const loader = wrapper.findComponent({ name: "loader" });
-            expect(loader.attributes("class")).toContain("right");
-        });
     });
 
     describe("baseInputButton checks", () => {

src/ux-components/list-button/list-button.vue

@@ -18,7 +18,8 @@
             </span>
             <loader
                 v-if="isLoaderDisplayed && selectingInitiatesLoad"
-                :class="[this.loaderColor, this.loaderPosition]" />
+                :loaderColor="loaderColor"
+                :loaderPosition="loaderPosition" />
         </div>
     </baseInputButton>
 </template>

src/ux-components/loader/loader.spec.js

@@ -3,18 +3,16 @@ 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();
+        wrapper.unmount();
     });
 
-    test("if it correctly passed props", () => {
+    test("applies loaderColor and loaderPosition as CSS classes on the loader element", () => {
-        // Arrange/Act
         const wrapper = shallowMount(loader, {
             props: {
                 loaderColor: "blue",
@@ -22,64 +20,95 @@ describe("loader.vue", () => {
             },
         });
 
-        // Assert
+        const loaderElement = wrapper.find(".loader");
-        expect(wrapper.props()).toMatchObject({
+        expect(loaderElement.classes()).toContain("blue");
-            loaderColor: "blue",
+        expect(loaderElement.classes()).toContain("left");
-            loaderPosition: "left",
+        wrapper.unmount();
-        });
     });
 
     describe("Blocking interaction on page", () => {
-        test("Does capture clicks if enabled (default)", async () => {
+        let parent;
-            // Arrange
-            const div = document.createElement("div");
-            div.id = "parent";
-            document.body.appendChild(div);
 
-            const parentClickFn = jest.fn();
+        beforeEach(() => {
-
+            parent = document.createElement("div");
-            div.addEventListener("click", parentClickFn);
+            parent.id = "loader-test-parent";
-
+            document.body.appendChild(parent);
-            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 () => {
+        afterEach(() => {
-            // Arrange
+            document.body.querySelectorAll(".intercept-overlay").forEach((el) => el.remove());
-            const div = document.createElement("div");
+            if (parent?.parentNode) {
-            div.id = "parent";
+                parent.parentNode.removeChild(parent);
-            document.body.appendChild(div);
+            }
+        });
 
-            const parentClickFn = jest.fn();
+        test("teleports intercept overlay to document.body when blocking is enabled", () => {
+            const wrapper = mount(loader, {
+                props: {},
+                attachTo: "#loader-test-parent",
+            });
 
-            div.addEventListener("click", parentClickFn);
+            const overlayInBody = document.body.querySelector(".intercept-overlay");
+            const overlayInParent = parent.querySelector(".intercept-overlay");
 
-            const wrapper = shallowMount(loader, {
+            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: "#parent",
+                attachTo: "#loader-test-parent",
             });
 
-            // Act
+            expect(document.body.querySelector(".intercept-overlay")).toBeNull();
-            await wrapper.trigger("click");
+            expect(wrapper.find(".loader").exists()).toBe(true);
 
-            // Assert
+            wrapper.unmount();
-            expect(parentClickFn).toBeCalled();
+        });
 
-            // Cleanup
+        test("clicking the teleported overlay does not propagate to document listeners", async () => {
-            document.body.removeChild(div);
+            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();
         });
     });
 });