Merge pull request #134 from Safelite/feature/CSR-77

Feature/csr 77

src/constants/endpoints.js

@@ -19,6 +19,14 @@ const endpoints = {
     url: "/vehicle/api/v1/vehicle/Styles",
     method: "GET",
   },
+  GetVehicle: {
+    url: "/vehicle/api/v1/vehicle/lookup",
+    method: "GET",
+  },
+  GetDamageOptions: {
+    url: "/parts/api/v1/parts/damage-options",
+    method: "GET",
+  },
   GetPageData: {
     url: "/content/api/v1/content",
     method: "GET",

src/constants/store-actions.js

@@ -5,6 +5,8 @@ const storeActions = {
   GET_VEHICLE_MAKES: "getVehicleMakes",
   GET_VEHICLE_MODELS: "getVehicleModels",
   GET_VEHICLE_STYLES: "getVehicleStyles",
+  GET_VEHICLE: "getVehicle",
+  GET_DAMAGE_OPTIONS: "getDamageOptions",
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
   LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",

src/constants/store-mutations.js

@@ -3,6 +3,7 @@ const storeMutations = {
   UPDATE_MAKE: "updateMake",
   UPDATE_MODEL: "updateModel",
   UPDATE_STYLE: "updateStyle",
+  UPDATE_VEHICLE: "updateVehicle",
 };
 
 export { storeMutations };

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -0,0 +1,125 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-damage.vue", () => {
+  test("Page header is initailized with api data", async (done) => {
+
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select Damage";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-damage.vue", () => {
+    test("Page logo image is initailized with api data", async (done) => {
+  
+      //Arrange
+      const SiteHeaderWidget = {
+        LogoImage:
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+      }
+      const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+  
+      //Act
+      vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+  
+      //Assert
+      apiPromise.finally(() => {
+        expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+        done();
+      });
+    });
+  });
+
+  describe("vehicle-damage.vue", () => {
+    test("Vehicle image is initailized with api data", async (done) => {
+  
+      //Arrange
+      const VehicleBannerWidget = {
+        GenericVehicleImage:
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+      }
+      const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+  
+      //Act
+      vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+  
+      //Assert
+      apiPromise.finally(() => {
+        expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+        done();
+      });
+    });
+  });
+
+function setupMocks({
+    pageHeaderWidgetHeaderText = {},
+    mountOptionsMockData = {},
+  }) {
+    
+    //Mock api responses
+    baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+    baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
+      return Promise.resolve({ data: ['Front Window', 'Back Window', 'Side Window'] });
+    });
+    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: ['Front Window', 'Back Window', 'Side Window'],
+    };
+    const apiPromise = Promise.resolve(apiResponses);
+    settleAllPromises.mockImplementation(() => apiPromise);
+  
+    //Mock damage initialize methods
+    funnelHeader.methods = {
+      initializeComponent: jest.fn(),
+    };
+    vehicleBanner.methods = {
+      initializeComponent: jest.fn(),
+    };
+    funnelSubHeader.methods = {
+      initializeComponent: jest.fn(),
+    };
+    const mountOptions = getMountOptions(mountOptionsMockData);
+    const wrapper = shallowMount(vehicleDamage, 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;
+  
+    return { wrapper, apiPromise };
+  }

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="container-fluid shadow rounded-3 p-0">
+        <funnelHeader ref="funnelHeader" />
+        <vehicleBanner ref="vehicleBanner" />
+        <funnelSubHeader 
+            class="Header" 
+            ref="funnelSubHeader"
+        />
+    </div>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
+import { storeActions } from "@/constants/store-actions";
+
+export default ({
+    name: "vehicle-damage",
+    beforeRouteEnter(to, from, next) { 
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+        const damageOptions = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_DAMAGE_OPTIONS, {carId: store.getters.vehicle.carId});
+
+        // Settle promises and get results
+        const promiseResultMap = [
+        {
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        },
+        {
+            resultKey: "damageOptions",
+            promise: damageOptions
+        },
+        ];
+
+        settleAllPromises(promiseResultMap).then((resultMap) => {
+            // Call the "next" function to complete the transition to this page.
+            next((vm) => { 
+                vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget);
+                vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget);
+                vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget);
+                // use resultMap.damageOptions for damage options
+            });
+        });
+
+    },
+    components: {
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+  },
+})
+</script>

src/layouts/vehicle-style/vehicle-style.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { storeActions } from "@/constants/store-actions";
 import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
@@ -121,6 +122,46 @@ describe("vehicle-style.vue", () => {
   });
 });
 
