DigitalConsumer.ISS/src/layouts/service-location/service-location.spec.js

import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import serviceLocation from "@/layouts/service-location/service-location.vue";
import { getServiceabilityDetails, getZipCodeData } from "@/helpers/service-location-helper";

// Define Mocks
jest.mock("@/helpers/cms-content-helper", () => ({
    fetchCmsContentForPage: jest.fn(() => {
        return Promise.resolve("content");
    }),
}));

const mockGetServiceabilityDetails = (mockServiceZipCode) => {
    const serviceabilityDetails = {
        isGlassServiceableInshop: true,
        isRecalibrationServiceableInshop: true,
        isGlassServiceableMobile: true,
        isRecalibrationServiceableMobile: true,
    };

    return Promise.resolve(serviceabilityDetails);
};

jest.mock(
    "@/helpers/service-location-helper",
    () => ({
        getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
            return mockGetServiceabilityDetails(mockServiceZipCode);
        }),
    })
);

const mockMixin = {
    methods: {
        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
            if (widgetName === linkWidgetName) {
                return mockLinkCmsContent[cmsFieldName];
            }

            if (widgetName === modalWidgetName) {
                return mockModalCmsContent[cmsFieldName];
            }

            return null;
        }),

        getZipCodeData: jest.fn((zip) => {
            if (zip === "43235" || zip === "55555") {
                return Promise.resolve({
                    containsMilitaryBase: false,
                    isValid: true,
                    state: "OH",
                    zipCodeCtu: "01820",
                });
            }

            if (zip === "45433") {
                return Promise.resolve({
                    containsMilitaryBase: true,
                    isValid: true,
                    state: "OH",
                });
            }

            return Promise.resolve({
                containsMilitaryBase: false,
                isValid: false,
                state: null,
                zipCodeCtu: null,
            });
        }),

        onSubmit: jest.fn(),
        onInvalidSubmit: jest.fn(),
    },
};

describe("navigation", () => {
    test("if the back button is clicked, navigate back", async () => {
        // Arrange
        
        const { wrapper } = setupMocks({
        });

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

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

describe("updating service zip", () => {
    test("updates the page model after changing the service zip code", () => {
        // Arrange
        const { wrapper } = setupMocks({
            mixins: [mockMixin],
        });

        const newServiceZipCodeQuestion = {
            zipCode: "61606",
            state: "IL",
        };

        const serviceZipCodeComponent = wrapper.findComponent({
            ref: "serviceZipCodeQuestion",
        });

        // Act
        serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);

        // Assert
        expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
    });

    test("resets appointment type selection when service zip code is updated by service zip modal", () => {
        // Arrange
        const { wrapper } = setupMocks({});

        const serviceZipCodeComponent = wrapper.findComponent({
            ref: "serviceZipCodeQuestion",
        });

        const newServiceZipCodeQuestion = {
            zipCode: "61606",
            state: "IL",
        };

        wrapper.vm.selectedAppointmentType = "Inshop";

        // Act
        serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);

        // Assert
        expect(wrapper.vm.selectedAppointmentType).toStrictEqual(null);
    });

    test("displays military zip message when zip is updated", () => {
        // Arrange
        const { wrapper } = setupMocks({});

        const mobileLocationQuestionsComponent = wrapper.findComponent({
            ref: "mobileLocationQuestions",
        });
        mobileLocationQuestionsComponent.resetComponent = jest.fn();

        const serviceZipCodeComponent = wrapper.findComponent({
            ref: "serviceZipCodeQuestion",
        });
        serviceZipCodeComponent.resetMobileFeePart = jest.fn();

        expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);

        const newServiceZipCodeQuestion = {
            zipCode: "45433",
            state: "OH",
        };

        // Act
        serviceZipCodeComponent.vm.$emit("updated-contains-military-base", true);

        // Assert
        expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
    });
});

function setupMocks() 
{    
    const wrapper = shallowMount(
        serviceLocation,      
        getMountOptions({
            router: {
                navigate: jest.fn(),
            },       
        })
    );
    
    return { wrapper };
}