CASH-2751 - Fixed unit tests

src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from "@vue/test-utils";
 import schedulingZipSearch from "./scheduling-zip-search";
 import store from "@/store";
 import { errorMessages } from "@/constants/error-messages";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import {
     getBillToAccountNumber,
     getZipCodeData,
@@ -22,24 +23,42 @@ jest.mock(
     })
 );
 
-function createWrapper(props = {}) {
+const MOCK_CMS_CONTENT = {
+    ServiceZipQuestionWidget: {
+        QuestionText: "Service ZIP code:",
+    },
+};
+
+function mountComponent(props = {}, cmsContent = {}) {
+    const cmsContentByWidget = {
+        ...MOCK_CMS_CONTENT,
+        ...cmsContent,
+        ServiceZipQuestionWidget: {
+            ...MOCK_CMS_CONTENT.ServiceZipQuestionWidget,
+            ...cmsContent.ServiceZipQuestionWidget,
+        },
+    };
+
+    const cmsMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, fieldName) => {
+                return cmsContentByWidget[widgetName]?.[fieldName] ?? "";
+            }),
+        },
+    };
+
+    const mountOptions = getMountOptions({
+        route: { name: "scheduling" },
+        mixins: [cmsMixin],
+    });
+
     return shallowMount(schedulingZipSearch, {
         props: {
             modelValue: "",
             pageNameToLog: "scheduling",
             ...props,
         },
-        global: {
+        global: mountOptions.global,
-            mocks: {
-                $root: {
-                    cmsContentByWidget: {
-                        ServiceZipQuestionWidget: {
-                            QuestionText: "Service ZIP code:",
-                        },
-                    },
-                },
-            },
-        },
     });
 }
 
@@ -49,15 +68,16 @@ describe("scheduling-zip-search.vue", () => {
     });
 
     test("prefills the zip input and CMS label from modelValue / ServiceZipQuestionWidget", () => {
-        const wrapper = createWrapper({ modelValue: "43235" });
+        const wrapper = mountComponent({ modelValue: "43235" });
 
         expect(wrapper.find("#sz-service-zip").element.value).toBe("43235");
         expect(wrapper.vm.zipLabelText).toBe("Service ZIP code:");
         expect(wrapper.find("label").html()).toContain("Service ZIP code:");
+        wrapper.unmount();
     });
 
     test("shows required error when searching with a blank zip", async () => {
-        const wrapper = createWrapper({ modelValue: "" });
+        const wrapper = mountComponent({ modelValue: "" });
 
         await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
 
@@ -65,29 +85,32 @@ describe("scheduling-zip-search.vue", () => {
         expect(wrapper.find(".scheduling-zip-search__error").classes()).toContain("active");
         expect(getZipCodeData).not.toHaveBeenCalled();
         expect(wrapper.emitted("zip-searched")).toBeUndefined();
+        wrapper.unmount();
     });
 
     test("shows format error when zip is invalid", async () => {
-        const wrapper = createWrapper({ modelValue: "123" });
+        const wrapper = mountComponent({ modelValue: "123" });
 
         await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
 
         expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_FORMAT);
         expect(getZipCodeData).not.toHaveBeenCalled();
         expect(wrapper.emitted("zip-searched")).toBeUndefined();
+        wrapper.unmount();
     });
 
     test("does not search when disabled", async () => {
-        const wrapper = createWrapper({ modelValue: "44101", disabled: true });
+        const wrapper = mountComponent({ modelValue: "44101", disabled: true });
 
         await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
 
         expect(getZipCodeData).not.toHaveBeenCalled();
         expect(wrapper.emitted("zip-searched")).toBeUndefined();
+        wrapper.unmount();
     });
 
     test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => {
-        const wrapper = createWrapper({ modelValue: "44101" });
+        const wrapper = mountComponent({ modelValue: "44101" });
 
         await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
 
@@ -101,10 +124,11 @@ describe("scheduling-zip-search.vue", () => {
         expect(wrapper.emitted("zip-searched")).toEqual([
             [{ zipCode: "44101", billToAccountNumber: "87291" }],
         ]);
+        wrapper.unmount();
     });
 
     test("focusZipInput scrolls and focuses the zip input", () => {
-        const wrapper = createWrapper({ modelValue: "43235" });
+        const wrapper = mountComponent({ modelValue: "43235" });
         const zipInput = wrapper.find("#sz-service-zip").element;
         zipInput.scrollIntoView = jest.fn();
         zipInput.focus = jest.fn();
@@ -116,5 +140,6 @@ describe("scheduling-zip-search.vue", () => {
             block: "center",
         });
         expect(zipInput.focus).toHaveBeenCalledWith({ preventScroll: true });
+        wrapper.unmount();
     });
 });

src/layouts/scheduling/scheduling.spec.js

@@ -241,12 +241,11 @@ describe("scheduling.vue", () => {
 
         test("anchors to zip search when mobile zip is clicked", () => {
             const { wrapper } = setupMocks();
-            const focusZipInput = jest.fn();
+            wrapper.vm.$refs.schedulingZipSearch.focusZipInput = jest.fn();
-            wrapper.vm.$refs.schedulingZipSearch = { focusZipInput };
 
             wrapper.vm.onMobileZipCodeClicked();
 
-            expect(focusZipInput).toHaveBeenCalled();
+            expect(wrapper.vm.$refs.schedulingZipSearch.focusZipInput).toHaveBeenCalled();
             wrapper.unmount();
         });
     });