import { mount, shallowMount } from '@vue/test-utils';
import menuModal from '@/iss-components/site-header/menu-modal/menu-modal.vue';

describe('menu-modal.vue', () => {
    it('Should return text Footer Navigation', async () => {
        // Act
        const wrapper = shallowMount(menuModal);

        // Assert
        const footerModalLabel = wrapper.find('h5');

        // Expect
        expect(footerModalLabel.text()).toContain('Footer Navigation');
    });

    it('Should return footer text as Safelite Group', async () => {
        // Act
        const wrapper = shallowMount(menuModal);

        // Assert
        const modalFooter = wrapper.find('div.modal-footer');

        // Expect
        expect(modalFooter.text()).toContain('Safelite Group');
    });

    it('Should return Terms of service text link text', async () => {
        // Act
        const wrapper = shallowMount(menuModal);

        // Expect
        expect(wrapper.html()).toContain('Terms of service');
    });

    it('Should return "Your privacy choices" text link text', async () => {
        // Act
        const wrapper = mount(menuModal);

        // Expect
        expect(wrapper.html()).toContain('Your privacy choices');
    });

    test('Icon for link to "Privacy Policies" page is displayed with the correct alternate text', () => {
        // NOTE: We need a way to target a specific <textLink> component so we can be sure that
        //   an icon is coming from a specific <textLink> component.
        // That requires an additional prop in the <textLink> component. Will hold off on adding the prop
        //   until there is more clarity on how we handle shared components.
        // For now the test is below is the best we can do.

        // Arrange
        const wrapper = mount(menuModal);

        // Expect
        const icon = wrapper.find('[data-id="ccpa-icon"]');
        expect(icon.isVisible()).toBe(true);
        expect(icon.attributes('alt')).toBe('Your privacy choices');
    });

    it('Should return Warranty text link text', async () => {
        // Act
        const wrapper = shallowMount(menuModal);

        // Expect
        expect(wrapper.html()).toContain('Warranty');
    });
});