334 lines
9.2 KiB
JavaScript
334 lines
9.2 KiB
JavaScript
import { shallowMount } from "@vue/test-utils";
|
|
import listCard from "./list-card";
|
|
import { nextTick } from "vue";
|
|
import { GaActions } from "@/constants/analytics";
|
|
|
|
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",
|
|
},
|
|
});
|
|
|
|
// 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",
|
|
},
|
|
});
|
|
|
|
// 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",
|
|
},
|
|
});
|
|
|
|
// 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",
|
|
},
|
|
});
|
|
|
|
// 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",
|
|
},
|
|
});
|
|
|
|
// 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,
|
|
},
|
|
});
|
|
|
|
// 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: "",
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const label = wrapper.find("label");
|
|
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "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",
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const label = wrapper.find("label");
|
|
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "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,
|
|
},
|
|
});
|
|
|
|
// 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,
|
|
buttonID: 'list-card-id',
|
|
selectedValues: "List Card Checkbox"
|
|
},
|
|
});
|
|
wrapper.vm.handleCheckChange();
|
|
// Assert
|
|
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, 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,
|
|
selectedValues: "Car-Front"
|
|
},
|
|
});
|
|
// Assert
|
|
expect(wrapper.componentVM.checkValue).toEqual(false);
|
|
});
|
|
|
|
it("Should set an initial value for validation if selectedValues include the value", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(listCard, {
|
|
propsData: {
|
|
value: "Windshield",
|
|
groupName: "radio 1",
|
|
selectedValues: ["Windshield"],
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]);
|
|
});
|
|
|
|
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
|
|
// Act
|
|
const wrapper = shallowMount(listCard, {
|
|
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(listCard, {
|
|
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(listCard, {
|
|
propsData: {
|
|
selectingInitiatesLoad: false,
|
|
isMultiSelect: false,
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
wrapper.vm.handleKeyupArrow();
|
|
|
|
await nextTick();
|
|
|
|
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
|
});
|
|
|
|
it("Should run handleChange if triggerButton is triggered", async () => {
|
|
|
|
// Act
|
|
const wrapper = shallowMount(listCard, {
|
|
global: {
|
|
mocks: {
|
|
'$route': { query: { fmgPage: 'page-name' } },
|
|
GaActions: GaActions,
|
|
pushEventToGA: jest.fn(),
|
|
}
|
|
},
|
|
propsData: {
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
wrapper.vm.triggerButton();
|
|
|
|
await nextTick();
|
|
|
|
expect(wrapper.vm.handleChange).toBeCalled;
|
|
expect(wrapper.vm.handleCheckChange).not.toBeCalled;
|
|
expect(wrapper.vm.displayLoader).not.toBeCalled;
|
|
});
|
|
|
|
it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
|
|
// Act
|
|
const wrapper = shallowMount(listCard, {
|
|
global: {
|
|
mocks: {
|
|
'$route': { query: { fmgPage: 'page-name' } },
|
|
GaActions: GaActions,
|
|
pushEventToGA: jest.fn(),
|
|
}
|
|
},
|
|
propsData: {
|
|
selectingInitiatesLoad: true,
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
wrapper.vm.triggerButton();
|
|
|
|
await nextTick();
|
|
|
|
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
|
expect(wrapper.vm.displayLoader).toBeCalled;
|
|
});
|
|
|
|
});
|