import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";

import paymentSwitchButton from "@/layouts/payment/payment-switch/payment-switch-button/payment-switch-button";

const testConstants = {
    images: {
        A: "imageA",
        B: "imageB",
        NONE: null,
    },
    names: {
        A: "nameA",
        B: "nameB",
    },
    content: {
        withInline: "Button text with {custom:inlineImage,Alt} inline.",
        noInline: "Button text with no inline",
    },
};

let cmsContent;

describe("Payment Switch Button", () => {
    beforeEach(() => {
        cmsContent = {};
    });

    describe("Inline images", () => {
        test("Renders image if inline-image token is present", () => {
            // Arrange
            const props = {
                buttonText: testConstants.content.withInline,
                buttonImage: testConstants.images.A,
                buttonImageId: testConstants.names.A,
            };

            const wrapper = setupMocks({
                propsData: props,
            });

            // Act
            const img = wrapper.findAll("img");

            // Assert
            expect(img.length).toBe(1);
        });

        test("Renders no image if inline-image token is not present", () => {
            // Arrange
            const props = {
                buttonText: testConstants.content.noInline,
                buttonImage: testConstants.images.A,
                buttonImageId: testConstants.names.A,
            };

            const wrapper = setupMocks({
                propsData: props,
            });

            // Act
            const img = wrapper.findAll("img");

            // Assert
            expect(img.length).toBe(0);
        });

        test("Renders no image, but instead alt text, when token is present but no image is", () => {
            // Arrange
            const props = {
                buttonText: testConstants.content.withInline,
                buttonImage: testConstants.images.NONE,
                buttonImageId: testConstants.names.A,
            };

            const wrapper = setupMocks({
                propsData: props,
            });

            // Act
            const img = wrapper.findAll("img");

            // Assert
            expect(img.length).toBe(0);
            expect(wrapper.text()).toContain("Alt");
        });
    });

    test("Emits click event when clicked", async () => {
        // Arrange
        const props = {
            buttonText: testConstants.content.noInline,
            buttonImage: testConstants.images.NONE,
            buttonImageId: testConstants.images.NONE,
        };

        const wrapper = setupMocks({
            propsData: props,
        });

        // Act
        await wrapper.trigger("click");

        // Assert
        expect(wrapper.emitted("click-event")).toBeTruthy();
    });
});

function setupMocks(customMountOptions = {}) {
    customMountOptions.route = {
        query: {
            fmgPage: "page-name",
        },
    };
    const mountOptions = getMountOptions(customMountOptions);

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

    mountOptions.global.mixins = [mockMixin];

    const wrapper = shallowMount(paymentSwitchButton, mountOptions);

    wrapper.vm.setCmsContent = jest.fn();

    return wrapper;
}
