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

import { shallowMount } from "@vue/test-utils";
import listCard from "./list-card";

describe("list-card.vue", () => {
  it("Should return input type checkbox if isMultiSelect is true", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isMultiSelect: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "checkbox-demo-1",
        groupName: "Checkbox 1",
        buttonImage: "windshield-damage.svg",
        modelValue: ["List Card Checkbox"],
      },
    });

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

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

  it("Should return primary label text", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        modelValue: ["List Card Checkbox"],
      },
    });

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

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

  it("Should return secondary (sub) label text", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        buttonLabelSubCopy: "Test",
        modelValue: ["List Card Checkbox"],
      },
    });

    // Assert
    const paragraph = wrapper.find("p:nth-of-type(2)");

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

  it("Should return value used for various text settings including the label 'for' and input id", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        buttonLabelSubCopy: "Test",
        modelValue: ["List Card Checkbox"],
      },
    });

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

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

  it("Should return input group name used for radio or checkbox", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        buttonLabelSubCopy: "Test",
        modelValue: ["List Card Checkbox"],
      },
    });

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

    expect(input.attributes().name).toEqual("radio 1");
  });

  it("Should return aria-required state", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        isRequired: true,
        modelValue: ["List Card Checkbox"],
      },
    });

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

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

  it("Should return flex row classes if isWide is true", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        isRequired: true,
        isWide: true,
        buttonLabelSubCopy: "",
        modelValue: ["List Card Checkbox"],
      },
    });

    // Assert
    const label = wrapper.find("label");
    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4"]);
  });

  it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      propsData: {
        isRadioHorizontal: true,
        buttonLabel: "Windshield",
        buttonID: "List Card Checkbox",
        groupID: "radio-demo-1",
        groupName: "radio 1",
        buttonImage: "windshield-damage.svg",
        isRequired: true,
        isWide: true,
        buttonLabelSubCopy: "Button Subcopy",
        modelValue: ["List Card Checkbox"],
      },
    });

    // Assert
    const label = wrapper.find("label");
    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4", "checkboxTop"]);
  });

  it("Should return flex column classes if isWide is false", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      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"],
      },
    });

    // Assert
    const label = wrapper.find("label");
    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
  });

  it("Should emit button value on click", async () => {
    // Act
    const wrapper = shallowMount(listCard, {
      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(listCard, {
      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"],
        selectedValues: ["Car-Front"]
      },
    });
    // Assert
    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
  });


});