Created layout-helper

src/helpers/layout-helper.js

@@ -0,0 +1,29 @@
+export function settleAllPromises(layoutPromiseTable) {
+
+    // Pull our keys out of the promise 'table'
+    const promiseNames = Object.entries(layoutPromiseTable);
+
+    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].key;
+
+                // 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/unit-test-helper.js

@@ -1,6 +1,6 @@
 import { storeActions } from "@/constants/store-actions";
 
-export function getMountOptions(mockData, cmsMockData = null) {
+export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
   const mocks = {};
 
@@ -17,20 +17,12 @@ 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,
   };
 
   return { global };
-}
+}
-

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 = {
+      pageContentPromise: {
+        PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
+        RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+        isCmsContentReady: true,
+      },
+      vehicleYearsPromise: [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

@@ -2,7 +2,7 @@
   <div class="select-car">
     <div class="select-car-form rounded text-center">
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" />
+      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
     </div>
   </div>
 </template>
@@ -11,6 +11,7 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 
@@ -20,23 +21,33 @@ export default {
     return {
       pageHeaderWidgets: {},
       radioQuestionWidgets: {},
+      vehicleYears: [],
     };
   },
   computed: {},
   beforeRouteEnter(to, from, next) {
 
-    Promise.allSettled([
+    const layoutPromiseTable = [
-      fetchCmsContentForPage(to.query.fmgPage),
+      {
-      store.dispatch(storeActions.GET_VEHICLE_YEARS, {}),
+        key: "pageContentPromise",
-    ]).then(([contentPromise, getYearsPromise]) => {
+        promise: fetchCmsContentForPage(to.query.fmgPage),
-
+      },
+      {
+        key: "vehicleYearsPromise",
+        promise: store.dispatch(storeActions.GET_VEHICLE_YEARS, {}),
+      },
+    ];
 
+    settleAllPromises(layoutPromiseTable).then((resultMap) => {
       // Call our next function to transition to the next page.
       next((vm) => {
-        vm.pageHeaderWidgets = contentPromise.value.PageHeaderWidget[0];
+        vm.pageHeaderWidgets = resultMap.pageContentPromise.PageHeaderWidget[0];
-        vm.radioQuestionWidgets = contentPromise.value.RadioQuestionWidget[0];
+        vm.radioQuestionWidgets = resultMap.pageContentPromise.RadioQuestionWidget[0];
+        vm.vehicleYears = resultMap.vehicleYearsPromise;
+
       });
     });
+
   },
   components: {
     yearQuestion,

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,11 +9,7 @@ export default {
     name: "year-question",
     props: {
         questionText: String,
-    },
+        years: Array
-    data() {
-        return {
-            years: [],
-        };
     },
     created() {
     },

src/mixins/base-mixin.spec.js

@@ -23,60 +23,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 }) {