Merge pull request #102 from Safelite/feature/CSR-75_vehicle-makes

Feature/csr 75 vehicle makes

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

@@ -17,7 +17,7 @@
             data-test="button"
             :groupName="groupName"
             textPosition="text-start"
-            isRequired=true
+            :isRequired="true"
             :value="modelValue"
             screenReaderOnlyText="(opens new window)"
           />
@@ -46,3 +46,15 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.button_question {
+  height: calc(100vh - 280px);
+
+  .car_list {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 320px);
+    -webkit-overflow-scrolling: touch;
+  }
+}
+</style>

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle_banner mb-4 text-center">
+  <div class="vehicle_banner mb-3 text-center">
     <img
       class="vehicle-image img-fluid blurrycar"
       :src="vehicleImageSrc"

src/helpers/cms-content-helper.js

@@ -22,4 +22,4 @@ export function fetchCmsContentForPage(fmgPage) {
 
       return pageDataFromCms;
     });
-}
+}

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

@@ -0,0 +1,82 @@
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-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("make-question.vue", () => {
+  test("Selected make is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "honda" });
+    const makeToSelect = "ford";
+
+    //Act
+    wrapper.setData({ selectedMake: makeToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["ford"]);
+  });
+});
+
+describe("make-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What make is your vehicle?" });
+
+    //Act
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What make is your vehicle?");
+  });
+});
+
+describe("make-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["honda", "ford", "dodge"] });
+
+    //Act
+    const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("honda,ford,dodge");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(makeQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}

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

@@ -0,0 +1,46 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="makes"
+    groupName="Choose Vehicle Make"
+    v-model="selectedMake"
+  />
+</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: "make-question",
+  data() {
+    return {
+      questionText: null,
+      selectedMake: null,
+      makes: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.makes = initialData;
+    }
+  },
+  watch: {
+    selectedMake(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>

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

@@ -0,0 +1,93 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-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-make.vue", () => {
+  test("Make question component is initized with api data", async (done) => {
+
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
+    const makeQuestionInitialData = ["honda", "ford", "dodge"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      makeQuestionInitialData: makeQuestionInitialData,
+    } );
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a make to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  makeQuestionInitialData = {},
+  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",
+        },
+      ],
+    },
+    makeQuestionInitialData: makeQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock make question methods
+  makeQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleMake, mountOptions);
+  const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
+  makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,3 +1,77 @@
 <template>
-<p> Vehicle Make Layout - Do Something Cool Here </p>
+  <div class="container-fluid shadow rounded-3 p-0">
-</template>
+    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <makeQuestion v-model="selectedMake" ref="makeQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import pageHeader from "@/ux-components/header/header";
+import siteHeader from "@/common-components/site-header/site-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-make",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedMake: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "makeQuestionInitialData",
+        promise: makeQuestionInitialDataPromise,
+      },
+    ];
+    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.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
+      });
+    });
+  },
+
+  watch: {
+    selectedMake(make) {
+      this.$store.commit(this.storeMutations.UPDATE_MAKE, make);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route);
+    }
+  },
+
+  components: {
+    makeQuestion,
+    pageHeader,
+    siteHeader,
+    vehicleBanner,
+  },
+};
+</script>

src/layouts/vehicle-year/vehicle-year.vue

@@ -67,7 +67,7 @@ export default {
   watch: {
     selectedYear(year) {
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.navigate(navigationScenarios.SELECTED_YEAR, this.$route);
+      this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route);
     }
   },
 
@@ -79,15 +79,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.select-car {
-  height: calc(100vh - 56px);
-
-  .car_list {
-    // Height will be determined by overall height of content above list
-    height: calc(100% - 300px);
-    -webkit-overflow-scrolling: touch;
-  }
-}
-</style>

src/mixins/base-mixin.js

@@ -1,5 +1,6 @@
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; 
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
@@ -31,6 +32,9 @@ export default {
     storeMutations() {
       return storeMutations;
     },
+    navigationScenarios() {
+      return navigationScenarios;
+    },
     widgetNames() {
       return widgetNames;
     },

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

@@ -39,4 +39,4 @@ const routingTable = [
   },
 ];
 
-export { routingTable };
+export { routingTable };

src/store/index.js

@@ -65,6 +65,9 @@ export default createStore({
       state.order.vehicle.year = year;
     },
   },
+  getters: {
+    vehicle: state => state.order.vehicle
+  },
   actions: {
     // Vehicle API Actions
     getVehicleYears(context) {

src/ux-components/list-button/list-button.vue

@@ -28,7 +28,7 @@ export default {
   props: {
     isCheckbox: Boolean,
     groupName: String, /* Required, unique for each button GROUP */
-    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
+    buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
     isRequired: Boolean, /* Optional, default is false */
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */