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


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