Fix merge conflict

jest.config.js

@@ -18,10 +18,10 @@ module.exports = {
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/part-questions/**/*.vue",
     "!src/layouts/reveal/**/*.vue",
-    "!src/layouts/estimate/**/*.vue",
+    "!src/layouts/estimate/**/*.vue", 
-    // TODO REMOVE THESE AFTER WRITING UNIT TESTS
+    // TODO REMOVE THESE AFTER WRITING UNIT TESTS 
-    "!src/layouts/address-lookup/address-lookup.vue",
+    "!src/layouts/address-vehicles/address-vehicles.vue",
-    "!src/layouts/address-lookup/customer-questions/customer-questions.vue",
+    "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
     "!src/ux-components/alert\alert.vue",
     "!src/helpers/validation-rules.js",
     // END

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit --coverage --ci",
+    "test:unit:lite": "vue-cli-service test:unit --ci",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/common-components/funnel-header/menu-modal/menu-modal.vue

@@ -7,7 +7,7 @@
     </button>
   </div>
   <!-- Modal -->
-  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
     <div class="modal-dialog modal-fullscreen">
       <div class="modal-content">
         <div class="modal-header visually-hidden">
@@ -36,19 +36,18 @@ export default {
       currentFooterAndHeaderHeight: 0,
     };
   },
