Merge pull request #97 from Safelite/archived/apiRefactoring-encapsulated

Archived/api refactoring encapsulated

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

@@ -1,6 +1,7 @@
 import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -10,72 +11,84 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 }));
 
 describe("vehicle-year.vue", () => {
-  test("vehicle-year.vue should render data from CMS", async () => {
-    // Arrange
+  test("Year question component is initized with api data", async (done) => {
 
-    // Our mock data for our call to settleAllPromises
-    const mockData = {
-      getPageContent: {
-        PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
-        RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
-        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",
-          },
-        ],
-        isCmsContentReady: true,
-      },
-      getVehicleYear: [2023, 2022, 2021],
-      store: {
-        commit: jest.fn(),
-        year: null,
-      },
-      router: {
-        push: jest.fn(),
-      },
-    };
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
+    const yearQuestionInitialData = ["2023", "2022", "2021"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      yearQuestionInitialData: yearQuestionInitialData,
+    } );
 
-    // our router information needed.
-    const to = {
-      query: {
-        fmgPage: "vehicle-year",
-      },
-    };
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
 
-    const mountOptions = getMountOptions(mockData);
-
-    // our mock implementation of settleAllPromises
-    settleAllPromises.mockImplementation(() => {
-      return Promise.resolve(mockData);
+    //Assert
+    apiPromise.finally(() => {
+      expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData);
+      done();
     });
-
-    // Act
-    const wrapper = shallowMount(vehicleYear, mountOptions);
-    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
-
-    // Call our beforeRouteEnter on the component.
-    // This passes (c) => c(wrapper.vm) so that next can be called and our
-    // data can be set.
-    vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) =>
-      c(wrapper.vm)
-    );
-
-    await nextTick(); // Wait for the DOM to update.
-
-    // Assert
-    const header = await wrapper.find(".Header");
-    expect(header.attributes("text")).toEqual("Select a year to get started");
-
-    const yearQuestion = wrapper.findComponent({ name: "year-question" });
-    expect(yearQuestion.attributes("questiontext")).toEqual(
-      "What year is your vehicle?"
-    );
   });
 });
+
+describe("vehicle-year.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a year to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  yearQuestionInitialData = {},
+  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",
+        },
+      ],
+      isCmsContentReady: true,
+    },
+    yearQuestionInitialData: yearQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock year question methods
+  yearQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleYear, mountOptions);
+  const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
+  yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

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

@@ -5,7 +5,7 @@
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
         <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-        <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+        <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>
   </div>
@@ -20,15 +20,11 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import store from "@/store";
-import { storeActions } from "@/constants/store-actions.js";
 export default {
   name: "vehicle-year",
   data() {
     return {
       pageHeaderWidgets: {},
-      radioQuestionWidgets: {},
-      vehicleYears: [],
       siteHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedYear: null,
@@ -37,34 +33,30 @@ export default {
   computed: {},
 
   beforeRouteEnter(to, from, next) {
+    
     // Call APIs
-    const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const getVehicleYearPromise = store.dispatch(
-      storeActions.GET_VEHICLE_YEARS,
-      {}
-    );
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
 
     // Settle promises and get results
     const promiseResultMap = [
       {
-        resultKey: "getPageContent",
-        promise: contentPromise,
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
       },
       {
-        resultKey: "getVehicleYear",
-        promise: getVehicleYearPromise,
+        resultKey: "yearQuestionInitialData",
+        promise: yearQuestionInitialDataPromise,
       },
     ];
     settleAllPromises(promiseResultMap).then((resultMap) => {
+
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
-        vm.siteHeaderWidget = resultMap.getPageContent.SiteHeaderWidget[0];
-        vm.radioQuestionWidgets =
-          resultMap.getPageContent.RadioQuestionWidget[0];
-        vm.vehicleBannerWidget =
-          resultMap.getPageContent.VehicleBannerWidget[0];
-        vm.vehicleYears = resultMap.getVehicleYear;
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
       });
     });
   },

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

@@ -1,25 +1,80 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-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("year-question.vue", () => {
-  test("year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.", async () => {
-    // Act
-    const wrapper = shallowMount(yearQuestion);
-    await wrapper.setProps({
-      questionText: "What year is your vehicle?",
-      years: ["2023", "2022", "2021"],
-      modelValue: "2020",
-    });
-    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
+  test("Selected year is emitted upon selection.", async () => {
 
-    // Assert
-    const radioQuestion = await wrapper.findComponent({
-      name: "buttonQuestion",
-    });
-    expect(radioQuestion.attributes("questiontext")).toBe(
-      "What year is your vehicle?"
-    );
-    expect(radioQuestion.attributes("answers")).toBe("2023,2022,2021");
-    expect(wrapper.componentVM.modelValue).toBe("2020");
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "2020" });
+    const yearToSelect = "2021";
+
+    //Act
+    wrapper.setData({ selectedYear: yearToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
   });
 });
+
+describe("year-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What year is your vehicle?" });
+
+    //Act
+    yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
+  });
+});
+
+describe("year-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2023", "2022", "2021"] });
+
+    //Act
+    const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
+    yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(yearQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}

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

@@ -9,22 +9,34 @@
 
 <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: "year-question",
   data() {
     return {
+      questionText: null,
       selectedYear: null,
-    };
+      years: Array,
+    }
   },
   props: {
-    questionText: String,
-    years: Array,
     modelValue: String,
   },
   components: {
     buttonQuestion,
   },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.years = initialData;
+    }
+  },
   watch: {
     selectedYear(val) {
       this.$emit("update:modelValue", val);