import { shallowMount } from "@vue/test-utils";
import Modal from "./modal";

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

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

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

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

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

const mockCmsContent = {
    HeaderText: "Sample header text here.",
    SubheaderText: "Sample subheader text here.",
    Image: "https://www.sampleImage.sample",
    BodyText: "Sample body text here.",
    FooterText: "Sample footer text here.",
};