DigitalConsumer.FixMyGlass/src/layouts/vehicle-make/vehicle-make.spec.js

// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import store from "@/store";

// Components
import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";

jest.mock("@/store", () => ({
    commit: jest.fn(),
    dispatch: jest.fn(),
    // getters: jest.fn().mockImplementation(() => ({
    //     vehicle: {
    //         year: 2019,
    //     },
    // })),
}));

// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
    fetchCmsContentForPage: jest.fn(),
}));

// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
    settleAllPromises: jest.fn(),
}));

describe("vehicle-make.vue", () => {
    test("Make question component is initized with api data", async (done) => {
        //Arrange
        const makeQuestionInitialData = ["honda", "ford", "dodge"];
        const { wrapper, apiPromise } = setupMocks({
            makeQuestionInitialData: makeQuestionInitialData,
        });

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

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

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

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

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

describe("vehicle-make.vue", () => {
    describe("arePagePrerequisitesValue", () => {
        test("Year set, arePagePrerequisitesValid should be true", async () => {
            //Arrange
            const { wrapper } = setupMocks({
                vehicleData: {
                    year: 2019,
                },
            });

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

            let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

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

        test("Year not set, arePagePrerequisitesValid should be false", async () => {
            //Arrange
            store.getters.vehicle.year = jest.fn().mockReturnValueOnce(undefined);
            const { wrapper } = setupMocks({});

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

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

    test("selectedMake changes => save make in store", async () => {
        //Arrange
        const { wrapper } = setupMocks({
            mountOptionsMockData: {
                router: {
                    navigate: jest.fn(),
                    navigateWithSaving: jest.fn(),
                },
            },
        });

        // Act
        await wrapper.setData({
            selectedMake: "Make",
        });
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledTimes(1);
        expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledWith(
            "saveVehicleMake",
            "Make",
            false
        );
    });

    test("selectedMake changes => navigate with saving", async () => {
        //Arrange
        const { wrapper } = setupMocks({
            mountOptionsMockData: {
                router: {
                    navigate: jest.fn(),
                    navigateWithSaving: jest.fn(),
                },
                route: {
                    fmgPage: "test",
                },
            },
        });

        // Act
        await wrapper.setData({
            selectedMake: "Make",
        });

        // Assert
        expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledTimes(1);
        expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
            "SELECTED_MAKE",
            expect.anything()
        );
    });
});

function setupMocks({
    vehicleMakeQuestionCmsContent = {},
    makeQuestionInitialData = {},
    pageHeaderWidgetHeaderText = {},
    mountOptionsMockData = {},
    vehicleData = {},
}) {
    //Mock api responses
    const apiResponses = {
        cmsContent: {
            FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
            VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
            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",
            },
        },
        makeQuestionInitialData: makeQuestionInitialData,
    };

    const apiPromise = Promise.resolve(apiResponses);

    store.getters = {
        vehicle: vehicleData,
    };

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

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

    const mountOptions = getMountOptions(mountOptionsMockData);
    const wrapper = shallowMount(vehicleMake, mountOptions);
    const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
    makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;

    return { wrapper, apiPromise };
}