import { mount, shallowMount } from "@vue/test-utils";
import menuModal from "./menu-modal";

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

});