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

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()
}));

/** @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 };
}

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 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,
            {},
            {},
            mockvehicles);
    });
    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);
    });
    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);
    });
});