commit

src/layouts/welcome-page/welcome-page.spec.js

@@ -0,0 +1,92 @@
+import welcomePage from "@/layouts/welcome-page/welcome-page.vue";
+
+// Supporting files
+// Supporting files
+import { shallowMount } from '@vue/test-utils';
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { applicationConfig } from "@/constants/application-config";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+  
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+
+describe("welcome-page.vue", () => {
+    test("Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        // Act
+        const policyNumber = wrapper.findComponent({ ref: "policyNumber" });
+        const dateOfLoss = wrapper.findComponent({ ref: "dateOfLoss" });
+        const damageCause = wrapper.findComponent({ ref: "damageCause" });
+        const damageCity = wrapper.findComponent({ ref: "damageCity" });
+        const state = wrapper.findComponent({ ref: "state" });
+        const glassOnlyDamage = wrapper.findComponent({ ref: "glassOnlyDamage" });
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+        const email = wrapper.findComponent({ ref: "email" });
+
+
+        // Assert
+        expect(policyNumber.exists()).toBe(true);
+        expect(dateOfLoss.exists()).toBe(true);
+        expect(damageCause.exists()).toBe(true);
+        expect(damageCity.exists()).toBe(true);
+        expect(state.exists()).toBe(true);
+        expect(glassOnlyDamage.exists()).toBe(true);
+        expect(phoneNumber.exists()).toBe(true);
+        expect(email.exists()).toBe(true);
+    });
+});
+
+function setupMocks({
+    pageHeaderWidgetHeaderText = {},
+    pageFooterWidgetCmsContent = {},
+    mountOptionsMockData = {},
+}) {
+    //Mock api responses
+    const apiResponses = {
+      cmsContent: {
+        SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
+        VehicleBannerWidget: {
+          GenericVehicleImage:
+            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
+        },
+        SiteHeaderWidget: {
+          LogoImage:
+            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
+        },
+        SiteFooterWidget: pageFooterWidgetCmsContent,
+        
+      },
+    };
+  
+    mountOptionsMockData = {
+        ...mountOptionsMockData,
+        router: {
+            navigate: jest.fn(),
+        },
+    };
+
+    const apiPromise = Promise.resolve(apiResponses);
+  
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+    
+    const mountOptions = getMountOptions(mountOptionsMockData);
+
+    const wrapper = shallowMount(welcomePage, mountOptions);
+
+    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+    
+    return { wrapper, apiPromise };
+}
+

src/layouts/welcome-page/welcome-page.vue

@@ -9,8 +9,9 @@
                     <textboxQuestion
                         inputId="policyNumberField"
                         cmsWidgetName="PolicyNumberQuestion"
-                        v-model="welcomePageModel.policyNumber"
+                        v-model="policyNumber"
                         isRequired
+                        ref="policyNumber"
                         disableAutoFill
                         validationRules="policy-number-required" />
                 </div>
@@ -20,9 +21,10 @@
                     <textboxQuestion
                         type="date"
                         cmsWidgetName="DateOfLossQuestion"
-                        v-model="welcomePageModel.dateOfLoss"
+                        v-model="dateOfLoss"
                         inputId="dateOfLossField"
                         isRequired
+                        ref="dateOfLoss"
                         disableAutoFill
                         :max="new Date().toJSON().slice(0,10)"
                         :min="'1972-12-01'"
@@ -39,7 +41,7 @@
                 <div class="col">
                     <dropdownQuestion
                         cmsWidgetName="DamageCauseQuestion"
-                        v-model="welcomePageModel.damageCause"
+                        v-model="damageCause"
                         ref="damageCause"
                         inputId="damageCauseQuestionField"
                         :options="DamageCauseOptions"
@@ -53,8 +55,9 @@
                     <textboxQuestion
                         inputId="damageCityField"
                         cmsWidgetName="DamageCityQuestion"
-                        v-model="welcomePageModel.damageCity"
+                        v-model="damageCity"
                         isRequired
+                        ref="damageCity"
                         disableAutoFill
                         validationRules="loss-city-required" />
                 </div>
@@ -63,7 +66,7 @@
                 <div class="col">
                     <dropdownQuestion
                         cmsWidgetName="DamageStateQuestion"
-                        v-model="welcomePageModel.damageState"
+                        v-model="damageState"
                         ref="state"
                         inputId="8fdf9dc2e13e430eb57529499dceb3eb"
                         :options="stateOptions"
@@ -76,13 +79,14 @@
             <div class="row mt-4">
                     <buttonQuestion
                         cmsWidgetName="GlassOnlyQuestion"
-                        v-model="welcomePageModel.isDamageGlassOnly"
+                        v-model="isDamageGlassOnly"
                         inputId = "isDamageGlassOnly"
                         :answers="DamageGlassOnlyOptions"
                         :questionText="DamageGlassOnlyQuestion"
                         buttonTypeString="listButtonHorizontal"
                         validationRules="damage-option-required" 
                         isRequired
+                        ref="glassOnlyDamage"
                         disableAutoFill/>
             </div>
             <div class="row mt-4">
@@ -90,9 +94,10 @@
                     <textboxQuestion
                         inputId="phoneNumberField"
                         cmsWidgetName="PhoneNumberQuestion"
-                        v-model="welcomePageModel.phoneNumber"
+                        v-model="phoneNumber"
                         validationRules="phone-number-required|phone-number-format"
                         isRequired
+                        ref="phoneNumber"
                         mask="###-###-####"
                         disableAutoFill />
                 </div>
@@ -102,7 +107,8 @@
                     <textboxQuestion
                         inputId="emailField"
                         cmsWidgetName="EmailAddressQuestion"
-                        v-model="welcomePageModel.email"
+                        v-model="email"
+                        ref="email"
                         validationRules="email-address-required|email-address-format"
                         isRequired
                         disableAutoFill />
@@ -168,11 +174,8 @@
     export default {
         name: "welcome-page",
         mixins: [BaseFormMixin],
-        data: {
+        data() {
-            modelValue: {
+            return {
-                type: Object,
-                default: () => ({
-                    welcomePageModel: {
                     policyNumber: "",
                     policyZipCode: "",
                     dateOfLoss: "",
@@ -182,9 +185,7 @@
                     isDamageGlassOnly: "",
                     phoneNumber: "",
                     email: ""
-                    },
+            };
-                }),
-             },
         },
         async beforeRouteEnter(to, from, next) 
         {
@@ -220,11 +221,14 @@
             DamageCauseOptions() {
                 const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
                 const answerArray = [];
+                if(damageCauseAnswers)
+                {
                    for (let answer of Object.values(damageCauseAnswers)) {
                         if (answer?.Name) {
                             answerArray.push(answer.Name);
                         }
                     }
+                }
                 return answerArray;
             },
             DamageGlassOnlyOptions()