import welcomePage from '@/layouts/welcome-page/welcome-page.vue'; // 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'; import routerParams from '@/router/router-constants/router-params'; import { getRandomString } from '@/helpers/data-generation.js'; import { createTestingPinia } from '@pinia/testing'; // Mock our module for promises. jest.mock('@/helpers/layout-helper.js', () => jest.fn()); // Mock fetchCmsContentForPage jest.mock('@/helpers/cms-content-helper', () => ({ fetchCmsContentForPage: jest.fn() })); /** @ignore */ function setupMocks({ pageHeaderWidgetHeaderText = {}, pageFooterWidgetCmsContent = {}, mountOptionsMockData = {}, policies = [], getCoveragePolicyInfoResponse }) { useMainStore().getCoveragePolicyInfo = jest.fn().mockImplementation(() => Promise.resolve({ data: 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 } }; 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 }; } function getMountedComponent(mainInitialState = {}, initialData = {}) { const mountOptions = getMountOptions({ router: { navigate: jest.fn() } }); mountOptions.global.stubs = { siteHeader: true, recalModal: true, contentGroupModal: true, alert: true }; mountOptions.global.plugins = [createTestingPinia({ initialState: { main: mainInitialState } })]; //mountOptions.mixins = [mockMixin]; mountOptions.data = () => ( initialData ); const apiResponses = { supportingItems: [] }; const apiPromise = Promise.resolve(apiResponses); settleAllPromises.mockImplementation(() => apiPromise); fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); const wrapper = shallowMount(welcomePage, mountOptions); return { wrapper }; } 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); }); test('Policy zip field should be visible if coverage is enabled', async () => { // Arrange const { wrapper } = setupMocks({}); useMainStore().issConfig.isCoverageEnabled = true; // Act await wrapper.vm.$nextTick(); const policyZip = wrapper.findComponent({ ref: 'policyZip' }); // Assert expect(policyZip.exists()).toBe(true); }); test('Policy zip field should be hidden if coverage is not enabled', async () => { // Arrange const { wrapper } = setupMocks({}); useMainStore().issConfig.isCoverageEnabled = false; // Act await wrapper.vm.$nextTick(); const policyZip = wrapper.findComponent({ ref: 'policyZip' }); // Assert expect(policyZip.exists()).toBe(false); }); }); describe('navigation', () => { test('if duplicates found, navigate to duplicate check page', async () => { // Arrange const accountNumber = getRandomString(5, 5); const policyNumber = getRandomString(5, 5); const dateOfLoss = getRandomString(5, 5); const { wrapper } = getMountedComponent({ order: { policy: { policyNumber: policyNumber, dateOfLoss: dateOfLoss } }, issConfig: { accountNumber: accountNumber } }); const duplicatesExist = { policyLookupResponse: {}, duplicateCheckResponse: [{ test: 'a'}] }; settleAllPromises.mockImplementation(() => Promise.resolve(duplicatesExist)); // Act await wrapper.vm.forwardButtonAction(); // Assert expect(wrapper.vm.mainStore.getDuplicates).toHaveBeenCalledWith( { accountNumber: accountNumber, policyNumber: policyNumber, dateOfLoss: dateOfLoss }); expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES, undefined, {}, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } ); }); 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({ vehiclesFound: mockvehicles }); useMainStore().issConfig.isCoverageEnabled = 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_POLICY_VERIFIED_WITH_VEHICLES, undefined, {}, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } ); }); test('if policy is found, but no vehicles, navigate to vehicle-selection page', async () => { // Arrange const { wrapper } = setupMocks({ policies: [{}] }); await wrapper.setData({ vehiclesFound: null }); useMainStore().issConfig.isCoverageEnabled = 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_POLICY_VERIFIED_NO_VEHICLES, undefined, {}, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } ); }); test('if policy is not found, navigate to policy-holder-details page', async () => { // Arrange const { wrapper } = setupMocks({ policies: null }); useMainStore().issConfig.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_POLICY_UNVERIFIED, undefined, {}, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } ); }); });