DigitalConsumer.FixMyGlass/src/layouts/estimate/estimate.spec.js

//Components
import estimate from "@/layouts/estimate/estimate.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";

//Supporting files
import { storeKey } from "vuex";
import store from "@/store";
import { storeMutations } from "@/constants/store-mutations";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "../../mixins/base-mixin";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import { experimentSettings } from "@/constants/experiments";
import { nextTick } from "vue";

// 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("estimate.vue", () => {
    test("Selected vin option is emitted upon selection.", async () => {
        //Arrange
        const { wrapper } = setupMocks({
            modelValueProp: ["Provide my VIN manually most specific to your vehicle"],
        });

        //Act
        wrapper.setValue({ modelValue: ["Provide my license plate # Most accurate VIN match"] });
        await wrapper.vm.$nextTick();

        //Assesrt
        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
            { modelValue: ["Provide my license plate # Most accurate VIN match"] },
        ]);
    });

    describe("move forward", () => {
        test("After selecting provide my home address on ForwardButtonAction triggers a router.navigateWithSaving", async () => {
            //Arrange
            const { wrapper } = setupMocks({});
            await wrapper.setData({
                selectedVinLookupMethod: vinLookupMethodSelections.HOMEADDRESS,
            });

            //Act
            wrapper.vm.forwardButtonAction();

            //Assert
            expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
        });

        test("After selecting provide my manual vin on ForwardButtonAction triggers a router.navigateWithSaving", async () => {
            //Arrange
            const { wrapper } = setupMocks({});
            await wrapper.setData({
                selectedVinLookupMethod: vinLookupMethodSelections.MANUALVIN,
            });

            store.commit(storeMutations.UPDATE_IS_REPAIR, false);
            store.commit(storeMutations.UPDATE_MAKE, "acura");

            //Act
            await wrapper.vm.forwardButtonAction();

            //Assert
            expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
        });

        test("Provide my license plate on ForwardButtonAction triggers a router.navigateWithSaving", async () => {
            //Arrange
            const { wrapper } = setupMocks({});
            await wrapper.setData({
                selectedVinLookupMethod: vinLookupMethodSelections.LICENSEPLATE,
            });

            //Act
            wrapper.vm.forwardButtonAction();

            //Assert
            expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
        });

        test("Selecting no vin on ForwardButtonAction triggers a router.navigateWithSaving", async () => {
            //Arrange
            const { wrapper } = setupMocks({});
            await wrapper.setData({
                selectedVinLookupMethod: vinLookupMethodSelections.DECLINE,
            });

            //Act
            wrapper.vm.forwardButtonAction();

            //Assert
            expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
        });
    });

    test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => {
        //Arrange
        const { wrapper } = setupMocks({});

        delete window.location;
        window.location = { search: "?fmgPage=estimate&zipcode=43015" };

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

        wrapper.vm.backButtonAction();

        //Assert
        expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
    });

    describe("arePagePrerequisitesValid", () => {
        beforeEach(() => {
            store.commit(storeMutations.UPDATE_IS_REPAIR, false);
            store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, null);
        });

        test("isRepair is false and there are no glassToReplace => should return false", () => {
            // Arrange
            const { wrapper } = setupMocks({});
            store.commit(storeMutations.UPDATE_IS_REPAIR, false);
            store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);

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

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

        test("isRepair is false and glassToReplace is null => should return false", () => {
            // Arrange
            const { wrapper } = setupMocks({});
            store.commit(storeMutations.UPDATE_IS_REPAIR, false);
            store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, null);

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

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

        test("isRepair is false are there is one glassToReplace => should return true", () => {
            // Arrange
            const { wrapper } = setupMocks({});
            store.commit(storeMutations.UPDATE_IS_REPAIR, false);
            store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, [
                { glassLocation: "TEST", glassName: "NAME" },
            ]);

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

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

        test("isRepair is false are there are multiple glassToReplace => should return true", () => {
            // Arrange
            const { wrapper } = setupMocks({});
            store.commit(storeMutations.UPDATE_IS_REPAIR, false);
            store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, [
                { glassLocation: "TEST1", glassName: "NAME1" },
                { glassLocation: "TEST2", glassName: "NAME2" },
                { glassLocation: "TEST3", glassName: "NAME3" },
            ]);

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

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

        test("isRepair is set to null => arePagePrerequisitesValid should return false", async () => {
            // Arrange
            const { wrapper } = setupMocks({});
            store.commit(storeMutations.UPDATE_IS_REPAIR, null);

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

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

        test("isRepair is set to true => arePagePrerequisitesValid should return true", async () => {
            // Arrange
            const { wrapper } = setupMocks({});
            store.commit(storeMutations.UPDATE_IS_REPAIR, true);

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

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

describe("estimate.vue", () => {
    test("should call forwardButtonAction if isExternalParameter is true and form is valid", async () => {
        store.getters = {
            externalParameterState: { isExternalParameter: true },
            externalParameterEstimate: { vinSelection: "decline" },
        };
        // Set up the component
        const { wrapper } = setupMocks({});

        wrapper.vm.forwardButtonAction = jest.fn();

        const nextFunction = jest.fn((c) => {
            c(wrapper.vm);
        });
        // Call the method that contains the if-else logic
        await estimate.beforeRouteEnter.call(
            wrapper.vm,
            { query: { fmgPage: "estimate" } },
            undefined,
            nextFunction
        );
        await wrapper.vm.$nextTick();

        expect(nextFunction).toHaveBeenCalled();
        expect(baseMixin.methods.isFormValid).toHaveBeenCalled();
        expect(baseMixin.methods.isFormValid()).toBe(true);
        await wrapper.vm.$nextTick();
        expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
    });
});

function setupMocks({
    groupName = "estimate",
    skipVin = false,
    cmsQuestionText = "Let's get your VIN. Or we can look it up for you!",
    cmsAnswers = [
        { Name: "Provide my VIN manually Most specific to your vehicle" },
        { Name: "Provide my license plate # Most accurate VIN match" },
        { Name: "Provide my home address Most convenient VIN match" },
        { Name: "I'd rather not share my VIN" },
    ],
    FunnelFooterWidget = { ForwardButtonText: "test txt" },
    mountOptionsMockData = {
        router: {
            navigate: jest.fn(),
            navigateWithSaving: jest.fn(),
            navigateWithoutSaving: jest.fn(),
        },
        route: {
            query: {},
        },
    },
}) {
    //Mock CMS Content
    const cmsContent = {
        groupName: groupName,
        QuestionText: cmsQuestionText,
        Answers: cmsAnswers,
        FunnelFooterWidget: FunnelFooterWidget,
    };
    const mockMixin = {
        methods: {
            getSettingValue: jest.fn((settingName) => {
                if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
                    return "true";
                }
                return "false";
            }),
        },
    };
    const apiPromise = Promise.resolve({ cmsContent });
    settleAllPromises.mockImplementation(() => apiPromise);
    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
    baseMixin.methods.isFormValid = jest.fn().mockReturnValue(true);
    const mountOptions = getMountOptions({
        ...mountOptionsMockData,
        mixins: [baseMixin, mockMixin],
    });
    mountOptions["attachTo"] = document.body;

    const wrapper = shallowMount(estimate, mountOptions);
    wrapper.vm.skipVin = skipVin;
    wrapper.vm.getZipCodeData = jest
        .fn()
        .mockReturnValue({ isValid: true, isServiceable: true, state: "OH" });

    return { wrapper, apiPromise };
}