fixed unit tests
This commit is contained in:
Kulbhushan Kaushik
parent
fc867ac32b
commit
63bf5d4b77
5 changed files with 1685 additions and 908 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -114,7 +114,7 @@ describe("Store", () => {
|
|||
|
||||
expect(store.order.vehicle.imageUrl).toEqual(response.data.imageUrl);
|
||||
expect(store.order.vehicle.imageVifNumber).toEqual(response.data.imageVifNumber);
|
||||
expect(store.order.vehicle.imageVifColor).toEqual(response.data.imageVifColor);
|
||||
expect(store.order.vehicle.style).toEqual(response.data.style);
|
||||
});
|
||||
|
||||
it("setVehicle should call globalMethods.callHttpClient", () => {
|
||||
|
|
|
|||
|
|
@ -1,264 +1,139 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import listButtonHorizontal from "./list-button-horizontal";
|
||||
import { nextTick } from "vue";
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||
|
||||
describe("list-button-horizontal.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
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 'strong' class", () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
additionalButtonStyling: "listButtonHorizontalStrong",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
|
||||
expect(label.classes()).toContain("strong");
|
||||
});
|
||||
|
||||
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!");
|
||||
});
|
||||
});
|
||||
|
||||
// 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, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
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(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
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(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
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(listButtonHorizontal, {
|
||||
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"],
|
||||
},
|
||||
});
|
||||
wrapper.vm.handleCheckChange();
|
||||
// Assert
|
||||
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: false}]);
|
||||
});
|
||||
|
||||
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
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"],
|
||||
isMultiSelect: false,
|
||||
value: "Car-Front",
|
||||
selectedValues: ["Car-Front"]
|
||||
},
|
||||
});
|
||||
// Assert
|
||||
expect(wrapper.vm.checkValue).toEqual(true);
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
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(listButtonHorizontal, {
|
||||
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(listButtonHorizontal, {
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleKeyupArrow();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function setupMocks({ 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 };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,256 +1,304 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import listButton from "./list-button";
|
||||
import { nextTick } from "vue";
|
||||
import { GaActions } from "@/constants/analytics";
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||
|
||||
describe("list-button.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
describe("loader", () => {
|
||||
it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
global: {
|
||||
mocks: {
|
||||
$route: { query: { fmgPage: "page-name" } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = "something";
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
global: {
|
||||
mocks: {
|
||||
$route: { query: { fmgPage: "page-name" } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = "something";
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
});
|
||||
|
||||
it("Should return loader position", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
global: {
|
||||
mocks: {
|
||||
$route: { query: { fmgPage: "page-name" } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = "something";
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
describe("baseInputButton checks", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(input.attributes().type).toEqual("checkbox");
|
||||
});
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
it("Should return input type radio if isMultiSelect is false or not specified", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
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("(Radio) Should emit button value on selectedValue change", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
value: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
modelValue: "List Card Checkbox",
|
||||
buttonID: "list-card-id",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = "test";
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("test");
|
||||
});
|
||||
|
||||
it("(Checkbox) Should emit button value on selectedValue change", 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",
|
||||
isMultiSelect: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = ["test"];
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["test"]);
|
||||
});
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
describe("styling/UI", () => {
|
||||
test("has buttonLabel => displays buttonLabel", () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
buttonLabel: "Surprise!",
|
||||
modelValue: "",
|
||||
groupName: "groupName",
|
||||
value: "myValue",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
});
|
||||
// Assert
|
||||
const content = wrapper.find(".list-button-content");
|
||||
expect(content.isVisible()).toBe(true);
|
||||
expect(content.text()).toContain("Surprise!");
|
||||
});
|
||||
|
||||
it("Should return primary label text (buttonID)", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
buttonID: "List Card Checkbox",
|
||||
},
|
||||
test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
buttonLabel: "Surprise!",
|
||||
buttonLabelSubCopy: "Super duper surprise :)",
|
||||
modelValue: "",
|
||||
groupName: "groupName",
|
||||
value: "myValue",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const content = wrapper.find(".list-button-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!",
|
||||
modelValue: "",
|
||||
groupName: "groupName",
|
||||
value: "myValue",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const content = wrapper.find(".list-button-content");
|
||||
const screenReaderOnlyText = wrapper.find(".sr-only");
|
||||
expect(content.isVisible()).toBe(true);
|
||||
expect(screenReaderOnlyText.exists()).toBe(true);
|
||||
expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
|
||||
});
|
||||
|
||||
it("Should return screen reader text", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
screenReaderOnlyText: "Screen Reader Only Text",
|
||||
modelValue: "",
|
||||
groupName: "groupName",
|
||||
value: "myValue",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 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",
|
||||
modelValue: "",
|
||||
groupName: "groupName",
|
||||
value: "myValue",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 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,
|
||||
groupName: "groupName",
|
||||
modelValue: "",
|
||||
value: "myValue",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
});
|
||||
});
|
||||
|
||||
// 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: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
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: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
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: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
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: false, 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(false);
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function setupMocks({ mockData }) {
|
||||
const wrapper = mount(listButton, {
|
||||
...mockData,
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
});
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,329 +1,179 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import listCard from "./list-card";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
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",
|
||||
},
|
||||
});
|
||||
it("Should return input type checkbox if isMultiSelect is true", () => {
|
||||
// Act
|
||||
const wrapper = mount(listCard, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "checkbox-demo-1",
|
||||
groupName: "Checkbox 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().type).toEqual("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",
|
||||
},
|
||||
});
|
||||
it("Should return primary label text", () => {
|
||||
// Act
|
||||
const wrapper = mount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("p");
|
||||
expect(paragraph.text()).toEqual("Windshield");
|
||||
// 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",
|
||||
},
|
||||
});
|
||||
it("Should return secondary (sub) label text", () => {
|
||||
// Act
|
||||
const wrapper = mount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test",
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("p:nth-of-type(2)");
|
||||
expect(paragraph.text()).toEqual("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",
|
||||
},
|
||||
});
|
||||
it("Should return input group name used for radio or checkbox", () => {
|
||||
// Act
|
||||
const wrapper = mount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test",
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.attributes().for).toEqual("List Card Checkbox");
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().name).toEqual("radio 1");
|
||||
});
|
||||
|
||||
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",
|
||||
},
|
||||
});
|
||||
it("Should return aria-required state", () => {
|
||||
// Act
|
||||
const wrapper = mount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().name).toEqual("radio 1");
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
});
|
||||
|
||||
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,
|
||||
},
|
||||
});
|
||||
it("Should return flex row classes if isWide is true", () => {
|
||||
// Act
|
||||
const wrapper = mount(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: "",
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
// Assert
|
||||
const label = wrapper.find(".list-card-content");
|
||||
expect(label.exists()).toBe(true);
|
||||
const labelClasses = wrapper.vm.labelClasses;
|
||||
expect(labelClasses).toContain("flex-row");
|
||||
expect(label.classes()).toContain("flex-row");
|
||||
});
|
||||
|
||||
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: "",
|
||||
},
|
||||
});
|
||||
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is provided", () => {
|
||||
// Act
|
||||
const wrapper = mount(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",
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// 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"]);
|
||||
// Assert
|
||||
const label = wrapper.find(".list-card-content");
|
||||
expect(label.exists()).toBe(true);
|
||||
const labelClasses = wrapper.vm.labelClasses;
|
||||
expect(labelClasses).toContain("flex-row");
|
||||
expect(label.classes()).toContain("flex-row");
|
||||
expect(labelClasses).toContain("checkboxTop");
|
||||
expect(label.classes()).toContain("checkboxTop");
|
||||
});
|
||||
|
||||
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",
|
||||
},
|
||||
});
|
||||
it("Should return flex column classes if isWide is false", () => {
|
||||
// Act
|
||||
const wrapper = mount(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,
|
||||
value: "test value",
|
||||
},
|
||||
});
|
||||
|
||||
// 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"]);
|
||||
// Assert
|
||||
const label = wrapper.find(".list-card-content");
|
||||
expect(label.exists()).toBe(true);
|
||||
const labelClasses = wrapper.vm.labelClasses;
|
||||
expect(labelClasses).toContain("flex-column");
|
||||
expect(label.classes()).toContain("flex-column");
|
||||
});
|
||||
|
||||
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: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
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: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
expect(wrapper.vm.displayLoader).toBeCalled;
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue