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"; import { useMainStore } from "@/store"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; // 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(false); expect(state.exists()).toBe(false); expect(glassOnlyDamage.exists()).toBe(false); expect(phoneNumber.exists()).toBe(true); expect(email.exists()).toBe(true); }); }); describe("navigation", () => { test("if policy and vehicles are found, navigate to policy-vehicle page", async () => { // Arrange const mockvehicles = [ { vin: "TEST_VIN", }, { vin: "TEST_VIN2", } ]; const { wrapper } = setupMocks({ policies: [{ vehicles: [ { vin: "TEST_VIN" }, { vin: "TEST_VIN2" } ] }] }); await wrapper.setData({ isCoverageEnabled: true, zipCodeMatch: true, }); useMainStore().order.policy.policyNumber = "p_0001"; useMainStore().order.policy.dateOfLoss = "2022-01-28"; useMainStore().order.accountNumber = "00000"; // Act await wrapper.vm.forwardButtonAction(); // Assert expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( navigationScenarios.CLICKED_FORWARD_WITH_POLICY_AND_VEHICLES, undefined, {}, {}, mockvehicles ); }); test("if policy is found, but no vehicles, navigate to vehicle-selection page", async () => { // Arrange const { wrapper } = setupMocks({ policies: [{}] }); await wrapper.setData({ isCoverageEnabled: true, vehiclesCount: 0, vehiclesFound: null, zipCodeMatch: true, }); useMainStore().order.policy.policyNumber = "p_0001"; useMainStore().order.policy.dateOfLoss = "2022-01-28"; useMainStore().order.accountNumber = "00000"; // Act await wrapper.vm.forwardButtonAction(); // Assert expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( navigationScenarios.CLICKED_FORWARD_WITH_POLICY_AND_NO_VEHICLES, undefined ); }); test("if policy is not found, navigate to policy-holder-details page", async () => { // Arrange const { wrapper } = setupMocks({ policies: null }); await wrapper.setData({ isCoverageEnabled: true, }); useMainStore().order.policy.policyNumber = "p_0001"; useMainStore().order.policy.dateOfLoss = "2022-01-28"; useMainStore().order.accountNumber = "00000"; // Act await wrapper.vm.navigateForward(); // Assert expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( navigationScenarios.CLICKED_FORWARD_WITH_NO_POLICY, undefined ); }); test("if zip code entered does not match zip on policy, navigate to policy-holder-details page", async () => { // Arrange const { wrapper } = setupMocks({ policies: [{}] }); await wrapper.setData({ isCoverageEnabled: true, zipCodeMatch: false, }); useMainStore().order.policy.policyNumber = "p_0001"; useMainStore().order.policy.dateOfLoss = "2022-01-28"; useMainStore().order.accountNumber = "00000"; // Act await wrapper.vm.navigateForward(); // Assert expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( navigationScenarios.CLICKED_FORWARD_WITH_NO_POLICY, undefined ); }); }); function setupMocks({ pageHeaderWidgetHeaderText = {}, pageFooterWidgetCmsContent = {}, mountOptionsMockData = {}, policies = [], getCoveragePolicyInfoResponse }) { useMainStore().getCoveragePolicyInfo = jest.fn().mockImplementation(() => { return Promise.resolve({ data: getCoveragePolicyInfoResponse ? getCoveragePolicyInfoResponse : { policies: [ { insureds: [ { customerId: "TEST_ID" }, ], vehicles: [ { vin: "TEST_VIN" }, { vin: "TEST_VIN2" } ] }, ], }, }) }) //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, }, policyLookupResponse: { policies: policies } }; 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; wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => ""); return { wrapper, apiPromise }; }