DigitalConsumer.FixMyGlass/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.spec.js

import { shallowMount } from "@vue/test-utils";
import saveProgressPopupSmsConsentQuestion from "./save-progress-popup-sms-consent-question";
import {
    defaultSaveProgressSmsConsent,
    getSaveProgressSmsConsentFallbackCopy,
} from "@/helpers/save-progress-sms-consent/save-progress-sms-consent-helper";
import { errorMessages } from "@/constants/error-messages";

describe("save-progress-popup-sms-consent-question", () => {
    it("should render the transactional consent checkbox with default copy", () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion);
        const fallbackCopy = getSaveProgressSmsConsentFallbackCopy();

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes).toHaveLength(1);
        expect(checkboxes.at(0).props("labelText")).toBe(fallbackCopy.transactional);
    });

    it("should render the marketing consent checkbox when consent management is enabled", () => {
        const fallbackCopy = getSaveProgressSmsConsentFallbackCopy();
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                showConsentManagement: true,
            },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes).toHaveLength(2);
        expect(checkboxes.at(1).props("labelText")).toBe(fallbackCopy.marketing);
    });

    it("should emit updated consent when a checkbox changes", async () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
            },
        });

        wrapper.vm.transactionalConsent = true;
        await wrapper.vm.$nextTick();

        expect(wrapper.emitted("update:modelValue")).toEqual([
            [{ transactional: true, marketing: false }],
        ]);
    });

    it("should accept API-ready consent copy via prop", () => {
        const apiCopy = {
            transactional: "API transactional copy",
            marketing: "API marketing copy",
        };

        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                consentCopy: apiCopy,
            },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes).toHaveLength(1);
        expect(checkboxes.at(0).props("labelText")).toBe("API transactional copy");
    });

    it("should disable consent checkboxes when isDisabled is true", () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                isDisabled: true,
            },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes.at(0).props("isDisabled")).toBe(true);
        expect(wrapper.find("fieldset").attributes("disabled")).toBe("");
    });

    it("should not show consent errors before showConsentErrors is true", () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
                showConsentErrors: false,
            },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes.at(0).props("hasError")).toBe(false);
        expect(wrapper.findComponent({ name: "alert" }).exists()).toBe(false);
    });

    it("should show the transactional consent error when consent management is disabled", async () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
                showConsentErrors: false,
                showConsentManagement: false,
            },
        });

        await wrapper.setProps({ showConsentErrors: true });

        const errorAlert = wrapper.findComponent({ name: "alert" });
        expect(errorAlert.exists()).toBe(true);
        expect(errorAlert.props("manualHeadline")).toBe(errorMessages.SMS_CONSENT_REQUIRED_1);
        expect(errorAlert.props("alertClass")).toBe("alert-warning");
        expect(errorAlert.props("hasBorder")).toBe(true);

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
        expect(checkboxes.at(0).props("hasError")).toBe(true);
    });

    it("should show the transactional consent error when consent management is enabled", async () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
                showConsentErrors: false,
                showConsentManagement: true,
            },
        });

        await wrapper.setProps({ showConsentErrors: true });

        const errorAlert = wrapper.findComponent({ name: "alert" });
        expect(errorAlert.exists()).toBe(true);
        expect(errorAlert.props("manualHeadline")).toBe(errorMessages.SMS_CONSENT_REQUIRED_2);
        expect(errorAlert.props("alertClass")).toBe("alert-warning");
        expect(errorAlert.props("hasBorder")).toBe(true);

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
        expect(checkboxes.at(0).props("hasError")).toBe(true);
    });

    it("should clear consent errors when a selection is made while showConsentErrors is true", async () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
                showConsentErrors: true,
            },
        });

        await wrapper.setProps({
            modelValue: { transactional: true, marketing: false },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
        expect(checkboxes.at(0).props("hasError")).toBe(false);
    });
});