import { shallowMount } from "@vue/test-utils";
import ButtonQuestionModal from "./button-question-modal";

describe("button-question-modal.vue", () => {
    it("Should display header text when QuestionText is defined in the CMS", async () => {
        // Act
        const wrapper = shallowMount(ButtonQuestionModal, {
            mixins: [mockMixin],
            props: {
                cmsWidgetName: "test",
            },
            attachTo: document.body,
        });
        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["QuestionText"]));
    });

    it("Should display subheader text when ButtonText is defined in the CMS", async () => {
        // Act
        const wrapper = shallowMount(ButtonQuestionModal, {
            mixins: [mockMixin],
            props: {
                cmsWidgetName: "test",
            },
            attachTo: document.body,
        });
        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["ButtonText"]));
    });

});

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

const mockCmsContent = {
    QuestionText: "What caused damage.",
    ButtonText: "Select an option.",
    Answers: [
        {
            Name: "Rock from road",
            Text: "Rock from road"
        },
        {
            Name: "Vandalism",
            Text: "Vandalism"
        },
    ],
};