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

describe("radio.vue", () => {
  it("Should return group name", async () => {
    // Act
    const wrapper = shallowMount(radio, {
      propsData: {
        groupName: "radio-button-test",
      },
    });

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

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

  it("Should return checkbox id", async () => {
    // Act
    const wrapper = shallowMount(radio, {
      propsData: {
        buttonID: "Radio ID",
      },
    });

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

    // Expect
    expect(input.attributes().id).toEqual("Radio ID");
  });

  it("Should return label text", async () => {
    // Act
    const wrapper = shallowMount(radio, {
      propsData: {
        buttonLabel: "label text",
      },
    });

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

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

  it("Should return label text", async () => {
    // Act
    const wrapper = shallowMount(radio, {
      propsData: {
        screenReaderOnlyText: "screenreader text",
      },
    });

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

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

  it("Should emit button value on click", async () => {
    // Act
    const wrapper = shallowMount(radio, {
      propsData: {
        buttonLabel: "Windshield",
        value: "List Card Checkbox",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        isRequired: true,
        isWide: false,
        modelValue: ["List Card Checkbox"],
      },
    });
    wrapper.vm.handleCheckChange();
    // Assert
    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);
  });

  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
    // Act
    const wrapper = shallowMount(radio, {
      propsData: {
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        isRequired: true,
        modelValue: ["List Card Checkbox"],
        value: "Car-Front",
        selectedValues: "Car-Front"
      },
    });
    // Assert
    expect(wrapper.componentVM.checkValue).toEqual(true);
  });
});