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

describe("checkbox.vue", () => {
  it("Should return checkbox name", async () => {
    // Act
    const wrapper = shallowMount(checkbox, {
      propsData: {
        checkboxName: "Checkbox",
      },
    });

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

    // Expect
    expect(input.attributes().name).toEqual("Checkbox");
  });

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

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

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

  it("Should return tabindex value", async () => {
    // Act
    const wrapper = shallowMount(checkbox, {
      propsData: {
        tabIndex: "1",
      },
    });

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

    // Expect
    expect(input.attributes().tabindex).toEqual("1");
  });

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

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

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

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

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

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