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

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

describe("list-button.vue", () => {
  it("Should return input type checkbox if isMultiSelect is true", async () => {
    // Act
    const wrapper = shallowMount(listButton, {
      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(listButton, {
      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(listButton, {
      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(listButton, {
      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(listButton, {
      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(listButton, {
      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(listButton, {
      global: {
        mocks: {
          '$route': { query: { fmgPage: 'page-name' } },
          GaActions: GaActions,
          pushEventToGA: jest.fn(),
        }
      },
      propsData: {
        selectingInitiatesLoad: true,
      },
    });

    // Assert
    wrapper.vm.handleCheckChange = jest.fn();
    wrapper.vm.triggerButton();

    await nextTick();

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

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

  it("Should return loader color", async () => {
    // Act
    const wrapper = shallowMount(listButton, {
      global: {
        mocks: {
          '$route': { query: { fmgPage: 'page-name' } },
          GaActions: GaActions,
          pushEventToGA: jest.fn(),
        }
      },
      propsData: {
        loaderColor: "blue",
        selectingInitiatesLoad: true,
      },
    });

    // Assert
    wrapper.vm.handleCheckChange = jest.fn();
    wrapper.vm.triggerButton();
    await nextTick();

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

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

  it("Should return loader position", async () => {
    // Act
    const wrapper = shallowMount(listButton, {
      global: {
        mocks: {
          '$route': { query: { fmgPage: 'page-name' } },
          GaActions: GaActions,
          pushEventToGA: jest.fn(),
        }
      },
      propsData: {
        loaderPosition: "right",
        selectingInitiatesLoad: true,
      },
    });

    // Assert
    wrapper.vm.handleCheckChange = jest.fn();
    wrapper.vm.triggerButton();

    await nextTick();

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

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

  it("Should emit button value on click", async () => {
    // Act
    const wrapper = shallowMount(listButton, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        value: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        isRequired: true,
        isWide: false,
        modelValue: ["List Card Checkbox"],
        buttonID: 'list-card-id'
      },
    });

    wrapper.vm.handleCheckChange();

    // Assert
    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: 'list-card-id'}]);

  });

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

  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
    // Act
    const wrapper = shallowMount(listButton, {
      propsData: {
        selectingInitiatesLoad: false,
      },
    });

    // Assert
    wrapper.vm.handleInputChange();

    await nextTick();

    expect(wrapper.vm.handleCheckChange).toBeCalled;
  });
  
  it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
    // Act
    const wrapper = shallowMount(listButton, {
      propsData: {
        isMultiSelect: true,
      },
    });

    // Assert
    wrapper.vm.handleKeyupArrow();

    await nextTick();

    expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
  });

  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
    // Act
    const wrapper = shallowMount(listButton, {
      propsData: {
        selectingInitiatesLoad: false,
        isMultiSelect: false,
      },
    });

    // Assert
    wrapper.vm.handleKeyupArrow();

    await nextTick();

    expect(wrapper.vm.handleCheckChange).toBeCalled;
  });

});