DigitalConsumer.FixMyGlass/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.spec.js

import { shallowMount } from "@vue/test-utils";
import mobileSchedulingCard from "./mobile-scheduling-card";
import { PREMIUM_TIME_SLOT_ID_FLAG } from "@/constants/schedule-constants";
import { getMountOptions } from "@/helpers/unit-test-helper.js";

const MOCK_TIME_SLOTS = [
    {
        id: "3357I-03357-M-I*21346*AM",
        startTime: "08:00",
        endTime: "12:00",
        offerPremium: true,
    },
    {
        id: "3357I-03357-M-I*21346*PM",
        startTime: "12:00",
        endTime: "17:00",
        offerPremium: false,
    },
];

const MOCK_CMS_CONTENT = {
    MobileCardWidget: {
        HeaderText: "We'll come to you",
        SubheaderText: "We'll come to you for free!",
        BodyText: "Enter address on the next page",
        FooterText: "First stop of the day",
        FooterText2: "8:00 am - 12:00 pm arrival window",
    },
};

function mountComponent(props = {}, cmsContent = {}) {
    const cmsContentByWidget = {
        ...MOCK_CMS_CONTENT,
        ...cmsContent,
        MobileCardWidget: {
            ...MOCK_CMS_CONTENT.MobileCardWidget,
            ...cmsContent.MobileCardWidget,
        },
    };

    const cmsMixin = {
        methods: {
            getCmsContent: jest.fn((widgetName, fieldName) => {
                return cmsContentByWidget[widgetName]?.[fieldName] ?? "";
            }),
        },
    };

    const mountOptions = getMountOptions({
        route: { name: "scheduling" },
        mixins: [cmsMixin],
    });

    return shallowMount(mobileSchedulingCard, {
        props: {
            zipCode: "43235",
            timeSlots: MOCK_TIME_SLOTS,
            premiumTimeSlotPrice: 29.99,
            ...props,
        },
        global: mountOptions.global,
    });
}

describe("mobile-scheduling-card.vue", () => {
    test("renders header, zip code, and time slot options", () => {
        const wrapper = mountComponent();
        expect(wrapper.text()).toContain("We'll come to you");
        expect(wrapper.text()).toContain("43235");
        expect(wrapper.text()).toContain("Enter address on the next page");
        expect(wrapper.text()).toContain("First stop of the day");
        expect(wrapper.text()).not.toContain("8:00 am - 12:00 pm arrival window");
        expect(wrapper.text()).toContain("+$29.99");
        expect(wrapper.text()).toContain("3 appts");
        wrapper.unmount();
    });

    test("shows greyed out 0 appts badge when there are no time slots", () => {
        const wrapper = mountComponent({ timeSlots: [] });
        expect(wrapper.text()).toContain("0 appts");
        expect(wrapper.find(".mobile-scheduling-card__appt-badge--empty").exists()).toBe(true);
        wrapper.unmount();
    });

    test("shows free flag when showFreeFlag is true", () => {
        const wrapper = mountComponent({ showFreeFlag: true });
        expect(wrapper.text()).toContain("We'll come to you for free!");
        wrapper.unmount();
    });

    test("emits zip-code-clicked when zip link is clicked", async () => {
        const wrapper = mountComponent();
        await wrapper.find(".mobile-scheduling-card__zip-link").trigger("click");
        expect(wrapper.emitted("zip-code-clicked")).toBeTruthy();
        wrapper.unmount();
    });

    test("emits update:modelValue with premium selection", async () => {
        const wrapper = mountComponent();
        const premiumInput = wrapper.find(
            `input[value="${MOCK_TIME_SLOTS[0].id}${PREMIUM_TIME_SLOT_ID_FLAG}"]`
        );
        await premiumInput.setValue(true);
        expect(wrapper.emitted("update:modelValue")[0][0]).toEqual({
            selectedMobileTimeSlot: {
                routeCodeId: MOCK_TIME_SLOTS[0].id,
                isPremiumAppointment: true,
            },
        });
        wrapper.unmount();
    });

    test("shows premium sublabel only when the premium option is selected", async () => {
        const wrapper = mountComponent();
        expect(wrapper.text()).not.toContain("8:00 am - 12:00 pm arrival window");

        const premiumInput = wrapper.find(
            `input[value="${MOCK_TIME_SLOTS[0].id}${PREMIUM_TIME_SLOT_ID_FLAG}"]`
        );
        await premiumInput.setValue(true);
        await wrapper.setProps({
            modelValue: {
                selectedMobileTimeSlot: {
                    routeCodeId: MOCK_TIME_SLOTS[0].id,
                    isPremiumAppointment: true,
                },
            },
        });

        expect(wrapper.text()).toContain("8:00 am - 12:00 pm arrival window");
        wrapper.unmount();
    });

    test("emits update:modelValue with standard time slot selection", async () => {
        const wrapper = mountComponent();
        const pmInput = wrapper.find(`input[value="${MOCK_TIME_SLOTS[1].id}"]`);
        await pmInput.setValue(true);
        expect(wrapper.emitted("update:modelValue")[0][0]).toEqual({
            selectedMobileTimeSlot: {
                routeCodeId: MOCK_TIME_SLOTS[1].id,
                isPremiumAppointment: false,
            },
        });
        wrapper.unmount();
    });

    test("collapses and expands body when header is clicked", async () => {
        const wrapper = mountComponent();
        expect(wrapper.find(".mobile-scheduling-card__body").isVisible()).toBe(true);
        await wrapper.find(".mobile-scheduling-card__header").trigger("click");
        expect(wrapper.find(".mobile-scheduling-card__body").isVisible()).toBe(false);
        expect(wrapper.find(".mobile-scheduling-card__location-bar").isVisible()).toBe(true);
        await wrapper.find(".mobile-scheduling-card__header").trigger("click");
        expect(wrapper.find(".mobile-scheduling-card__body").isVisible()).toBe(true);
        wrapper.unmount();
    });
});