diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js index a384b1603..f3129613b 100644 --- a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js +++ b/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: { - mocks: { - $root: { - cmsContentByWidget: { - ServiceZipQuestionWidget: { - QuestionText: "Service ZIP code:", - }, - }, - }, - }, - }, + global: mountOptions.global, }); } @@ -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(); }); }); diff --git a/src/layouts/scheduling/scheduling.spec.js b/src/layouts/scheduling/scheduling.spec.js index 60347ace7..3df8ab9a1 100644 --- a/src/layouts/scheduling/scheduling.spec.js +++ b/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 }; + wrapper.vm.$refs.schedulingZipSearch.focusZipInput = jest.fn(); wrapper.vm.onMobileZipCodeClicked(); - expect(focusZipInput).toHaveBeenCalled(); + expect(wrapper.vm.$refs.schedulingZipSearch.focusZipInput).toHaveBeenCalled(); wrapper.unmount(); }); });