Merge pull request #106 from Safelite/feature/CSR-76

Feature/csr 76

src/common-components/button-question/button-question.vue

@@ -10,7 +10,8 @@
         <legend class="sr-only">{{groupName}}</legend>
           <listButton v-for="answer in answers" :key="answer"
             :buttonID="answer"
-            @click="chooseAnswer(answer)"
+            @mouseup="chooseAnswer(answer)"
+            @keyup.space="chooseAnswer(answer)"
             loaderColor="blue"
             loaderPosition="right"
             sizeInRem="1.5"

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -13,6 +13,7 @@
         v-if="hasBackButton"
         :backButtonAccessibleText="backButtonAccessibleText"
         :backButtonAction="backButtonAction"
+        :backButtonUrl="backButtonUrl"
       />
     </div>
   </div>

src/constants/store-mutations.js

@@ -1,5 +1,7 @@
 const storeMutations = {
   UPDATE_YEAR: "updateYear",
+  UPDATE_MAKE: "updateMake",
+  UPDATE_MODEL: "updateModel",
 };
 
 export { storeMutations };

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

@@ -44,6 +44,7 @@ describe("vehicle-make.vue", () => {
     //Assert
     const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
+      console.log(header)
       expect(header.attributes("text")).toEqual("Select a make to get started");
       done();
     });

src/layouts/vehicle-model/model-question/model-question.spec.js

@@ -0,0 +1,82 @@
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("model-question.vue", () => {
+  test("Selected model is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "Accord" });
+    const modelToSelect = "Civic";
+
+    //Act
+    wrapper.setData({ selectedModel: modelToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Civic"]);
+  });
+});
+
+describe("model-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What model is your vehicle?" });
+
+    //Act
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What model is your vehicle?");
+  });
+});
+
+describe("model-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["accord", "civic", "insight"] });
+
+    //Act
+    const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("accord,civic,insight");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(modelQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}

src/layouts/vehicle-model/model-question/model-question.vue

@@ -0,0 +1,46 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="models"
+    groupName="Choose Vehicle Model"
+    v-model="selectedModel"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "model-question",
+  data() {
+    return {
+      questionText: null,
+      selectedModel: null,
+      models: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make)});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.models = initialData;
+    }
+  },
+  watch: {
+    selectedModel(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>

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

@@ -0,0 +1,93 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-model.vue", () => {
+  test("Model question component is initized with api data", async (done) => {
+
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" };
+    const modelQuestionInitialData = ["accord", "civic", "insight"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      modelQuestionInitialData: modelQuestionInitialData,
+    } );
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started" });
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a model to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  modelQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      VehicleBannerWidget: [
+        {
+          GenericVehicleImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+        },
+      ],
+      SiteHeaderWidget: [
+        {
+          LogoImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+        },
+      ],
+    },
+    modelQuestionInitialData: modelQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock model question methods
+  modelQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleModel, mountOptions);
+  const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
+  modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vehicle-model/vehicle-model.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <funnelSubHeader 
+          :text="pageHeaderWidgets.HeaderText"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Make"
+          :backButtonAction="backButtonAction"
+          class="Header"
+        />
+        <modelQuestion v-model="selectedModel" ref="modelQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-model",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedModel: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const modelQuestionInitialDataPromise = modelQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "modelQuestionInitialData",
+        promise: modelQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
+      });
+    });
+  },
+
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
+  watch: {
+    selectedModel(model) {
+      this.$store.commit(this.storeMutations.UPDATE_MODEL, model);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MODEL, this.$route);
+    }
+  },
+
+  components: {
+    modelQuestion,
+    funnelHeader,
+    funnelSubHeader,
+    vehicleBanner,
+  },
+};
+</script>

src/store/index.js

@@ -64,6 +64,12 @@ export default createStore({
     updateYear(state, year) {
       state.order.vehicle.year = year;
     },
+    updateMake(state, make) {
+      state.order.vehicle.make = make;
+    },
+    updateModel(state, model) {
+      state.order.vehicle.model = model;
+    },
   },
   getters: {
     vehicle: state => state.order.vehicle