-  mounted() {
+  methods: {
-    const myModalEl = document.getElementById('footerModal');
+    show() {
-    var self = this;
+      this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
-    myModalEl.addEventListener('hide.bs.modal', function (event) {
+      this.isActive = true;
-      self.isActive = false;
-    });
-    myModalEl.addEventListener('show.bs.modal', function (event) {
-      self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72;
-      self.isActive = true;
       document.querySelector('.page-container-grouped-styles').scrollTo({
         top: 0,  behavior: 'smooth'
       });
-    })
+    },
+    hide() {
+      var self = this;
+      self.isActive = false;
+    },
   },
   components: {
     textLink,
@@ -81,7 +80,7 @@ export default {
       .bar3 {
         width: 14px;
         height: 2px;
-        background-color: $blue-400;
+        background-color: $blue;
         margin: 1px 0;
         transition: 0.25s;
       }

src/layouts/address-lookup/address-lookup.spec.js

@@ -1,38 +1,16 @@
 // Components
 import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
-import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
-import router from "@/router";
 
 // Supporting Files
-import { settleAllPromises } from "@/helpers/layout-helper.js";
 import baseMixin from "@/mixins/base-mixin";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { shallowMount } from "@vue/test-utils";
-import { mount, flushPromises, shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { maska } from 'maska';
-import { nextTick } from "vue";
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import store from "@/store";
-import { validate } from "vee-validate";
-import { isGlassAvailableForCarId } from "@/helpers/damage-helper.js"
 import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { EXPECTATION_FAILED } from "http-status-codes";
 
-// Mock our module for promises.
-// jest.mock("@/helpers/layout-helper.js", () => ({
-//     settleAllPromises: jest.fn(),
-// }));
-
-// // Mock fetchCmsContentForPage
-// jest.mock("@/helpers/cms-content-helper", () => ({
-//     fetchCmsContentForPage: jest.fn(),
-// }));
 
 jest.mock("@/helpers/damage-helper", () => ({
   isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
@@ -43,17 +21,530 @@ jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
   navigateAfterSaveToHeritageFunnel: jest.fn()
 }));
 
-
-// const questionText = "Question Text";
-// const mockMixin = {
-//   methods: {
-//     getCmsContent: jest.fn().mockImplementation(() => {
-//       return questionText;
-//     })
-//   }
-// }
-
 describe("address-lookup.vue", () => {
+  describe("page level alerts", () => {
+    test("if the address is not serviceable display the Non-Serviceable Zip Alert", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: false
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(true); 
+    }); 
+    
+    test("if the address matches a different vehicle display the Matched Different VehicleAlert", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID2");
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe(true); 
+    }); 
+
+    test("if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+      baseMixin.methods.dispatchStoreAction = jest.fn();
+      baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+        let data = {};
+        if (actionName == storeActions.VALIDATE_ZIP) {
+          data = {
+            isServiceable: true
+          }
+        }
+        else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+          data = {
+            isStatePermissible: false,
+            vinVehicles: [{
+              vin: "TEST_VIN",
+              vehicle: {
+                carId: "CARID"
+              }
+            },
+            {
+              vin: "TEST_VIN2",
+              vehicle: {
+                carId: "CARID2"
+              }
+            }]
+          }
+        }
+
+        return Promise.resolve({ data });
+      })      
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(wrapper.findComponent({ ref: "alertVinLookupsByHomeAddressNotAllowed" }).isVisible()).toBe(true); 
+
+    });
+
+    test("if no vehicles found, display Vin Not Found alert", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+      baseMixin.methods.dispatchStoreAction = jest.fn();
+      baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+        let data = {};
+        if (actionName == storeActions.VALIDATE_ZIP) {
+          data = {
+            isServiceable: true
+          }
+        }
+        else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+          data = {
+            isStatePermissible: true,
+            vinVehicles: [] // Return no vehicles
+          }
+        }
+
+        return Promise.resolve({ data });
+
+      })      
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      wrapper.vm.navigateForward = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true); 
+
+    });
+  }); 
+
+  describe("navigation", () => {
+    
+    test("if the back button is clicked, navigate back", async () => {
+      // Arrange 
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      // Act
+      await wrapper.vm.backButtonAction(); 
+
+      // Assert
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+
+    });
+
+    test("if the car entered matches one of the vehicles found and the zip is serviceable, navigate forward", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+      baseMixin.methods.dispatchStoreAction = jest.fn();
+      baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+        let data = {};
+        if (actionName == storeActions.VALIDATE_ZIP) {
+          data = {
+            isServiceable: true
+          }
+        }
+        else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+          data = {
+            isStatePermissible: true,
+            vinVehicles: [{
+              vin: "TEST_VIN",
+              vehicle: {
+                carId: "CARID"
+              }
+            },
+            {
+              vin: "TEST_VIN2",
+              vehicle: {
+                carId: "CARID2"
+              }
+            }]
+          }
+        }
+
+        return Promise.resolve({ data });
+      })      
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      wrapper.vm.navigateForward = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert 
+      expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+    }); 
+
+    test("if the car entered matches one of multiple vehicles found, update vehicle info and navigate to the heritage funnel", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+      baseMixin.methods.dispatchStoreAction = jest.fn();
+      baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+        let data = {};
+        if (actionName == storeActions.VALIDATE_ZIP) {
+          data = {
+            isServiceable: true
+          }
+        }
+        else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+          data = {
+            isStatePermissible: true,
+            vinVehicles: [{
+              vin: "TEST_VIN",
+              vehicle: {
+                carId: "CARID"
+              }
+            },
+            {
+              vin: "TEST_VIN2",
+              vehicle: {
+                carId: "CARID2"
+              }
+            }]
+          }
+        }
+
+        return Promise.resolve({ data });
+
+      })      
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      wrapper.vm.updateVehicleInfo = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert 
+      expect(wrapper.vm.updateVehicleInfo).toHaveBeenCalled();
+      expect(navigateAfterSaveToHeritageFunnel).toHaveBeenCalled();
+
+    }); 
+
+    test("if the car entered does not match any of the multiple vehicles found, navigate to address-vehicles page", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID_A");
+
+      baseMixin.methods.dispatchStoreAction = jest.fn();
+      baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+        let data = {};
+        if (actionName == storeActions.VALIDATE_ZIP) {
+          data = {
+            isServiceable: true
+          }
+        }
+        else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+          data = {
+            isStatePermissible: true,
+            vinVehicles: [{
+              vin: "TEST_VIN",
+              vehicle: {
+                carId: "CARID"
+              }
+            },
+            {
+              vin: "TEST_VIN2",
+              vehicle: {
+                carId: "CARID2"
+              }
+            }]
+          }
+        }
+
+        return Promise.resolve({ data });
+
+      }) 
+      
+      const carsFound = [{
+          vin: "TEST_VIN",
+          vehicle: {
+            carId: "CARID"
+          }
+        },
+        {
+          vin: "TEST_VIN2",
+          vehicle: {
+            carId: "CARID2"
+          }
+        }]
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      wrapper.vm.updateVehicleInfo = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert 
+      expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalledWith(navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, undefined, {}, {}, carsFound);
+
+    });     
+
+    test("if the car entered matches one of the vehicles found but the zip is NOT serviceable, do not navigate forward", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+      baseMixin.methods.dispatchStoreAction = jest.fn();
+      baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+        let data = {};
+        if (actionName == storeActions.VALIDATE_ZIP) {
+          data = {
+            isServiceable: false
+          }
+        }
+        else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+          data = {
+            isStatePermissible: true,
+            vinVehicles: [{
+              vin: "TEST_VIN",
+              vehicle: {
+                carId: "CARID"
+              }
+            },
+            {
+              vin: "TEST_VIN2",
+              vehicle: {
+                carId: "CARID2"
+              }
+            }]
+          }
+        }
+
+        return Promise.resolve({ data });
+
+      })      
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+      })
+
+      wrapper.vm.navigateForward = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert 
+      expect(wrapper.vm.navigateForward).toHaveBeenCalledTimes(0);
+
+    });  
+
+    test("if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page", async () => {
+      // Arrange
+      const mockRegistrationAddress = {
+        streetAddress: "1234 Main St",
+        city: "Columbus",
+        state: "OH",
+        zipCode: "43215"
+      }
+
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+      baseMixin.methods.dispatchStoreAction = jest.fn();
+      baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+        let data = {};
+        if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+          data = {
+            isStatePermissible: true,
+            vinVehicles: [{
+              vin: "TEST_VIN",
+              vehicle: {
+                carId: "CARID2"
+              }
+            }]
+          }
+        }
+
+        return Promise.resolve({ data });
+
+      })      
+
+      await wrapper.setData({
+        customerQuestions: {
+          addressQuestions: mockRegistrationAddress
+        },
+        isCarIdDifferent: true,
+        isGlassAvailableForCarId: false,
+      })
+
+      let carEntered = [{
+        vin: "TEST_VIN",
+        vehicle: {
+          carId: "CARID"
+        }
+      }];
+
+      let carsFound = [{
+        vin: "TEST_VIN2",
+        vehicle: {
+          carId: "CARID2"
+        }
+      }];
+
+      // Act
+      await wrapper.vm.navigateForward(carEntered, carsFound);
+
+      // Assert 
+      expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalledWith(navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS, undefined, {}, {"displayVehicleChangeAlert": true}, {});
+
+    });
+
+  });
+
+  describe("reseting dependent state", () => {
+    test("when reseting dependent state, license plate is set to null and parts state and dependencies are reset", async () => {
+      // Arrange
+      const commitSpy = jest.spyOn(store, "commit");
+      const dispatchSpy = jest.spyOn(store, "dispatch");
+      const { wrapper } = setupMocks(addressLookup, {
+        isZipServiceable: true
+      });
+
+      // Act
+      wrapper.vm.resetDependentState();
+
+      // Assert
+      expect(commitSpy).toBeCalledWith(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
+      expect(dispatchSpy).toBeCalledWith(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+
+    });
+  });
+  
   describe("registration and service zips", () => {
     describe("if registration zip is serviceable", () => {
       test("if registration address is provided => update service address on successful continue", async () => {
@@ -242,77 +733,6 @@ describe("address-lookup.vue", () => {
       });
     });
   });
-
-  describe.skip("initialization", () => {
-    test("Page header is initialized with api data", async (done) => {
-      //Arrange
-      const pageHeaderWidgetHeaderText = "Select Damage";
-      const { wrapper, apiPromise } = setupMocks({
-        pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
-      });
-
-      //Act
-      addressLookup.beforeRouteEnter.call(
-        wrapper.vm,
-        { query: { fmgPage: "address-lookup" } },
-        undefined,
-        (c) => c(wrapper.vm)
-      );
-
-      //Assert
-      apiPromise.finally(() => {
-        expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
-          pageHeaderWidgetHeaderText
-        );
-        done();
-      });
-    });
-
-    test("Customer Questions component is initialized with api data", async (done) => {
-      //Arrange
-      const StreetAddressQuestionWidget = { QuestionText: "test" };
-      const CityQuestionWidget = { QuestionText: "test" };
-      const StateQuestionWidget = { QuestionText: "test" };
-      const ZipQuestionWidget = { QuestionText: "test" };
-      const FirstNameQuestionWidget = { QuestionText: "test" };
-      const LastNameQuestionWidget = { QuestionText: "test" };
-      const EmailAddressQuestionWidget = { QuestionText: "test" };
-      const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" };
-      const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" };
-
-      const widgets = [
-        StreetAddressQuestionWidget,
-        CityQuestionWidget,
-        StateQuestionWidget,
-        ZipQuestionWidget,
-        AlertVerificationWarningWidget,
-        AlertNoMatchWarningWidget,
-        FirstNameQuestionWidget,
-        LastNameQuestionWidget,
-        EmailAddressQuestionWidget,
-      ];
-
-      const { wrapper, apiPromise } = setupMocks({
-        cmsContent: widgets,
-      });
-
-      //Act
-      addressLookup.beforeRouteEnter.call(
-        wrapper.vm,
-        { query: { fmgPage: "address-lookup" } },
-        undefined,
-        (c) => c(wrapper.vm)
-      );
-
-      //Assert
-      apiPromise.finally(() => {
-        expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith(
-          widgets
-        );
-        done();
-      });
-    });
-  });
 });
 
 function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressResponse }) {
@@ -351,154 +771,7 @@ function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressR
   wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
   wrapper.vm.$refs.loadingModal.showModal = jest.fn();
 
-  // jest.mock("@/store", () => ({
-  //   commit: jest.fn(),
-  //   dispatch: jest.fn(),
-  //   getters: {
-  //     vehicle: {
-  //       carId: "CARID"
-  //     }
-  //   },
-  // }));
-
   return { wrapper };
+  
 }
 
-// function setupMocks({
-//   pageHeaderWidgetHeaderText = {},
-//   mountOptionsMockData = {
-//     router: {
-//       navigate: jest.fn(),
-//     },
-//     store: {
-//       getters: {
-//         vehicle: {},
-//       },
-//     },
-//   },
-// }) {
-//   //Mock api responses
-//   baseMixin.methods.dispatchStoreAction = jest.fn();
-//   const apiResponses = {
-//     cmsContent: {
-//       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
-//       VehicleBannerWidget: {
-//         GenericVehicleImage:
-//           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-//       },
-//       FunnelHeaderWidget: {
-//         LogoImage:
-//           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-//       },
-//       StreetAddressQuestionWidget: {
-//         QuestionText:
-//           "test"
-//       },
-//       CityQuestionWidget: {
-//         QuestionText:
-//           "test"
-//       },
-//       StateQuestionWidget: {
-//         QuestionText:
-//           "test"
-//       },
-//       ZipQuestionWidget: {
-//         QuestionText:
-//           "test"
-//       },
-//       FirstNameQuestionWidget: {
-//         QuestionText:
-//           "test"
-//       },
-//       LastNameQuestionWidget: {
-//         QuestionText:
-//           "test"
-//       },
-//       EmailAddressQuestionWidget: {
-//         QuestionText:
-//           "test"
-//       },
-//       AlertVerificationWarningWidget: {
-//         HeaderText:
-//           "test",
-//         BodyText:
-//           "test",
-//       },
-//       AlertNoMatchWarningWidget: {
-//         HeaderText:
-//           "test",
-//         BodyText:
-//           "test",
-//       },
-
-//     },
-//   };
-
-//   const apiPromise = Promise.resolve(apiResponses);
-
-//   settleAllPromises.mockImplementation(() => apiPromise);
-//   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-
-//   //Mock damage initialize methods
-//   funnelHeader.methods = {
-//     initializeComponent: jest.fn(),
-//   };
-
-//   vehicleBanner.methods = {
-//     initializeComponent: jest.fn(),
-//   };
-
-//   funnelSubHeader.methods = {
-//     initializeComponent: jest.fn(),
-//   };
-
-//   funnelFooter.methods = {
-//     initializeComponent: jest.fn(),
-//   };
-
-//   customerQuestions.methods = {
-//     initializeComponent: jest.fn(),
-//   };
-
-//   addressQuestions.methods = {
-//     initializeComponent: jest.fn(),
-//     setupAddressLookup: jest.fn(),
-//   };
-
-//   const mountOptions = getMountOptions(mountOptionsMockData);
-//   mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
-
-//   mountOptions.global.directives = {
-//     maska: maska
-//   };
-
-//   const wrapper = mount(addressLookup, mountOptions);
-
-//   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
-//   funnelHeaderWrapper.vm.initializeComponent =
-//     funnelHeader.methods.initializeComponent;
-
-//   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
-//   vehicleBannerWrapper.vm.initializeComponent =
-//     vehicleBanner.methods.initializeComponent;
-
-//   const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
-//   funnelSubHeaderWrapper.vm.initializeComponent =
-//     funnelSubHeader.methods.initializeComponent;
-
-//   const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
-//   funnelFooterWrapper.vm.initializeComponent =
-//     funnelFooter.methods.initializeComponent;
-
-//   const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" });
-//   customerQuestionsWrapper.vm.initializeComponent =
-//     customerQuestions.methods.initializeComponent;
-
-//   const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" });
-//   addressQuestionsWrapper.vm.initializeComponent =
-//     addressQuestions.methods.initializeComponent;
-//   addressQuestionsWrapper.vm.setupAddressLookup =
-//     addressQuestions.methods.setupAddressLookup;
-
-//   return { wrapper, apiPromise };
-// }

src/layouts/address-lookup/address-lookup.vue

@@ -151,15 +151,15 @@ export default {
 			);
 		},
 		attachCustomEvents() { 
-       this.prependActionToMethod(this, this.forwardButtonAction, () => {
+			this.prependActionToMethod(this, this.forwardButtonAction, () => {
-      this.pushEventToGA(
+				this.pushEventToGA(
-          this.$route.query[this.queryStrings.FMG_PAGE],
+					this.$route.query[this.queryStrings.FMG_PAGE],
-          this.GaActions.SUBMITTED,
+					this.GaActions.SUBMITTED,
-          this.GaLabels.ADDRESS_LOOKUP,
+					this.GaLabels.ADDRESS_LOOKUP,
-          true
+					true
-     );
+				);
-      });
+			});
-	},
+		},
 		getRegistrationAddressFromStore() {
 			return store.getters.vehicle.registration.address;
 		},
@@ -207,7 +207,7 @@ export default {
 				this.$refs.funnelFooter.removeLoader();
 				return;
 			}
-			
+
 			// if the neither the registration zip code or service zip code are not serviceable
 			this.isZipServicable = serviceZipValidationResponse.data.isServiceable;
 			if (!this.isZipServicable) {				
@@ -368,22 +368,22 @@ export default {
 		}
 	},
 	mounted() {
-    this.attachCustomEvents();
+		this.attachCustomEvents();
-  },
+	},
 	computed: {
-		AlertNonServiceableZipHeader(){
+		AlertNonServiceableZipHeader() {
 			const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
 			const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zipCode);
 			return text;
 		},
-		AlertNonServiceableZipBody(){
+		AlertNonServiceableZipBody() {
 			return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
 		},		
-		AlertMatchedDifferentVehicleHeader(){
+		AlertMatchedDifferentVehicleHeader() {
 			const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
 			return text;
 		},
-		AlertMatchedDifferentVehicleBody(){
+		AlertMatchedDifferentVehicleBody() {
 
 			const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
 			const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;

src/layouts/address-lookup/customer-questions/customer-questions.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from "@vue/test-utils";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+
+const customerModel = {
+    addressQuestions: {
+        streetAddress: "",
+        city: "",
+        state: "",
+        zipCode: "",
+    },
+    firstName: "",
+    lastName: "",
+    emailAddress: "",
+}  
+
+describe("customerQuestions.vue", () => {
+
+    it("Should render customerQuestions sub-components (addressQuestions, first name, last name, and email textbox-questions)", async () => {
+        // Arrange   
+        const wrapper = shallowMount(customerQuestions);
+
+        // Act
+        const addressQuestions = wrapper.findComponent({ ref: 'addressQuestions' });
+        const firstName = wrapper.findComponent({ ref: 'firstName' });
+        const lastName = wrapper.findComponent({ ref: 'lastName' });
+        const emailAddress = wrapper.findComponent({ ref: 'emailAddress' });
+
+        // Assert
+        expect(addressQuestions.exists()).toBe(true);
+        expect(firstName.exists()).toBe(true);
+        expect(lastName.exists()).toBe(true);
+        expect(emailAddress.exists()).toBe(true);
+  
+    });
+
+})

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,5 +1,5 @@
 <template>
-	<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" :alertNotifications="alertNotifications" />
+	<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
 	<div class="row mb-4">
 		<div class="col">
 			<textboxQuestion

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -1 +1,112 @@
-test.todo("some test to be written in the future");
+import { shallowMount  } from "@vue/test-utils";
+import vinLookup from "./vin-lookup.vue";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import store from "@/store";
+
+jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: jest.fn(),
+  getters: {
+    vehicle: {
+      year: 2019,
+      carId: 'initial carId'
+    },
+    order: {
+        serviceLocation: {
+            zipCode: "45253"
+        },
+        customer: {
+            emailAddress: "builddigitaltest@safelite.com"
+        }
+    },
+    payment: {
+        insuranceCoverage: {
+            isVerified: true
+        }
+    },
+    damage: {
+        glassToReplace: "windshield"
+    }
+  },
+}));
+
+import { getDamageString, getIsWindshieldOnly,isGlassAvailableForCarId } from "@/helpers/damage-helper";
+
+jest.mock("@/helpers/damage-helper", () => ({
+    isGlassAvailableForCarId: jest.fn(() => {
+        return Promise.resolve();
+    }),
+    getIsWindshieldOnly: jest.fn(),
+    getDamageString: jest.fn(),
+}));
+
+
+describe("vin-lookup.vue", () => {
+    it("Should update the funnel-footer forward button when VIN is changed", (done) => {
+        //Arrange
+        const { wrapper } = setupMocks({ });
+        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+        //Act
+        wrapper.setData({vin: "newValue"});
+        //Assert
+        wrapper.vm.$nextTick(() => {
+            expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toBeCalled();
+            done();
+        });
+        
+    });
+
+    it("Should call navigateForward() if the store carId matches the vin response carId and forward button is clicked", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({ });
+        const zipValidationApiResponse = {
+            data: {
+                isServiceable: true
+            }
+        };
+        const vehicleLookupApiResponse = {
+            data: {
+                carId: 'initial carId'
+            }
+          };
+        
+        const zipPromise = Promise.resolve(zipValidationApiResponse);
+        const vinPromise = Promise.resolve(vehicleLookupApiResponse);
+    
+        wrapper.vm.validateZip = jest.fn().mockImplementation(() => zipPromise);
+        wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise);
+
+        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+        wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+        wrapper.vm.navigateForward = jest.fn();  
+
+        // Act 
+        await wrapper.vm.forwardButtonAction();
+
+        //Assert
+        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+    });
+});
+
+
+function setupMocks({ customMountOptions }) {
+
+
+    const mountOptions = getMountOptions({});
+
+    const finalMountOptions = Object.assign(mountOptions, customMountOptions);
+    // Modify/augment default mount options
+    finalMountOptions.global.mocks["$store"] = store;
+    finalMountOptions.global.mixins = [mockMixin];
+    finalMountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+    
+    const wrapper = shallowMount(vinLookup, finalMountOptions);
+    return { wrapper };
+  }
+
+  const mockMixin = {
+    methods: {
+      getCmsContent: jest.fn(() => "placeholder CMS content"),
+    }
+  }