+describe("vehicle-style.vue", () => {
+  test("selectVehicle triggers a dispatchNonBlockingStoreAction commit", async (done) => {
+
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a style to get started",
+      mountOptionsMockData: {
+        store: {
+          commit: jest.fn(),
+          getters: {
+            vehicle: {
+              year: 2020,
+              make: 'Honda',
+              model: 'Civic',
+              style: '2 Door',
+            }
+          }
+        },
+        actionList: [
+          {
+            actionName: storeActions.GET_VEHICLE,
+            data: 'mockData'
+          }
+        ]
+      },
+    }); 
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.selectVehicle();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.dispatchNonBlockingStoreAction).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
 function setupMocks({
   vehicleStyleQuestionCmsContent = {},
   styleQuestionInitialData = {},

src/layouts/vehicle-style/vehicle-style.vue

@@ -67,12 +67,16 @@ export default {
     backButtonAction() {
       // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    selectVehicle() {
+      this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE, {year: this.$store.getters.vehicle.year, make: this.$store.getters.vehicle.make, model: this.$store.getters.vehicle.model, style: this.$store.getters.vehicle.style});
     }
   },
 
   watch: {
     selectedStyle(style) {
       this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
+      this.selectVehicle();
       this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route);
     }
   },

src/router/router-constants/fmgPage-values.js

@@ -3,6 +3,7 @@ const fmgPageValues = {
   VEHICLE_MAKE: "vehicle-make",
   VEHICLE_MODEL: "vehicle-model",
   VEHICLE_STYLE: "vehicle-style",
+  VEHICLE_DAMAGE: "vehicle-damage",
 };
 
 export { fmgPageValues };

src/router/router-constants/navigation-scenarios.js

@@ -3,6 +3,7 @@ const navigationScenarios = {
   SELECTED_MODEL: "SELECTED_MODEL",
   SELECTED_MAKE: "SELECTED_MAKE",
   SELECTED_STYLE: "SELECTED_STYLE",
+  VEHICLE_DAMAGE: "VEHICLE_DAMAGE",
   CLICKED_BACK: "CLICKED_BACK",
 };
 

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

@@ -42,7 +42,7 @@ const routingTable = [
     maps: [
       {
         scenario: navigationScenarios.SELECTED_STYLE,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
       },
       {
         scenario: navigationScenarios.CLICKED_BACK,

src/store/index.js

@@ -1,5 +1,6 @@
 import { createStore } from "vuex";
 import { endpoints } from "@/constants/endpoints.js";
+import { storeMutations } from "@/constants/store-mutations"
 import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
 
@@ -24,6 +25,7 @@ export default createStore({
         vin: null,
         licensePlate: null,
         carId: null,
+        category: null,
         evoxImageId: null,
         hasSplitWindshieldOption: null,
         hasBackglassSliderOption: null,
@@ -73,6 +75,10 @@ export default createStore({
     updateStyle(state, style) {
       state.order.vehicle.style = style;
     },
+    updateVehicle(state, data) {
+      state.order.vehicle.carId = data.carId;
+      state.order.vehicle.category = data.category;
+    }
   },
   getters: {
     vehicle: state => state.order.vehicle
@@ -123,6 +129,23 @@ export default createStore({
         payload: {},
       });
     },
+    getVehicle(context, {year, make, model, style}) {
+      return globalMethods.callHttpClient({
+        methods: endpoints.GetVehicle.method,
+        endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
+        payload: {},
+      }).then(response => {
+        context.commit(storeMutations.UPDATE_VEHICLE, response.data);
+        return response;
+      });
+    },
+    getDamageOptions(context, {carId}){
+      return globalMethods.callHttpClient({
+        methods: endpoints.GetDamageOptions.method,
+        endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
+        payload: {},
+      })
+    },
 
     // Content API Actions
     getRouteInfo(context, { pageName }) {

src/store/store.spec.js

@@ -75,6 +75,26 @@ describe("Actions", () => {
     expect(styles[0]).toBe("4 DOOR UTILITY");
   });
 
+  it("Should return list of damage options retrieved", async () => {
+    // Arrange
+    let damageOptions = [];
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: ["Front Window", "Rear Window"] });
+    });
+    await store
+      .dispatch("getDamageOptions", {
+        carId: "CR00070154",
+      })
+      .then((response) => {
+        damageOptions = response.data;
+      });
+
+    // Assert
+    expect(damageOptions[0]).toBe("Front Window");
+  });
+
   it("Should return  data from url retrieved", async () => {
     // Arrange
     let routeInfo = [];
@@ -219,6 +239,20 @@ describe("Mutations", () => {
     // Assert
     expect(store.state.order.vehicle.style).toBe("2 Door");
   });
+
+  it("Should update the carID and category propertys in the store", () => {
+    // Arrange
+    const carData = {
+      carId: "123abc",
+      category: "car"
+    }
+    // Act
+    store.commit("updateVehicle", carData);
+
+    // Assert
+    expect(store.state.order.vehicle.carId).toBe("123abc");
+    expect(store.state.order.vehicle.category).toBe("car");
+  });
 });
 
 describe("Getters", () => {