DigitalConsumer.FixMyGlass/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

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

describe("list-button-horizontal.vue", () => {

  it("Should return input type checkbox if isMultiSelect is true", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        isMultiSelect: true,
      },
    });

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

    expect(input.attributes().type).toEqual("checkbox");
  });

  it("Should return input type radio if isMultiSelect is false or not specified", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        isMultiSelect: false,
      },
    });

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

    expect(input.attributes().type).toEqual("radio");
  });

  it("Should return primary label text (buttonID)", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        buttonID: "List Card Checkbox"
      },
    });

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

    expect(label.attributes().for).toEqual("List Card Checkbox");

  });

  it("Should return screen reader text", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        screenReaderOnlyText: "Screen Reader Only Text"
      },
    });

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

    expect(paragraph.text()).toEqual("Screen Reader Only Text");

  });

  it("Should return text alignment class", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        textPosition: "text-center"
      },
    });

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

    expect(paragraph.attributes('class')).toContain("text-center");

  });

  it("Should return aria-required state", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        isRequired: true
      },
    });

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

    expect(input.attributes()["aria-required"]).toEqual("true");

  });

  it("Should return loader enabled true", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        loaderEnabled: true
      },
    });

    // Assert

    const label = wrapper.find("label");

    wrapper.vm.handleClick();

    await nextTick();

    const loader = wrapper.find("loader-stub");

    expect(loader.exists()).toBe(true);

  });

  it("Should return loader color", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        loaderColor: "blue",
        loaderEnabled: true
      },
    });

    // Assert

    const label = wrapper.find("label");

    wrapper.vm.handleClick();

    await nextTick();

    const loader = wrapper.find("loader-stub");

    expect(loader.attributes('class')).toContain("blue");

  });

  it("Should return loader position", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        loaderPosition: "right",
        loaderEnabled: true
      },
    });

    // Assert

    const label = wrapper.find("label");

    wrapper.vm.handleClick();

    await nextTick();

    const loader = wrapper.find("loader-stub");

    expect(loader.attributes('class')).toContain("right");

  });

  it("Should return loader size in rem", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        sizeInRem: 1,
        loaderEnabled: true
      },
    });

    // Assert

    const label = wrapper.find("label");

    wrapper.vm.handleClick();

    await nextTick();

    const loader = wrapper.find("loader-stub");

    expect(loader.attributes('style')).toContain("1rem");

  });

  it("Should return first item if first item in group", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        positionInGroup: 1
      },
    });

    // Assert

    const label = wrapper.find("label");

    expect(label.attributes('class')).toContain("first-item");

  });

  it("Should return last item if last item in group", async () => {
    // Act
    const wrapper = shallowMount(listButtonHorizontal, {
      propsData: {
        positionInGroup: 3,
        totalInGroup: 3
      },
    });

    // Assert

    const label = wrapper.find("label");

    expect(label.attributes('class')).toContain("last-item");

  });

});