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

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

// Supporting files
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { storeActions } from "@/constants/store-actions";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import router from "@/router";
import store from "@/store";
import { storeMutations } from "@/constants/store-mutations";

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

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

describe("vehicle-style.vue", () => {
    beforeEach(() => {
        jest.clearAllMocks();
    });

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

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

        //Assert
        apiPromise.finally(() => {
            expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
                styleQuestionInitialData
            );
            done();
        });
    });

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

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

        //Assert
        apiPromise.finally(() => {
            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
            done();
        });
    });

    test("setVehicle triggers a dispatchStoreAction commit", async (done) => {
        //Arrange
        const { wrapper, apiPromise } = setupMocks({
            pageHeaderWidgetHeaderText: "Select a style to get started",
            mountOptionsMockData: {
                actionList: [
                    {
                        actionName: storeActions.SET_VEHICLE,
                        data: "mockData",
                    },
                ],
            },
        });

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

        //Assert
        apiPromise.finally(() => {
            expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
            done();
        });
    });

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

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

        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
        await nextTick();

        //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"],
        });

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

        // Assert
        expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "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"],
            mountOptionsMockData: {
                store: {
                    getters: {
                        applicationUser: {
                            pageData: {
                                "part-questions": null,
                                "vehicle-make": {},
                                "vehicle-model": {},
                                "vehicle-style": {},
                                "vehicle-damage": {},
                            },
                        },
                    },
                },
            },
        });

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

        // Assert
        expect(store.commit).not.toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "2 door sedan");
        expect(router.overrideNavigation).not.toHaveBeenCalled();
    });
});

function setupMocks({
    vehicleStyleQuestionCmsContent = {},
    styleQuestionInitialData = {},
    pageHeaderWidgetHeaderText = {},
    mountOptionsMockData = {},
}) {
    //Mock api responses
    const apiResponses = {
        cmsContent: {
            FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
            VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
            VehicleBannerWidget: {
                GenericVehicleImage:
                    "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
            },
            FunnelHeaderWidget: {
                LogoImage:
                    "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
            },
        },
        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(),
    };

    store.commit = jest.fn();
    store.dispatch = jest.fn();
    store.getters = mountOptionsMockData.store?.getters ?? {
        vehicle: {
            model: "TL",
        },
        applicationUser: {
            pageData: {
                "part-questions": null,
                "vehicle-make": {},
                "vehicle-model": {},
                "vehicle-style": {},
            },
        },
    };

    const mountOptions = getMountOptions({
        ...mountOptionsMockData,
        store,
    });
    const wrapper = shallowMount(vehicleStyle, mountOptions);
    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;

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

    return { wrapper, apiPromise };
}