Merge remote-tracking branch 'origin/feature/CSR-762' into feature/CSR-731
This commit is contained in:
Scott Kiener
commit
a4d379d2f7
14 changed files with 2126 additions and 1054 deletions
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"bracketSameLine": true
|
||||
"bracketSameLine": true,
|
||||
"printWidth": 100
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@ module.exports = {
|
|||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
statements: 80,
|
||||
statements: 85,
|
||||
// Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
|
||||
},
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -4,7 +4,7 @@
|
|||
:for="buttonId"
|
||||
@focusin="handleFocus"
|
||||
@focusout="handleBlur"
|
||||
@mousedown.left="handleEventAction('click', $event)">
|
||||
@mousedown.left="handleEventAction(eventTypes.CLICK, $event)">
|
||||
<input
|
||||
:type="inputType"
|
||||
:id="buttonId"
|
||||
|
|
@ -14,9 +14,9 @@
|
|||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
@keypress.space="handleEventAction('space', $event)"
|
||||
@keypress.enter="handleEventAction('enter', $event)"
|
||||
@change="handleEventAction('change', $event)" />
|
||||
@keypress.space="handleEventAction(eventTypes.SPACE, $event)"
|
||||
@keypress.enter="handleEventAction(eventTypes.ENTER, $event)"
|
||||
@change="handleEventAction(eventTypes.CHANGE, $event)" />
|
||||
|
||||
<slot></slot>
|
||||
</label>
|
||||
|
|
@ -48,10 +48,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleEventAction(eventType, e) {
|
||||
// console.log({
|
||||
// eventType,
|
||||
// e
|
||||
// })
|
||||
if (this.isMultiSelect) {
|
||||
switch (eventType) {
|
||||
case this.eventTypes.ENTER:
|
||||
|
|
@ -93,7 +89,7 @@ export default {
|
|||
}
|
||||
|
||||
this.valueToEmit = newValue;
|
||||
} else {
|
||||
} else if (!this.isMultiSelect) {
|
||||
this.valueToEmit = this.value;
|
||||
}
|
||||
|
||||
|
|
@ -115,9 +111,10 @@ export default {
|
|||
});
|
||||
},
|
||||
handlePushClickEventToGACheck(source) {
|
||||
// if from a click or click-like event
|
||||
if (source === this.eventTypes.CLICK) {
|
||||
this.pushClickEventToGA();
|
||||
} else {
|
||||
} else { // if from tabbing around
|
||||
if (
|
||||
this.valueToEmit !== null &&
|
||||
!this.isValueSelectedOnClick &&
|
||||
|
|
@ -129,8 +126,6 @@ export default {
|
|||
}
|
||||
},
|
||||
pushClickEventToGA(value) {
|
||||
console.log("PUSHHH")
|
||||
console.log(this.$route)
|
||||
this.pushEventToGA(
|
||||
this.$route.query[queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
|
|
@ -139,7 +134,7 @@ export default {
|
|||
this.valueToLogType
|
||||
);
|
||||
|
||||
this.setLastValuePushedToGa(this.value);
|
||||
this.setLastValuePushedToGa(value ?? this.value);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
/**
|
||||
* Helper for GA click event. When the user mouse clicks on a `base-input-button`, we
|
||||
* push the click event. When the user tabs through a list of radio buttons via a
|
||||
* keyboard, we only want to push the GA click event iff the select was deliberate
|
||||
* keyboard, we only want to push the GA click event if the selection was deliberate
|
||||
* (space/enter key) or if there is a selection and the user tabs off of the radio group.
|
||||
*/
|
||||
|
||||
let lastFocusedInputGroupName = "";
|
||||
let onButtonQuestionLostFocusCallback = null;
|
||||
|
||||
// TODO KO add tests
|
||||
const handleAnyComponentFocus = (e) => {
|
||||
const targetType = e.target.type;
|
||||
if (targetType !== "radio" && targetType !== "checkbox") {
|
||||
|
|
|
|||
251
src/helpers/button-question-focus-helper.spec.js
Normal file
251
src/helpers/button-question-focus-helper.spec.js
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
import {
|
||||
handleAnyComponentFocus,
|
||||
handleButtonComponentFocus,
|
||||
handleInputComponentBlur,
|
||||
} from "@/helpers/button-question-focus-helper";
|
||||
|
||||
describe("buttonQuestionFocusHelper", () => {
|
||||
let onButtonQuestionLostFocusCallbackOne = jest.fn();
|
||||
let onButtonQuestionLostFocusCallbackTwo = jest.fn();
|
||||
|
||||
let focusOnInputInGroupOne;
|
||||
let blurFromInputInGroupOne;
|
||||
let focusOnInputInGroupTwo;
|
||||
let blurFromInputInGroupTwo;
|
||||
|
||||
let focusOnNonRadioCheckboxElement;
|
||||
|
||||
beforeEach(() => {
|
||||
onButtonQuestionLostFocusCallbackOne = jest.fn();
|
||||
onButtonQuestionLostFocusCallbackTwo = jest.fn();
|
||||
|
||||
// Sanity check
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
focusOnInputInGroupOne = () => {
|
||||
handleButtonComponentFocus({
|
||||
groupName: "group1",
|
||||
});
|
||||
};
|
||||
|
||||
blurFromInputInGroupOne = () => {
|
||||
handleInputComponentBlur({
|
||||
groupName: "group1",
|
||||
onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackOne,
|
||||
});
|
||||
};
|
||||
|
||||
focusOnInputInGroupTwo = () => {
|
||||
handleButtonComponentFocus({
|
||||
groupName: "group2",
|
||||
});
|
||||
};
|
||||
|
||||
blurFromInputInGroupTwo = () => {
|
||||
handleInputComponentBlur({
|
||||
groupName: "group2",
|
||||
onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackTwo,
|
||||
});
|
||||
};
|
||||
|
||||
focusOnNonRadioCheckboxElement = () => {
|
||||
handleAnyComponentFocus({
|
||||
target: {
|
||||
type: "nonRadioCheckbox",
|
||||
},
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
test("focus on input => no callbacks were called", () => {
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("focus on input, then focus on input in same group => no callbacks are called", () => {
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in group 1
|
||||
blurFromInputInGroupOne();
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("focus on non-radio/checkbox, focus on input => no callbacks are called", () => {
|
||||
// focus on non-radio/checkbox
|
||||
focusOnNonRadioCheckboxElement();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("focus on input in group 1, then focus on input in different group => callback for group 1 is called", () => {
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in different group
|
||||
blurFromInputInGroupOne();
|
||||
focusOnInputInGroupTwo();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("focus on input in group 1, focus on input in same group, then focus on input in different group => callback for group 1 is called", () => {
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in same group
|
||||
blurFromInputInGroupOne();
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in different group
|
||||
blurFromInputInGroupOne();
|
||||
focusOnInputInGroupTwo();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("focus on input in group 1, focus on non-radio/checkbox element => callback from group 1 is called", () => {
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in group 2
|
||||
blurFromInputInGroupOne();
|
||||
focusOnNonRadioCheckboxElement();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("focus on input in group 1, focus on input in group 2, focus on non-radio/checkbox element => both callbacks are called", () => {
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in group 2
|
||||
blurFromInputInGroupOne();
|
||||
focusOnInputInGroupTwo();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0);
|
||||
|
||||
// focus on non-radio/checkbox
|
||||
blurFromInputInGroupTwo();
|
||||
focusOnNonRadioCheckboxElement();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test("focus on input in group 1, focus on input in group 2, focus on input in group 1 => both callbacks are called", () => {
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in group 2
|
||||
blurFromInputInGroupOne();
|
||||
focusOnInputInGroupTwo();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0);
|
||||
|
||||
// focus on input in group 1
|
||||
blurFromInputInGroupTwo();
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test("go back and forth a lot => correct callbacks are called at the right time", () => {
|
||||
// Arrange/Act
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in group 2
|
||||
blurFromInputInGroupOne();
|
||||
focusOnInputInGroupTwo();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
|
||||
|
||||
// focus on input in group 1
|
||||
blurFromInputInGroupTwo();
|
||||
focusOnInputInGroupOne();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
|
||||
|
||||
// focus on non-radio/checkbox element
|
||||
blurFromInputInGroupOne();
|
||||
focusOnNonRadioCheckboxElement();
|
||||
|
||||
// Assert
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
|
||||
|
||||
// focus on input in group 1
|
||||
focusOnInputInGroupOne();
|
||||
expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2);
|
||||
expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -22,6 +22,14 @@ describe("windshield-chip-count-question.vue", () => {
|
|||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([2]);
|
||||
});
|
||||
|
||||
test("selectedValue matches modelValue", () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({ modelValueProp: 2 });
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.selectedValue).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
|
|
|
|||
|
|
@ -5,150 +5,224 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
|
|||
import { nextTick } from "vue";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import store from "@/store";
|
||||
|
||||
// Components
|
||||
import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
|
||||
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
|
||||
|
||||
jest.mock("@/store", () => ({
|
||||
commit: jest.fn(),
|
||||
dispatch: jest.fn(),
|
||||
getters: {
|
||||
vehicle: {
|
||||
year: 2019,
|
||||
},
|
||||
},
|
||||
commit: jest.fn(),
|
||||
dispatch: jest.fn(),
|
||||
// getters: jest.fn().mockImplementation(() => ({
|
||||
// vehicle: {
|
||||
// year: 2019,
|
||||
// },
|
||||
// })),
|
||||
}));
|
||||
|
||||
// Mock fetchCmsContentForPage
|
||||
jest.mock("@/helpers/cms-content-helper", () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
|
||||
describe("vehicle-make.vue", () => {
|
||||
test("Make question component is initized with api data", async (done) => {
|
||||
//Arrange
|
||||
const makeQuestionInitialData = ["honda", "ford", "dodge"];
|
||||
const { wrapper, apiPromise } = setupMocks({
|
||||
makeQuestionInitialData: makeQuestionInitialData,
|
||||
});
|
||||
test("Make question component is initized with api data", async (done) => {
|
||||
//Arrange
|
||||
const makeQuestionInitialData = ["honda", "ford", "dodge"];
|
||||
const { wrapper, apiPromise } = setupMocks({
|
||||
makeQuestionInitialData: makeQuestionInitialData,
|
||||
});
|
||||
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-make" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-make" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(
|
||||
makeQuestionInitialData
|
||||
);
|
||||
done();
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(
|
||||
makeQuestionInitialData
|
||||
);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("vehicle-make.vue", () => {
|
||||
test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks({
|
||||
pageHeaderWidgetHeaderText: "Select a make to get started",
|
||||
mountOptionsMockData: {
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
navigateWithoutSaving: jest.fn(),
|
||||
},
|
||||
},
|
||||
});
|
||||
test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks({
|
||||
pageHeaderWidgetHeaderText: "Select a make to get started",
|
||||
mountOptionsMockData: {
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
navigateWithoutSaving: jest.fn(),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-make" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
wrapper.vm.backButtonAction();
|
||||
await nextTick();
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-make" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
wrapper.vm.backButtonAction();
|
||||
await nextTick();
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
|
||||
done();
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("vehicle-make.vue", () => {
|
||||
test("Year set, arePagePrerequisitesValid should be true ", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
describe("arePagePrerequisitesValue", () => {
|
||||
test("Year set, arePagePrerequisitesValid should be true", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
vehicleData: {
|
||||
year: 2019
|
||||
}
|
||||
});
|
||||
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-make" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-make" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
||||
//Assert
|
||||
expect(arePagePrerequisitesValid).toBe(true);
|
||||
});
|
||||
//Assert
|
||||
expect(arePagePrerequisitesValid).toBe(true);
|
||||
});
|
||||
|
||||
test("Year not set, arePagePrerequisitesValid should be false", async () => {
|
||||
//Arrange
|
||||
store.getters.vehicle.year = jest.fn().mockReturnValueOnce(undefined);
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
//Act
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
||||
//Assert
|
||||
expect(arePagePrerequisitesValid).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
test("selectedMake changes => save make in store", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
navigateWithSaving: jest.fn(),
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
// Act
|
||||
await wrapper.setData({
|
||||
selectedMake: "Make",
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledWith(
|
||||
"saveVehicleMake",
|
||||
"Make",
|
||||
false
|
||||
);
|
||||
});
|
||||
|
||||
test("selectedMake changes => navigate with saving", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
navigateWithSaving: jest.fn(),
|
||||
},
|
||||
route: {
|
||||
fmgPage: "test",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
await wrapper.setData({
|
||||
selectedMake: "Make",
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
|
||||
"SELECTED_MAKE",
|
||||
expect.anything()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function setupMocks({
|
||||
vehicleMakeQuestionCmsContent = {},
|
||||
makeQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {},
|
||||
vehicleMakeQuestionCmsContent = {},
|
||||
makeQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {},
|
||||
vehicleData = {}
|
||||
}) {
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
|
||||
VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
|
||||
VehicleBannerWidget: {
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
FunnelHeaderWidget: {
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
},
|
||||
makeQuestionInitialData: makeQuestionInitialData,
|
||||
};
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
|
||||
VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
|
||||
VehicleBannerWidget: {
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
FunnelHeaderWidget: {
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
},
|
||||
makeQuestionInitialData: makeQuestionInitialData,
|
||||
};
|
||||
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
store.getters = {
|
||||
vehicle: vehicleData
|
||||
}
|
||||
|
||||
//Mock make question methods
|
||||
makeQuestion.methods = {
|
||||
loadInitialData: jest.fn(),
|
||||
initializeComponent: jest.fn(),
|
||||
};
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
const wrapper = shallowMount(vehicleMake, mountOptions);
|
||||
const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
|
||||
makeQuestionWrapper.vm.initializeComponent =
|
||||
makeQuestion.methods.initializeComponent;
|
||||
//Mock make question methods
|
||||
makeQuestion.methods = {
|
||||
loadInitialData: jest.fn(),
|
||||
initializeComponent: jest.fn(),
|
||||
};
|
||||
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
const wrapper = shallowMount(vehicleMake, mountOptions);
|
||||
const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
|
||||
makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
|
||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export default {
|
|||
buttonAuxillaryCopy: String,
|
||||
buttonFooterCopy: String,
|
||||
buttonImage: String,
|
||||
buttonImageId: String,
|
||||
altText: {
|
||||
type: String,
|
||||
default: "",
|
||||
|
|
|
|||
|
|
@ -1,81 +1,317 @@
|
|||
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";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
|
||||
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"
|
||||
// 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(
|
||||
"focus and click space on a radio button that is already selected => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
// shared checks between components that use input-button-wrapper-mixin
|
||||
describe("shared checks", () => {
|
||||
const inputButtonComponents = [listButtonHorizontal, listButton, listCard, radio];
|
||||
test.each(inputButtonComponents.map((x) => [x.name, x]))(
|
||||
"%s - should return input type checkbox if isMultiSelect is true",
|
||||
async (name, inputButtonComponent) => {
|
||||
// Act
|
||||
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
|
||||
component: inputButtonComponent,
|
||||
mockData: {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
test.todo(
|
||||
"focus and click enter on a radio button => inputButtonClicked is emitted with correct value"
|
||||
);
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().type).toEqual("checkbox");
|
||||
}
|
||||
);
|
||||
|
||||
test.todo(
|
||||
"focus and click enter on a radio button that is already selected => inputButtonClicked is emitted with correct value"
|
||||
test.each(inputButtonComponents.map((x) => [x.name, x]))(
|
||||
"%s - return input type radio if isMultiSelect is false or not specified",
|
||||
async (name, inputButtonComponent) => {
|
||||
// Act
|
||||
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
|
||||
component: inputButtonComponent,
|
||||
mockData: {
|
||||
propsData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
}
|
||||
);
|
||||
|
||||
const selectedValues = ["something", ["test"]];
|
||||
inputButtonComponents.forEach((inputButtonComponent) => {
|
||||
test.each(selectedValues)(
|
||||
`${inputButtonComponent.name} with selectedValue %s - should emit button value on click`,
|
||||
async (selectedValue) => {
|
||||
// Act
|
||||
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
|
||||
component: inputButtonComponent,
|
||||
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);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocksForComponentsUsingInputButtonWrapperMixin({ mockData, component }) {
|
||||
const wrapper = mount(component, {
|
||||
...mockData,
|
||||
propsData: {
|
||||
...mockData.propsData,
|
||||
groupName: "my-group",
|
||||
modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
|
||||
value: "4",
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
});
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
||||
function setupBaseInputButtonWrapper({ mockData = {} }) {
|
||||
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,139 @@
|
|||
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,
|
||||
},
|
||||
},
|
||||
});
|
||||
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("checkbox");
|
||||
// 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!");
|
||||
});
|
||||
});
|
||||
|
||||
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");
|
||||
});
|
||||
|
||||
// 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,304 @@
|
|||
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
|
||||
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 };
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue