Merge pull request #65 from Safelite/feature/CSR-6

Feature/csr 6

jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 60,
+      statements: 70,
     },
   },
 };

src/helpers/cms-content-helper.js

@@ -0,0 +1,29 @@
+import { storeActions } from "@/constants/store-actions.js";
+import { widgetNames } from "@/constants/widget-names.js";
+import store from "@/store";
+
+export function fetchCmsContentForPage(fmgPage) {
+    return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
+        const pageDataFromCms = {
+            isCmsContentReady: false
+        };
+
+        response.data.Result.forEach((widget) => {
+            if (Object.values(widgetNames).includes(widget.Type)) {
+                // If we already have this widget, push it on the collection
+                if (widget.Type in pageDataFromCms) {
+                    pageDataFromCms[widget.Type].push(widget.Model);
+                    return;
+                }
+
+                pageDataFromCms[widget.Type] = [widget.Model];
+            }
+        });
+
+        // Our 'Page' is ready because we have data now
+        pageDataFromCms.isCmsContentReady = true;
+
+        return pageDataFromCms;
+    });
+}
+

src/helpers/cms-helper.spec.js

@@ -0,0 +1,53 @@
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { dispatch } from "@/store";
+
+jest.mock("@/store", () => ({
+    dispatch: jest.fn()
+}));
+
+it("cms-content-helper: Should return data from CMS", () => {
+
+    // Arrange
+    const cmsMockData = {
+        Result: [
+            {
+                Type: "VehicleBannerWidget",
+                Model: {
+                    ImageId: "28452dcb-7762-4cc9-ab09-7643d0b89203",
+                    GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+                    GenericVehicleImageFilePath: "images/default-source/default-album/blurred-image.jpg"
+                }
+            },
+            {
+                Type: "PageHeaderWidget",
+                Model: {
+                    "HeaderText": "Select a year to get started"
+                }
+            },
+            {
+                Type: "PageHeaderWidget",
+                Model: {
+                    "HeaderText": "Select a model"
+                }
+            },
+            {
+                Type: "RadioQuestionWidget",
+                Model: {
+                    "QuestionText": "What year is your vehicle?"
+                }
+            }
+        ]
+    }
+
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+
+    // Act
+    fetchCmsContentForPage('testPage').then((response) => {
+        
+        // Assert
+        expect(response.isCmsContentReady).toBe(true);
+        expect(response.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
+    });
+
+});
+

src/helpers/layout-helper.js

@@ -0,0 +1,29 @@
+export function settleAllPromises(promiseResultMap) {
+
+    // Pull our keys out of the promise 'table'
+    const promiseNames = Object.entries(promiseResultMap);
+
+    return Promise.allSettled(promiseNames.map(e => e[1]).map(n => n.promise))
+        .then(results => {
+
+            const resultMap = {};
+
+            // Build a map of the results
+            for (let i = 0; i < results.length; ++i) {
+                
+                const promiseName = promiseNames[i][1].resultKey;
+                
+                // Some Promises like the cms content call don't have a 'data' field 
+                // when returned, so other promises do. Map the results to the object
+                // so that the object is the return data.
+
+                if (results[i].value.data === undefined) {
+                    resultMap[promiseName] = results[i].value
+                } else {
+                    resultMap[promiseName] = results[i].value.data;
+                }
+            }
+
+            return resultMap;
+        });
+}

src/helpers/layout-helper.spec.js

@@ -0,0 +1,28 @@
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+it("layout-helper: Should settle all promises and return mapped promise results", () => {
+
+    // Arrange
+    const mockPromiseOne = Promise.resolve({ data: "test-data" });
+    const mockPromiseTwo = Promise.resolve({ data: "test-data-two" });
+
+    const promiseResultMap = [
+        {
+            resultKey: "MockResultOne",
+            promise: mockPromiseOne,
+        },
+        {
+            resultKey: "MockResultTwo",
+            promise: mockPromiseTwo,
+        },
+    ];
+
+    // Act
+    settleAllPromises(promiseResultMap).then(results => {
+
+        // Assert
+        expect(results.MockResultOne).toEqual('test-data');
+        expect(results.MockResultTwo).toEqual('test-data-two');
+    });
+
+})

src/helpers/unit-test-helper.js

@@ -1,7 +1,7 @@
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 
-export function getMountOptions(mockData, cmsMockData = null) {
+export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
   const mocks = {};
 
@@ -18,16 +18,9 @@ export function getMountOptions(mockData, cmsMockData = null) {
     }
   });
 
-  if(cmsMockData){
-    mocks.GetContentFromCms = jest.fn();
-    mocks.GetContentFromCms.mockImplementation(() => 
-    {
-      return cmsMockData;
-    });
-  }
-
   // Mock store actions from js file
   mocks.storeActions = storeActions;
+
   const global = {
     mocks: mocks,
     plugins: [store]

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

@@ -1,27 +1,56 @@
-import { shallowMount, flushPromises  } from "@vue/test-utils";
+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 { 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-year.vue", () => {
   test("vehicle-year.vue should render data from CMS", async () => {
 
     // Arrange
-    const cmsMockData = {
+
-      PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
+    // Our mock data for our call to settleAllPromises
-      RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+    const mockData = {
+      getPageContent: {
+        PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
+        RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+        isCmsContentReady: true,
+      },
+      getVehicleYear: [2023, 2022, 2021]
     }
 
-    const mountOptions = getMountOptions({}, cmsMockData);
+    // our router information needed.
+    const to = {
+      query: {
+        fmgPage: 'vehicle-year'
+      }
+    };
+
+    const mountOptions = getMountOptions(mockData);
+
+    // our mock implementation of settleAllPromises
+    settleAllPromises.mockImplementation(() => { return Promise.resolve(mockData);});
 
     // Act
     const wrapper = shallowMount(vehicleYear, mountOptions);
-    await flushPromises();
+
+    // 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 = await wrapper.findComponent({name: 'year-question'});
+    const yearQuestion = wrapper.findComponent({ name: 'year-question' });
     expect(yearQuestion.attributes("questiontext")).toEqual("What year is your vehicle?");
   });
 });

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

@@ -1,37 +1,68 @@
 <template v-if="isCmsContentReady">
-<div class="select-car">
+  <div class="select-car">
     <div class="select-car-form rounded text-center">
-        <vehicleBanner />
+      <vehicleBanner />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+      <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-        <yearQuestion :questionText="radioQuestionWidgets.QuestionText" />
+      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
+// Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/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";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
 export default {
-    name: "vehicle-year",
+  name: "vehicle-year",
-    data() {
+  data() {
-        return {
+    return {
-            pageHeaderWidgets: {},
+      pageHeaderWidgets: {},
-            radioQuestionWidgets: {},
+      radioQuestionWidgets: {},
-        };
+      vehicleYears: [],
-    },
+    };
-    computed: {},
+  },
-    async created() {
+  computed: {},
-        const pageContent = await this.GetContentFromCms();
+  beforeRouteEnter(to, from, next) {
-        this.pageHeaderWidgets = pageContent.PageHeaderWidget[0];
+
-        this.radioQuestionWidgets = pageContent.RadioQuestionWidget[0];
+    const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    },
+    const getVehicleYearPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
-    components: {
+
-        yearQuestion,
+    const promiseResultMap = [
-        pageHeader,
+      {
-        vehicleBanner,
+        resultKey: "getPageContent",
-    },
+        promise: contentPromise,
+      },
+      {
+        resultKey: "getVehicleYear",
+        promise: getVehicleYearPromise,
+      },
+    ];
+
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+
+      // Call our next function to transition to the next page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
+        vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0];
+        vm.vehicleYears = resultMap.getVehicleYear;
+      });
+      
+    });
+
+  },
+  components: {
+    yearQuestion,
+    pageHeader,
+    vehicleBanner
+  },
 };
 </script>
 

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

@@ -1,28 +1 @@
-import { shallowMount, flushPromises } from "@vue/test-utils";
+test.todo("some test to be written in the future");
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { storeActions } from "@/constants/store-actions.js";
-import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-
-describe('year-question.vue', () => {
-
-    test('year-question should call API to get years', async () => {
-        // Arrange
-        const mockDataAndAction = {
-            actionList: [{ actionName: storeActions.GET_VEHICLE_YEARS, data: ["2023", "2022", "2021"], 
-        },
-            ],
-        };
-
-        const mountOptions = getMountOptions(mockDataAndAction);
-
-        // Act
-        const wrapper = shallowMount(yearQuestion, mountOptions);
-        await wrapper.setProps({questionText: 'What year is your vehicle?'})
-        await flushPromises();
-
-        // Assert
-        const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'});
-        expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?");
-        expect(radioQuestion.attributes('answers')).toBe('2023,2022,2021');
-    });
-});

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

@@ -9,16 +9,9 @@ export default {
     name: "year-question",
     props: {
         questionText: String,
-    },
+        years: Array
-    data() {
-        return {
-            years: [],
-        };
     },
     created() {
-        this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE_YEARS, {}).then((response) => {
-            this.years = response.data;
-        });
     },
     components: {
         radioQuestion,

src/mixins/base-mixin.js

@@ -23,30 +23,6 @@ export default {
 
       return this.$store.dispatch(type, payload);
     },
-    GetContentFromCms() {
-      return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA,{ pageName: this.$route.query.fmgPage }).then((response) => {
-
-        const pageDataFromCms = {};
-
-        response.data.Result.forEach((widget) => {
-          if (Object.values(this.widgetNames).includes(widget.Type)) {
-            // If we already have this widget, push it on the collection
-            if (widget.Type in pageDataFromCms) {
-              pageDataFromCms[widget.Type].push(widget.Model);
-              return;
-            }
-
-            pageDataFromCms[widget.Type] = [widget.Model];
-
-          }
-        });
-
-        // Our 'Page' is ready because we have data now
-        this.isCmsContentReady = true;
-
-        return pageDataFromCms;
-      });
-    },
   },
   computed: {
     storeActions() {

src/mixins/base-mixin.spec.js

@@ -1,7 +1,6 @@
 import baseMixin from "@/mixins/base-mixin"
 import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
-import { flushPromises  } from "@vue/test-utils";
 
 describe("baseMixin.js", () => {
     test('dispatchNonblockingStoreAction: calls dispatch with type and payload', () => {
@@ -23,60 +22,6 @@ describe("baseMixin.js", () => {
 
         expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
     });
-
-    test('GetContentFromCms: Should return mapped data and call dispatchNonblockingStoreAction', async () => {
-        const mixIn = getMixInInstance({});
-
-        // Mock dispatch action
-        mixIn.methods.dispatchNonBlockingStoreAction = jest.fn();
-        mixIn.methods.dispatchNonBlockingStoreAction.mockImplementation((action) => {
-            if (action === 'getPageData') {
-                return Promise.resolve({
-                    data: {
-                        Result: [
-                            {
-                                Type: "PageConfigWidget",
-                                Model: {
-                                    LayoutNames: [
-                                        "None",
-                                        "vehicle-year"
-                                    ],
-                                    LayoutStyle: "vehicle-year"
-                                }
-                            },
-                            {
-                                Type: "RadioQuestionWidget",
-                                Model: {
-                                    "QuestionText": "What year is your vehicle?"
-                                }
-                            },
-                            {
-                                Type: "RadioQuestionWidget",
-                                Model: {
-                                    "QuestionText": "This is a second radio question"
-                                }
-                            },
-                            {
-                                Type: "PageHeaderWidget",
-                                Model: {
-                                    "HeaderText": "Select a year to get started"
-                                }
-                            }
-                        ]
-                    },
-                });
-            }
-        });
-
-        const result = await mixIn.methods.GetContentFromCms();
-        await flushPromises();
-
-
-        expect(mixIn.methods.dispatchNonBlockingStoreAction).toBeCalledWith(storeActions.GET_PAGE_DATA, { pageName: 'test-page'});
-
-        expect(result.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
-
-    });
 })
 function getMixInInstance({ isDispatchSuccess = true }) {