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]
    });
    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]
    });
    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]
    });
    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]
    });
    expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent['BodyText']));
  });

  it("Should display footer text when FooterText is defined in the CMS", async () => {
    // Act
    const wrapper = shallowMount(Modal, {
      mixins: [mockMixin]
    });
    expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent['FooterText']));
  });
});

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.",
}