import { shallowMount } from "@vue/test-utils";
import radioHorizontal from "./radio-horizontal";

describe("radio.vue", () => {
  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
    // Act
    const wrapper = shallowMount(radioHorizontal, {
      propsData: {
        radioID: "2023",
        groupName: "TestGroup",
        loaderColor: "blue",
        loaderPosition: "right",
        sizeInRem: "1.5",
        errorMessage: 'null'
      },
    });

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

    await label.trigger('click');

    expect(input.attributes()).toEqual({
      id: "2023",
      type: "radio",
      value: "2023",
      name: "TestGroup",
      "aria-required": "true"
    });

    expect(label.attributes()).toEqual({
      role: "radio",
      tabindex: "-1",
      for: "2023",
      class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
      "aria-checked": "false"
    });

    expect(label.text()).toEqual('2023');

    expect(paragraph.text()).toEqual('2023');

    expect(wrapper.vm.display).toBe(true);

  });
});