import { mount } from "@vue/test-utils";
import listButtonHorizontal from "./list-button-horizontal";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";

describe("list-button-horizontal.vue", () => {
    describe("styling/UI", () => {
        it("Should return screen reader text", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        screenReaderOnlyText: "Screen Reader Only Text",
                    },
                },
            });

            // Assert
            const paragraph = wrapper.find("span.sr-only");

            expect(paragraph.text()).toEqual("Screen Reader Only Text");
        });

        it("Should return text alignment class", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        textPosition: "text-center",
                    },
                },
            });

            // Assert
            const paragraph = wrapper.find("span.m-0");

            expect(paragraph.attributes("class")).toContain("text-center");
        });

        it("Should return aria-required state", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        isRequired: true,
                    },
                },
            });

            // Assert
            const input = wrapper.find("input");

            expect(input.attributes()["aria-required"]).toEqual("true");
        });

        it("is cash or insurance button => has 'strong' class", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        additionalButtonStyling: "listButtonHorizontalStrong",
                    },
                },
            });

            // Assert
            const label = wrapper.find("label");

            expect(label.classes()).toContain("strong");
        });

        test("has buttonLabel => displays buttonLabel", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: "Surprise!",
                    },
                },
            });

            // Assert
            const content = wrapper.find(".list-button-horizontal-content");
            expect(content.isVisible()).toBe(true);
            expect(content.text()).toContain("Surprise!");
        });

        test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: "Surprise!",
                        buttonLabelSubCopy: "Super duper surprise :)",
                    },
                },
            });

            // Assert
            const content = wrapper.find(".list-button-horizontal-content");
            expect(content.isVisible()).toBe(true);
            expect(content.text()).toContain("Super duper surprise :)");
        });

        test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: "Surprise!",
                        buttonLabelSubCopy: "Super duper surprise :)",
                        screenReaderOnlyText: "Tests are fun!",
                    },
                },
            });

            // Assert
            const content = wrapper.find(".list-button-horizontal-content");
            const screenReaderOnlyText = wrapper.find(".sr-only");
            expect(content.isVisible()).toBe(true);
            expect(screenReaderOnlyText.exists()).toBe(true);
            expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
        });
    });
});

function setupMocks({ mockData }) {
    const wrapper = mount(listButtonHorizontal, {
        ...mockData,
        propsData: {
            ...mockData.propsData,
            groupName: "my-group",
            modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
            value: mockData.propsData?.isMultiSelect ? ["4"] : "4",
        },
        mixins: [inputButtonWrapperMixin],
    });

    return { wrapper };
}