import { shallowMount } from "@vue/test-utils";
import listButton from "./list-button";

describe("list-button.vue", () => {
  it("Should render the 'buttonID' prop value as the label and id value as well as the 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(listButton, {
      propsData: {
        buttonID: "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": "false",
    });

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

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

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

    expect(wrapper.vm.isLoaderDisplayed).toBe(true);
  });
});