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

import { shallowMount, mount } from "@vue/test-utils";
import listButtonHorizontal from "./list-button-horizontal";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";

describe("list-button-horizontal.vue", () => {
  // TODO KO Have this moved out to somewhere shared
  describe("Shared baseInputButton checks", () => {
    it("Should return input type checkbox if isMultiSelect is true", async () => {
      // Act
      const { wrapper } = setupMocks({
        mockData: {
          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 } = setupMocks({
        mockData: {
          propsData: {
            isMultiSelect: false,
          },
        },
      });

      // Assert
      const input = wrapper.find("input");
      expect(input.attributes().type).toEqual("radio");
    });

    it("Should emit button value on click", async () => {
      // Act
      const { wrapper } = setupMocks({
        mockData: {
          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",
          },
        },
      });

      // Act
      wrapper.vm.handleAnswerChange("test");
      await wrapper.vm.$nextTick();

      // Assert
      expect(wrapper.emitted()["change"][0]).toEqual(["test"]);
    });
  });

  describe("styling/UI", () => {
    it("Should return screen reader text", async () => {
      // Act
      const { wrapper } = setupMocks({
        mockData: {
          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 } = setupMocks({
        mockData: {
          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 } = setupMocks({
        mockData: {
          propsData: {
            isRequired: true,
          },
        },
      });

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

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

    it("is cash or insurance button => has 'radio-fancy' class", () => {
      // Arrange/Act
      const { wrapper } = setupMocks({
        mockData: {
          propsData: {
            isCashOrInsurance: true,
          },
        },
      });

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

      expect(label.classes()).toContain("radio-fancy");
    });

    test("has buttonLabel => displays buttonLabel", () => {
      // Arrange/Act
      const { wrapper } = setupMocks({
        mockData: {
          propsData: {
            buttonLabel: "Surprise!",
          },
        },
      });

      // Assert
      const content = wrapper.find(".list-button-horizontal-content");
      expect(content.isVisible()).toBe(true);
      expect(content.text()).toContain("Surprise!");
    });

    test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
      // Arrange/Act
      const { wrapper } = setupMocks({
        mockData: {
          propsData: {
            buttonLabel: "Surprise!",
            buttonLabelSubCopy: "Super duper surprise :)",
          },
        },
      });

      // Assert
      const content = wrapper.find(".list-button-horizontal-content");
      expect(content.isVisible()).toBe(true);
      expect(content.text()).toContain("Super duper surprise :)");
    });

    test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
      // Arrange/Act
      const { wrapper } = setupMocks({
        mockData: {
          propsData: {
            buttonLabel: "Surprise!",
            buttonLabelSubCopy: "Super duper surprise :)",
            screenReaderOnlyText: "Tests are fun!"
          },
        },
      });

      // Assert
      const content = wrapper.find(".list-button-horizontal-content");
      const screenReaderOnlyText = wrapper.find(".sr-only");
      expect(content.isVisible()).toBe(true);
      expect(screenReaderOnlyText.exists()).toBe(true);
      expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
    });
  });
});

function setupMocks({ mockData }) {
  console.log(mockData);
  const wrapper = mount(listButtonHorizontal, {
    ...mockData,
    propsData: {
      ...mockData.propsData,
      groupName: "my-group",
      modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
      value: mockData.propsData?.isMultiSelect ? ["4"] : "4"
    },
    mixins: [inputButtonWrapperMixin],
  });

  return { wrapper };
}