import { mount } from "@vue/test-utils";
import radio from "./radio";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";

describe("radio.vue", () => {
    it("Should have correct group name", async () => {
        // Arrange
        let { wrapper } = setupMocks({
            mountOptionsMockData: {
                propsData: {
                    groupName: "radio-button-test",
                    value: "test value",
                },
            },
        });

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

        // Assert
        expect(input.attributes().name).toEqual("radio-button-test");
    });

    it("Should have correct label text", async () => {
        // Act
        let { wrapper } = setupMocks({
            mountOptionsMockData: {
                propsData: {
                    buttonLabel: "label text",
                    value: "test value",
                },
            },
        });

        // Arrange
        const paragraph = wrapper.find("p");

        // Assert
        expect(paragraph.text()).toEqual("label text");
    });

    it("Should have correct screenreader-only text", async () => {
        // Act
        let { wrapper } = setupMocks({});

        // Arrange
        await wrapper.setProps({
            screenReaderOnlyText: "screenreader text",
            value: "test value",
        });
        const paragraph = wrapper.find(".sr-only");

        // Assert
        expect(paragraph.text()).toEqual("screenreader text");
    });
});

function setupMocks({ mountOptionsMockData = {} }) {
    // Add in group name to avoid vee-validate failures
    if (!mountOptionsMockData.propsData) {
        mountOptionsMockData.propsData = { groupName: "group-name" };
    } else if (!mountOptionsMockData.propsData.groupName) {
        mountOptionsMockData.propsData.groupName = "group-name";
    }
    const wrapper = mount(radio, {
        ...mountOptionsMockData,
        mixins: [inputButtonWrapperMixin],
    });

    return { wrapper };
}
