DigitalConsumer.ISS/src/layouts/vehicle-style/vehicle-style.spec.js

// 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 { nextTick } from "vue";
import { useMainStore } from "@/store";
import router from "@/router";
import { applicationConfig } from "@/constants/application-config";

// Components
import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";

jest.mock("@/router", () => ({
    overrideNavigation: jest.fn(),
}));

// 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("vehicle-style.vue", () => {

    test("Style question component is initized with api data", async () => {
        //Arrange
        const styleQuestionInitialData = ["2 Door", "4 Door"];
        const { wrapper, apiPromise } = setupMocks({
            styleQuestionInitialData: styleQuestionInitialData,
        });

        //Act
        vehicleStyle.beforeRouteEnter.call(
            wrapper.vm,
            { query: { issPage: "vehicle-style" } },
            undefined,
            (c) => c(wrapper.vm)
        );

        //Assert
        return apiPromise.finally(() => {
            try {
                expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
                    styleQuestionInitialData
                );
            }
            catch (e) {
                throw e
            }
        });
    });

    test("BackButtonAction triggers a router.navigate change", async () => {
        //Arrange
        const { wrapper, apiPromise } = setupMocks({
            pageHeaderWidgetHeaderText: "Select a style to get started",
            mountOptionsMockData: {
                router: {
                    navigate: jest.fn(),
                },
            },
        });

        //Act
        vehicleStyle.beforeRouteEnter.call(
            wrapper.vm,
            { query: { issPage: "vehicle-style" } },
            undefined,
            (c) => c(wrapper.vm)
        );
        wrapper.vm.backButtonAction();
        await nextTick();

        //Assert
        return apiPromise.finally(() => {
            try {
                expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
            }
            catch (e) {
                throw e
            }
        });
    });

    test("Model set, arePagePrerequisitesValid should be true ", () => {
        //Arrange
        const { wrapper } = setupMocks({ });

        useMainStore().order.vehicle = { year: 2011, make: "ford", model: "mustang", style: null }

        //Act
        const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

        //Assert
        expect(arePagePrerequisitesValid).toBe(true);
    });

    test("there is only one vehicle style => autoselect and move to vehicle damage", async () => {
        //Arrange
        const { wrapper } = setupMocks({
            styleQuestionInitialData: ["2 door sedan"],
        });

        useMainStore().applicationUser.pageData = {
            "part-questions": null,
            "vehicle-make": {},
            "vehicle-model": {},
            "vehicle-style": {},
        }

        useMainStore().updateVehicleStyle = jest.fn();
        useMainStore().setVehicle = jest.fn().mockReturnValue(Promise.resolve())
        
        // Act
        await vehicleStyle.beforeRouteEnter.call(
            wrapper.vm,
            { query: { issPage: "vehicle-style" } },
            undefined,
            (c) => c(wrapper.vm)
        );

        // Assert
        expect(useMainStore().updateVehicleStyle).toHaveBeenCalledWith("2 door sedan");
        expect(router.overrideNavigation).toHaveBeenCalled();
    });

    
    test("there is only one vehicle style and vehicle-damage was visited => don't autoselect or move to vehicle damage", async () => {
        //Arrange
        const { wrapper } = setupMocks({
            styleQuestionInitialData: ["2 door sedan"],
        });

        useMainStore().updateVehicleStyle = jest.fn();
        useMainStore().setVehicle = jest.fn().mockReturnValue(Promise.resolve())

        useMainStore().applicationUser.pageData = {
            "part-questions": null,
            "vehicle-make": {},
            "vehicle-model": {},
            "vehicle-style": {},
            "vehicle-damage": {},
        }

        // Act
        await vehicleStyle.beforeRouteEnter.call(
            wrapper.vm,
            { query: { issPage: "vehicle-style" } },
            undefined,
            (c) => c(wrapper.vm)
        );

        // Assert
        expect(useMainStore().updateVehicleStyle).not.toHaveBeenCalledWith("2 door sedan");
        expect(router.overrideNavigation).toHaveBeenCalled();
    });
});

function setupMocks({
    vehicleStyleQuestionCmsContent = {},
    styleQuestionInitialData = {},
    pageHeaderWidgetHeaderText = {},
    mountOptionsMockData = {},
}) {
    //Mock api responses
    const apiResponses = {
        cmsContent: {
            SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
            VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
            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`,
        },
        },
        styleQuestionInitialData: styleQuestionInitialData,
    };

    const apiPromise = Promise.resolve(apiResponses);

    settleAllPromises.mockImplementation(() => apiPromise);
    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());

    //Mock style question methods
    styleQuestion.methods = {
        loadInitialData: jest.fn(),
        initializeComponent: jest.fn(),
    };

    
    const mountOptions = getMountOptions(mountOptionsMockData);
    const wrapper = shallowMount(vehicleStyle, mountOptions);

    const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
    styleQuestionWrapper.vm.initializeComponent = 
        styleQuestion.methods.initializeComponent;
    
    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;

    return { wrapper, apiPromise };
}