unit testing

src/layouts/service-location/service-location.spec.js

@@ -1,6 +1,43 @@
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import serviceLocationModal from "@/layouts/service-location/service-location.vue";
+import serviceLocation from "@/layouts/service-location/service-location.vue";
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            if (widgetName === linkWidgetName) {
+                return mockLinkCmsContent[cmsFieldName];
+            }
+
+            if (widgetName === modalWidgetName) {
+                return mockModalCmsContent[cmsFieldName];
+            }
+
+            return null;
+        }),
+
+        getZipCodeData: jest.fn((zip) => {
+            if (zip === "43235" || zip === "55555") {
+                return Promise.resolve({
+                    containsMilitaryBase: false,
+                    isValid: true,
+                    state: "OH",
+                    zipCodeCtu: "01820",
+                });
+            }
+
+            return Promise.resolve({
+                containsMilitaryBase: false,
+                isValid: false,
+                state: null,
+                zipCodeCtu: null,
+            });
+        }),
+
+        onSubmit: jest.fn(),
+        onInvalidSubmit: jest.fn(),
+    },
+};
 
 describe("navigation", () => {
     test("if the back button is clicked, navigate back", async () => {
@@ -17,16 +54,62 @@ describe("navigation", () => {
     });
 });
 
+describe("updating service zip", () => {
+    test("updates the page model after changing the service zip code", () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+        });
+
+        const newServiceZipCodeQuestion = {
+            zipCode: "61606",
+            state: "IL",
+        };
+
+        const serviceZipCodeComponent = wrapper.findComponent({
+            ref: "serviceZipCodeQuestion",
+        });
+
+        // Act
+        serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
+
+        // Assert
+        expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
+    });
+
+    test("resets appointment type selection when service zip code is updated by service zip modal", () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+
+        const serviceZipCodeComponent = wrapper.findComponent({
+            ref: "serviceZipCodeQuestion",
+        });
+
+        const newServiceZipCodeQuestion = {
+            zipCode: "61606",
+            state: "IL",
+        };
+
+        wrapper.vm.selectedAppointmentType = "Inshop";
+
+        // Act
+        serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
+
+        // Assert
+        expect(wrapper.vm.selectedAppointmentType).toStrictEqual(null);
+    });
+});
 
 function setupMocks() 
 {    
     const wrapper = shallowMount(
-        serviceLocationModal,       
+        serviceLocation,      
         getMountOptions({
             router: {
                 navigate: jest.fn(),
             },       
         })
     );
+    
     return { wrapper };
 }

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -17,7 +17,7 @@
         :footerButtonText="modalFooterText"
         @footer-button-event="setZipCode" >
         <serviceZipQuestion
-            ref="serviceZipQuestion"
+            ref="serviceZipCodeQuestion"
             customInputId="serviceZipCode"
             v-model="internalModel.zipCode"
             v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
@@ -42,7 +42,7 @@ import { getServiceabilityDetails } from "@/helpers/service-location-helper";
 
 export default {
     name: "service-zip-modal-question",
-    emits: ["update:modelValue", "updated-contains-military-base"],
+    emits: ["update:modelValue", "updated-serviceability", "updated-contains-military-base"],
     data() {
         return {
             internalModel: this.copyModel(this.modelValue),