CSR-762 tests
This commit is contained in:
Katie
parent
33faaac7bc
commit
78bb3f5e8c
9 changed files with 856 additions and 870 deletions
|
|
@ -1,8 +1,6 @@
|
|||
import { shallowMount, mount } from "@vue/test-utils";
|
||||
import baseInputButton from "./base-input-button";
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||
|
||||
// TODO KO
|
||||
describe("baseInputButton.vue", () => {
|
||||
describe("general", () => {
|
||||
describe("checkbox", () => {
|
||||
|
|
@ -73,14 +71,14 @@ describe("baseInputButton.vue", () => {
|
|||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// Act
|
||||
await wrapper.trigger("click");
|
||||
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["X"]);
|
||||
});
|
||||
|
||||
|
||||
test("input is checked", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
|
|
@ -92,17 +90,16 @@ describe("baseInputButton.vue", () => {
|
|||
},
|
||||
});
|
||||
const input = wrapper.find("input");
|
||||
|
||||
|
||||
// Act
|
||||
await wrapper.trigger("click");
|
||||
|
||||
|
||||
|
||||
// Assert
|
||||
expect(input.element.checked).toBe(true);
|
||||
});
|
||||
})
|
||||
|
||||
describe("clicked twice" ,() => {
|
||||
});
|
||||
|
||||
describe("clicked twice", () => {
|
||||
test("input is unchecked", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
|
|
@ -114,15 +111,15 @@ describe("baseInputButton.vue", () => {
|
|||
},
|
||||
});
|
||||
const input = wrapper.find("input");
|
||||
|
||||
|
||||
// Act
|
||||
await wrapper.trigger("click");
|
||||
await wrapper.trigger("click");
|
||||
|
||||
|
||||
// Assert
|
||||
expect(input.element.checked).toBe(false);
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
describe("is initially checked, click once", () => {
|
||||
test("input is unchecked", async () => {
|
||||
|
|
@ -132,19 +129,19 @@ describe("baseInputButton.vue", () => {
|
|||
propsData: {
|
||||
isMultiSelect: true,
|
||||
value: "X",
|
||||
modelValue:["X"]
|
||||
modelValue: ["X"],
|
||||
},
|
||||
},
|
||||
});
|
||||
const input = wrapper.find("input");
|
||||
|
||||
|
||||
// Act
|
||||
await wrapper.trigger("click");
|
||||
|
||||
|
||||
// Assert
|
||||
expect(input.element.checked).toBe(false);
|
||||
});
|
||||
|
||||
|
||||
test("input is unchecked", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
|
|
@ -152,19 +149,19 @@ describe("baseInputButton.vue", () => {
|
|||
propsData: {
|
||||
isMultiSelect: true,
|
||||
value: "X",
|
||||
modelValue:["X"]
|
||||
modelValue: ["X"],
|
||||
},
|
||||
},
|
||||
});
|
||||
const input = wrapper.find("input");
|
||||
|
||||
|
||||
// Act
|
||||
await wrapper.trigger("click");
|
||||
|
||||
|
||||
// Assert
|
||||
expect(input.element.checked).toBe(false);
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe("radio", () => {
|
||||
|
|
@ -189,12 +186,8 @@ describe("baseInputButton.vue", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("keyboard navigation and events", () => {
|
||||
describe("events", () => {
|
||||
describe("checkbox", () => {
|
||||
test.todo("focus on a checkbox => update:modelValue is not emitted");
|
||||
|
||||
test.todo("blur from a checkbox => update:modelValue is not emitted");
|
||||
|
||||
test("change event fired from checkbox => update:modelValue is emitted with correct value", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
|
|
@ -257,10 +250,6 @@ describe("baseInputButton.vue", () => {
|
|||
});
|
||||
|
||||
describe("radio", () => {
|
||||
test.todo("focus on a radio button => update:modelValue is not emitted");
|
||||
|
||||
test.todo("blur from a radio button => update:modelValue is not emitted");
|
||||
|
||||
test("focus and click space on a radio button => update:modelValue is emitted with correct value", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
|
|
@ -775,7 +764,19 @@ describe("baseInputButton.vue", () => {
|
|||
});
|
||||
|
||||
describe("handlePushClickEventToGACheck", () => {
|
||||
test.todo("");
|
||||
test.todo("called from click or click-like event => call pushClickEventToGA");
|
||||
|
||||
describe("called from keyboard navigation/button-question-focus-helper", () => {
|
||||
test.todo("valueToEmit is null => pushClickEventToGA not called");
|
||||
|
||||
test.todo("isMultiSelect => pushClickEventToGA not called");
|
||||
|
||||
test.todo("!isMultiSelect and selectingInitiatesLoad => pushClickEventToGA not called");
|
||||
|
||||
test.todo("valueToEmit is null => pushClickEventToGA not called");
|
||||
|
||||
test.todo("valueToEmit is null => pushClickEventToGA not called");
|
||||
});
|
||||
});
|
||||
|
||||
describe("pushClickEventToGA", () => {
|
||||
|
|
@ -1011,179 +1012,17 @@ describe("baseInputButton.vue", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("integration testing", () => {
|
||||
describe("keyboard navigation", () => {
|
||||
describe("checkbox", () => {
|
||||
test("click on both => both are selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
});
|
||||
test.todo("focus on a checkbox => update:modelValue is not emitted");
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
||||
expect(wrapper.vm.value).toEqual([]);
|
||||
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual(["value1", "value2"]);
|
||||
});
|
||||
|
||||
test("click input 1, 2, 1 => only input 2 selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
||||
expect(wrapper.vm.value).toEqual([]);
|
||||
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual(["value2"]);
|
||||
});
|
||||
|
||||
const defaultCheckedCases = [
|
||||
[["value2"], false, true],
|
||||
[["value1", "value2"], true, true],
|
||||
[["value1"], true, false],
|
||||
[[], false, false],
|
||||
];
|
||||
test.each(defaultCheckedCases)(
|
||||
"initial value is %s => correct input buttons are selected",
|
||||
async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: true,
|
||||
initialValue: modelValue,
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputs = wrapper.findAll("input");
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
|
||||
// Assert
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
||||
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
|
||||
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
|
||||
expect(wrapper.vm.value).toEqual(modelValue);
|
||||
}
|
||||
);
|
||||
test.todo("blur from a checkbox => update:modelValue is not emitted");
|
||||
});
|
||||
|
||||
describe("radio", () => {
|
||||
test("click on both => last clicked is selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
test.todo("focus on a radio button => update:modelValue is not emitted");
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
||||
expect(wrapper.vm.value).toEqual("");
|
||||
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual("value2");
|
||||
});
|
||||
|
||||
test("click input 1, 2, 1 => input 1 is selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
||||
expect(wrapper.vm.value).toEqual("");
|
||||
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual("value1");
|
||||
});
|
||||
|
||||
const defaultCheckedCases = [
|
||||
["", false, false],
|
||||
["value1", true, false],
|
||||
["value2", false, true],
|
||||
[[], false, false],
|
||||
];
|
||||
test.each(defaultCheckedCases)(
|
||||
"initial value is %s => correct input buttons are selected",
|
||||
async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: false,
|
||||
initialValue: modelValue,
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputs = wrapper.findAll("input");
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
|
||||
// Assert
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
||||
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
|
||||
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
|
||||
expect(wrapper.vm.value).toEqual(modelValue);
|
||||
}
|
||||
);
|
||||
test.todo("blur from a radio button => update:modelValue is not emitted");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1216,50 +1055,3 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
|
|||
|
||||
return { wrapper };
|
||||
}
|
||||
|
||||
function setupBaseInputButtonWrapper({ mockData = {} }) {
|
||||
const originalData = baseInputButton.data();
|
||||
baseInputButton.data = () => {
|
||||
return {
|
||||
...originalData,
|
||||
// $route: {
|
||||
// query: {
|
||||
// fmgPage: "myPage",
|
||||
// },
|
||||
// },
|
||||
};
|
||||
};
|
||||
|
||||
baseInputButton.methods.pushClickEventToGA = jest.fn();
|
||||
|
||||
const baseInputButtonWrapper = {
|
||||
name: "baseInputButtonWrapper",
|
||||
components: { baseInputButton },
|
||||
template: '<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
};
|
||||
|
||||
let parentComponentTemplate = `<div>`;
|
||||
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value1" />`;
|
||||
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`;
|
||||
parentComponentTemplate += `</div>`;
|
||||
const wrapper = mount(
|
||||
{
|
||||
data() {
|
||||
return {
|
||||
value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""),
|
||||
$route: {
|
||||
query: {
|
||||
fmgPage: "myPage",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
template: parentComponentTemplate,
|
||||
components: { baseInputButtonWrapper },
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,6 @@ export default {
|
|||
},
|
||||
handleClick(e) {
|
||||
this.handleSelectionChange(e);
|
||||
console.log(this.valueToEmit)
|
||||
this.$emit("update:modelValue", this.valueToEmit);
|
||||
},
|
||||
handleFocus() {
|
||||
|
|
|
|||
|
|
@ -3,171 +3,172 @@ import buttonQuestion from "@/common-components/button-question/button-question"
|
|||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
|
||||
jest.mock(
|
||||
"@/store",
|
||||
() => {
|
||||
return {};
|
||||
},
|
||||
{ virtual: true }
|
||||
"@/store",
|
||||
() => {
|
||||
return {};
|
||||
},
|
||||
{ virtual: true }
|
||||
);
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
isOverflowScrollable: true,
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
isOverflowScrollable: true,
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const fieldSet = wrapper.find("fieldset");
|
||||
expect(fieldSet.classes()).toContain("overflow-scroll");
|
||||
});
|
||||
// Assert
|
||||
const fieldSet = wrapper.find("fieldset");
|
||||
expect(fieldSet.classes()).toContain("overflow-scroll");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Fieldset classes should contain row if button type is listCard", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "listCard",
|
||||
groupName: "group-name",
|
||||
},
|
||||
it("Fieldset classes should contain row if button type is listCard", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "listCard",
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
// Assert
|
||||
const Div = wrapper.find("fieldset div");
|
||||
expect(Div.classes()).toContain("row");
|
||||
});
|
||||
// Assert
|
||||
const Div = wrapper.find("fieldset div");
|
||||
expect(Div.classes()).toContain("row");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "listButtonHorizontal",
|
||||
groupName: "group-name",
|
||||
},
|
||||
it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "listButtonHorizontal",
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
// Assert
|
||||
const Div = wrapper.find("fieldset div");
|
||||
expect(Div.classes()).toContain("d-flex");
|
||||
});
|
||||
// Assert
|
||||
const Div = wrapper.find("fieldset div");
|
||||
expect(Div.classes()).toContain("d-flex");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Fieldset classes should contain ui-radio if button type is radio", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "radio",
|
||||
groupName: "group-name",
|
||||
},
|
||||
it("Fieldset classes should contain ui-radio if button type is radio", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "radio",
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
// Assert
|
||||
const Div = wrapper.find("fieldset div");
|
||||
expect(Div.classes()).toContain("ui-radio");
|
||||
});
|
||||
// Assert
|
||||
const Div = wrapper.find("fieldset div");
|
||||
expect(Div.classes()).toContain("ui-radio");
|
||||
});
|
||||
});
|
||||
|
||||
// testing a computed property
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("getColLength should return '12' if prop isWide is set to true", () => {
|
||||
// Act
|
||||
const localThis = { isWide: true };
|
||||
it("getColLength should return '12' if prop isWide is set to true", () => {
|
||||
// Act
|
||||
const localThis = { isWide: true };
|
||||
|
||||
expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("getColLength should return '' if prop isWide is set to false", () => {
|
||||
// Act
|
||||
const localThis = {
|
||||
isWide: false,
|
||||
answers: ["a", "b"],
|
||||
groupName: "group-name",
|
||||
};
|
||||
|
||||
expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should return answer.Text if prop useTextForValue is true", async () => {
|
||||
// Act
|
||||
const localThis = { useTextForValue: true };
|
||||
const answer = { Name: "testName", Text: "testText" };
|
||||
|
||||
// Assert
|
||||
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
|
||||
"testText"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should return answer.Name if prop useTextForValue is false and there's not buttonLabel and answer.Name exists", async () => {
|
||||
// Act
|
||||
const localThis = { useTextForValue: false };
|
||||
const answer = { Name: "testName", Text: "testText" };
|
||||
|
||||
// Assert
|
||||
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
|
||||
"testName"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// TODO KO
|
||||
describe("buttonQuestion.vue", () => {
|
||||
describe.skip("handleAnswerChange", () => {
|
||||
test("is radio => should emit captured value", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(
|
||||
buttonQuestion,
|
||||
setupMocks({ propsData: { groupName: "group-name" } })
|
||||
);
|
||||
await wrapper.setProps({
|
||||
answers: ["2022", "2021", "2020"],
|
||||
isMultiSelect: false,
|
||||
modelValue: "",
|
||||
});
|
||||
const val = "2021";
|
||||
wrapper.vm.handleAnswerChange(val);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
|
||||
expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12");
|
||||
});
|
||||
});
|
||||
|
||||
test("is checkbox => should emit captured value", async () => {
|
||||
const wrapper = shallowMount(
|
||||
buttonQuestion,
|
||||
setupMocks({ propsData: { groupName: "group-name" } })
|
||||
);
|
||||
await wrapper.setProps({
|
||||
answers: ["2022", "2021", "2020"],
|
||||
isMultiSelect: false,
|
||||
modelValue: "",
|
||||
});
|
||||
const val = ["2022", "2021", , "2019", "2020"];
|
||||
wrapper.vm.handleAnswerChange(val);
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("getColLength should return '' if prop isWide is set to false", () => {
|
||||
// Act
|
||||
const localThis = {
|
||||
isWide: false,
|
||||
answers: ["a", "b"],
|
||||
groupName: "group-name",
|
||||
};
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
|
||||
["2022", "2021", , "2019", "2020"],
|
||||
]);
|
||||
expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should return answer.Text if prop useTextForValue is true", async () => {
|
||||
// Act
|
||||
const localThis = { useTextForValue: true };
|
||||
const answer = { Name: "testName", Text: "testText" };
|
||||
|
||||
// Assert
|
||||
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testText");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should return answer.Name if prop useTextForValue is false and there's not buttonLabel and answer.Name exists", async () => {
|
||||
// Act
|
||||
const localThis = { useTextForValue: false };
|
||||
const answer = { Name: "testName", Text: "testText" };
|
||||
|
||||
// Assert
|
||||
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testName");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
describe("selectedValues", () => {
|
||||
test("is radio => should emit captured value", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
buttonQuestion,
|
||||
setupMocks({ propsData: { groupName: "group-name" } })
|
||||
);
|
||||
await wrapper.setProps({
|
||||
answers: ["2022", "2021", "2020"],
|
||||
isMultiSelect: false,
|
||||
modelValue: "",
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValues = "2021";
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("2021");
|
||||
});
|
||||
|
||||
test("is checkbox => should emit captured value", async () => {
|
||||
const wrapper = shallowMount(
|
||||
buttonQuestion,
|
||||
setupMocks({ propsData: { groupName: "group-name" } })
|
||||
);
|
||||
await wrapper.setProps({
|
||||
answers: ["2022", "2021", "2020"],
|
||||
isMultiSelect: false,
|
||||
modelValue: "",
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValues = ["2022", "2021", "2020", "2019", "2020"];
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
|
||||
"2022",
|
||||
"2021",
|
||||
"2020",
|
||||
"2019",
|
||||
"2020",
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks(mountOptionsMockData = {}) {
|
||||
const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } };
|
||||
const baseMountOptions = getMountOptions(
|
||||
Object.assign(defaultMountOptions, mountOptionsMockData)
|
||||
);
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } };
|
||||
const baseMountOptions = getMountOptions(
|
||||
Object.assign(defaultMountOptions, mountOptionsMockData)
|
||||
);
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
|
||||
return allMountOptions;
|
||||
return allMountOptions;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
let lastFocusedInputGroupName = "";
|
||||
let onButtonQuestionLostFocusCallback = null;
|
||||
|
||||
// TODO KO add tests
|
||||
const handleAnyComponentFocus = (e) => {
|
||||
const targetType = e.target.type;
|
||||
if (targetType !== "radio" && targetType !== "checkbox") {
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ describe("vehicle-parts.vue", () => {
|
|||
expect(arePagePrerequisitesValid).toBe(true);
|
||||
});
|
||||
|
||||
test.only("Initial data, should populate this.selectedGlassParts", async () => {
|
||||
test("Initial data, should populate this.selectedGlassParts", async () => {
|
||||
|
||||
//Arrange
|
||||
store.getters.pageData.mockReturnValue(basePartResponse);
|
||||
|
|
|
|||
|
|
@ -1,81 +1,234 @@
|
|||
import { mount } from "@vue/test-utils";
|
||||
import baseInputButton from "@/common-components/base-input-button/base-input-button";
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||
|
||||
describe("input-button-wrapper-mixin", () => {
|
||||
describe("mouse clicks", () => {
|
||||
describe("checkbox", () => {
|
||||
test.todo("clicking once checks the baseInputButton");
|
||||
test("click on both => both are selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
});
|
||||
|
||||
test.todo("clicking twice unchecks the baseInputButton");
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
||||
expect(wrapper.vm.value).toEqual([]);
|
||||
|
||||
test.todo(
|
||||
"is initially checked => checking unchecks the baseInputButton"
|
||||
);
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
|
||||
test.todo("clicked => correct event and value are emitted");
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual(["value1", "value2"]);
|
||||
});
|
||||
|
||||
test("click input 1, 2, 1 => only input 2 selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
||||
expect(wrapper.vm.value).toEqual([]);
|
||||
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual(["value2"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("radio", () => {
|
||||
test.todo("clicking once selects the baseInputButton");
|
||||
test("click on both => last clicked is selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
test.todo("clicking twice keeps the baseInputButton selected");
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
||||
expect(wrapper.vm.value).toEqual("");
|
||||
|
||||
test.todo(
|
||||
"is initially selected => click keeps the baseInputButton selected"
|
||||
);
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
|
||||
test.todo("clicked => correct event and value are emitted");
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual("value2");
|
||||
});
|
||||
|
||||
test("click input 1, 2, 1 => input 1 is selected", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
||||
expect(wrapper.vm.value).toEqual("");
|
||||
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
await inputButtonTwo.find("input").trigger("click");
|
||||
await inputButtonOne.find("input").trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.value).toEqual("value1");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("keyboard navigation and", () => {
|
||||
describe("initial values", () => {
|
||||
describe("checkbox", () => {
|
||||
test.todo(
|
||||
"focus on a checkbox => inputButtonClicked is not emitted"
|
||||
);
|
||||
const defaultCheckedCases = [
|
||||
[["value2"], false, true],
|
||||
[["value1", "value2"], true, true],
|
||||
[["value1"], true, false],
|
||||
[[], false, false],
|
||||
];
|
||||
test.each(defaultCheckedCases)(
|
||||
"initial value is %s => correct input buttons are selected",
|
||||
async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: true,
|
||||
initialValue: modelValue,
|
||||
},
|
||||
});
|
||||
|
||||
test.todo(
|
||||
"blur from a checkbox => inputButtonClicked is not emitted"
|
||||
);
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputs = wrapper.findAll("input");
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
|
||||
test.todo(
|
||||
"focus and click space on a checkbox => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
|
||||
test.todo(
|
||||
"focus and click space on a checkbox that is already checked => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
|
||||
test.todo(
|
||||
"focus and click enter on a checkbox => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
|
||||
test.todo(
|
||||
"focus and click enter on a checkbox that is already checked => inputButtonClicked is emitted with correct value"
|
||||
// Assert
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
||||
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
|
||||
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
|
||||
expect(wrapper.vm.value).toEqual(modelValue);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
describe("radio", () => {
|
||||
test.todo(
|
||||
"focus on a radio button => inputButtonClicked is not emitted"
|
||||
);
|
||||
const defaultCheckedCases = [
|
||||
["", false, false],
|
||||
["value1", true, false],
|
||||
["value2", false, true],
|
||||
[[], false, false],
|
||||
];
|
||||
test.each(defaultCheckedCases)(
|
||||
"initial value is %s => correct input buttons are selected",
|
||||
async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
|
||||
// Arrange
|
||||
const { wrapper } = setupBaseInputButtonWrapper({
|
||||
mockData: {
|
||||
isMultiSelect: false,
|
||||
initialValue: modelValue,
|
||||
},
|
||||
});
|
||||
|
||||
test.todo(
|
||||
"blur from a radio button => inputButtonClicked is not emitted"
|
||||
);
|
||||
// Act
|
||||
const buttonWrappers = wrapper.findAllComponents({
|
||||
name: "baseInputButtonWrapper",
|
||||
});
|
||||
const inputs = wrapper.findAll("input");
|
||||
const inputButtonOne = buttonWrappers.at(0);
|
||||
const inputButtonTwo = buttonWrappers.at(1);
|
||||
|
||||
test.todo(
|
||||
"focus and click space on a radio button => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
|
||||
test.todo(
|
||||
"focus and click space on a radio button that is already selected => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
|
||||
test.todo(
|
||||
"focus and click enter on a radio button => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
|
||||
test.todo(
|
||||
"focus and click enter on a radio button that is already selected => inputButtonClicked is emitted with correct value"
|
||||
// Assert
|
||||
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
||||
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
||||
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
|
||||
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
|
||||
expect(wrapper.vm.value).toEqual(modelValue);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupBaseInputButtonWrapper({ mockData = {} }) {
|
||||
const originalData = baseInputButton.data();
|
||||
baseInputButton.data = () => {
|
||||
return {
|
||||
...originalData,
|
||||
// $route: {
|
||||
// query: {
|
||||
// fmgPage: "myPage",
|
||||
// },
|
||||
// },
|
||||
};
|
||||
};
|
||||
|
||||
baseInputButton.methods.pushClickEventToGA = jest.fn();
|
||||
|
||||
const baseInputButtonWrapper = {
|
||||
name: "baseInputButtonWrapper",
|
||||
components: { baseInputButton },
|
||||
template: '<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
};
|
||||
|
||||
let parentComponentTemplate = `<div>`;
|
||||
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value1" />`;
|
||||
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`;
|
||||
parentComponentTemplate += `</div>`;
|
||||
const wrapper = mount(
|
||||
{
|
||||
data() {
|
||||
return {
|
||||
value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""),
|
||||
$route: {
|
||||
query: {
|
||||
fmgPage: "myPage",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
template: parentComponentTemplate,
|
||||
components: { baseInputButtonWrapper },
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,202 +1,200 @@
|
|||
import { shallowMount, mount } from "@vue/test-utils";
|
||||
import { 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,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 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");
|
||||
// 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");
|
||||
});
|
||||
|
||||
const selectedValues = ["something", ["test"]]
|
||||
it.each(selectedValues)("Should emit button value on click", async (selectedValue) => {
|
||||
// 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.selectedValue = selectedValue;
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
|
||||
});
|
||||
});
|
||||
|
||||
it("Should return input type radio if isMultiSelect is false or not specified", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
describe("styling/UI", () => {
|
||||
it("Should return screen reader text", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
screenReaderOnlyText: "Screen Reader Only Text",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
// 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!");
|
||||
});
|
||||
});
|
||||
|
||||
// TODO KO
|
||||
it.skip("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 }) {
|
||||
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],
|
||||
});
|
||||
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 };
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,262 +1,305 @@
|
|||
import { shallowMount, mount } 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";
|
||||
|
||||
// TODO KO
|
||||
describe.skip("list-button.vue", () => {
|
||||
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,
|
||||
},
|
||||
},
|
||||
});
|
||||
describe("list-button.vue", () => {
|
||||
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.handleAnswerChange("something");
|
||||
await wrapper.vm.$nextTick();
|
||||
// Act
|
||||
wrapper.vm.selectedValue = "something";
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.exists()).toBe(true);
|
||||
// Assert
|
||||
console.log(wrapper.html())
|
||||
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");
|
||||
});
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
global: {
|
||||
mocks: {
|
||||
$route: { query: { fmgPage: "page-name" } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
describe("baseInputButton checks", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.handleAnswerChange("something");
|
||||
await nextTick();
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
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"]);
|
||||
});
|
||||
});
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
});
|
||||
describe("styling/UI", () => {
|
||||
test("has buttonLabel => displays buttonLabel", () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
buttonLabel: "Surprise!",
|
||||
modelValue: "",
|
||||
groupName: "groupName",
|
||||
value: "myValue"
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.handleAnswerChange("test");
|
||||
await nextTick();
|
||||
// Assert
|
||||
const content = wrapper.find(".list-button-content");
|
||||
expect(content.isVisible()).toBe(true);
|
||||
expect(content.text()).toContain("Surprise!");
|
||||
});
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("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", () => {
|
||||
test("has buttonLabel => displays buttonLabel", () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
buttonLabel: "Surprise!",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const content = wrapper.find(".list-button-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-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-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",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({ mockData }) {
|
||||
const wrapper = mount(listButton, {
|
||||
...mockData,
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
});
|
||||
const wrapper = mount(listButton, {
|
||||
...mockData,
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
});
|
||||
|
||||
return { wrapper };
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export default {
|
|||
},
|
||||
preHandleAnswerChange() {
|
||||
if (this.selectingInitiatesLoad) {
|
||||
console.log("DISPLAY LOADER")
|
||||
this.displayLoader();
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue