Merge pull request #289 from Safelite/CSR-101-vin-lookup-updates

Update vin-lookup page.

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

@@ -1 +1,167 @@
-test.todo("some test to be written in the future");
+// Components
+import vinLookup from "@/layouts/vin-lookup/vin-lookup.vue";
+import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.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 sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { mount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+import { validate } from "vee-validate";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
+
+// 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(),
+}));
+
+// Mock Store
+jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: jest.fn(),
+  getters: {
+    vehicle: {
+      carId: "C00000000",
+      image: "test.jpg",
+    },
+    eventBusItem: jest.fn(),
+    damage: {
+      glassToReplace: []
+    },
+  },
+}));
+
+describe("vin-lookup.vue", () => {
+
+  test("Call resetDependentState", async() => {
+    const {wrapper} = setupMocks({});
+    wrapper.vm.resetDependentState();
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
+  });
+
+});
+
+// TEMP
+function setupMocks({
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {
+    router: {
+      navigate: jest.fn(),
+    },
+    store: {
+      getters: {
+        vehicle: {},
+      },
+    },
+  },
+}) {
+  //Mock api responses
+  baseMixin.methods.dispatchNonBlockingStoreAction = 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",
+      },
+    },
+    damageOptions: {
+      driverSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      passengerSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
+      },
+      backGlassOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+    },
+  };
+
+  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(),
+  };
+
+  damageLocationQuestion.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  sideDoorOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  windshieldOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  replaceOptionsQuestion.methods = {
+    initializeComponent: jest.fn(),
+    updateSelectedValues: jest.fn(),
+  };
+
+  funnelFooter.methods = {
+    initializeComponent: jest.fn(),
+  }
+
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+
+  const wrapper = mount(vinLookup, 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;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vin-lookup/vin-lookup.vue

@@ -5,17 +5,17 @@
     <funnelSubHeader ref="funnelSubHeader" />
     <h1>VIN Lookup Placeholder Page</h1>
     <Form
-    @submit="onSubmit"
+      @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit"
+      @invalid-submit="onInvalidSubmit"
-    ref="theForm"
+      ref="theForm"
-    v-slot="{ meta }"
+      v-slot="{ meta }"
-    class="d-flex flex-column h-100"
+      class="d-flex flex-column h-100"
     >
     <funnel-footer
-    ref="funnelFooter"
+      ref="funnelFooter"
-    :isDisabled="!meta.valid"
+      :isDisabled="!meta.valid"
-    @back-clicked="backButtonAction"
+      @back-clicked="backButtonAction"
-    @ForwardClicked="forwardButtonAction"
+      @ForwardClicked="forwardButtonAction"
     />
   </Form>
 </div>
@@ -33,6 +33,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations";
 import baseMixin from "@/mixins/base-mixin";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
@@ -86,6 +87,16 @@ export default {
     arePagePrerequisitesValid() {
       return true;
     },
+    resetDependentState() {
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
+    },
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
+    },
   },
   components: {
     funnelHeader,

src/router/router-constants/routing-table.js

@@ -97,6 +97,19 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VIN_LOOKUP,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
+      {
+        scenario: navigationScenarios.VIN_LOOKUP,
+        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
+      },
+    ],
+  },
 ];
 
 export { routingTable };

src/store/index.js

@@ -19,6 +19,15 @@ export const state = {
       imageUrl: null,
       imageVifNumber: null,
       imageColor: null,
+      registration: {
+        licensePlate: null,
+        address: null,
+        city: null,
+        state: null,
+        zipCode: null,
+        firstName: null,
+        lastName: null,
+      },
     },
     damage: {
       isRepair: null,
@@ -81,6 +90,33 @@ export const mutations = {
   updatePageData(state, pageData){
     state.applicationUser.pageData[pageData.page] = pageData.data;
   },
+  updateRegistrationAddress(state, registrationAddress){
+    state.order.vehicle.registration.address = registrationAddress;
+  },
+  updateRegistrationCity(state, registrationCity){
+    state.order.vehicle.registration.city = registrationCity;
+  },
+  updateRegistrationState(state, registrationState){
+    state.order.vehicle.registration.state = registrationState;
+  },
+  updateRegistrationZipCode(state, registrationZipCode){
+    state.order.vehicle.registration.zipCode = registrationZipCode;
+  },
+  updateRegistrationFirstName(state, registrationFirstName){
+    state.order.vehicle.registration.firstName = registrationFirstName;
+  },
+  updateRegistrationLastName(state, registrationLastName){
+    state.order.vehicle.registration.lastName = registrationLastName;
+  },
+  updateRegistrationLicensePlate(state, registrationLicensePlate){
+    state.order.vehicle.registration.licensePlate = registrationLicensePlate;
+  },
+  updateServiceLocationZip(state, ServiceLocationZip){
+    state.order.vehicle.serviceLocation.zip = serviceLocationZip;
+  },
+  updateCustomerEmailAddress(state, CustomerEmailAddress){
+    state.order.vehicle.customer.emailAddress = customerEmailAddress;
+  },
 
   // EVENT BUS MUTATIONS
   addEventToBus(state, event) {
@@ -115,7 +151,13 @@ export const mutations = {
     state.order.damage.glassToReplace = null;
   },
   resetRegistrationState(state) {
-
+    state.order.vehicle.registration.licensePlate = null;
+    state.order.vehicle.registration.address = null;
+    state.order.vehicle.registration.city = null;
+    state.order.vehicle.registration.state = null;
+    state.order.vehicle.registration.zipCode = null;
+    state.order.vehicle.registration.firstName = null;
+    state.order.vehicle.registration.lastName = null;
   },
   resetPartsState(state) {
     state.order.lineItems.glassParts = null;
@@ -288,4 +330,4 @@ export default createStore({
   mutations,
   getters,
   actions,
-});
+});