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

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

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

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));
    });
});
