commit
This commit is contained in:
Kulbhushan Kaushik
parent
79f81fab57
commit
64e08af52b
7 changed files with 1833 additions and 0 deletions
|
|
@ -0,0 +1,264 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import listButtonHorizontal from "./list-button-horizontal";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
describe("list-button-horizontal.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
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 = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
});
|
||||
|
||||
it("Should return primary label text (buttonID)", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
buttonID: "List Card Checkbox",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
|
||||
expect(label.attributes().for).toEqual("List Card Checkbox");
|
||||
});
|
||||
|
||||
it("Should return screen reader text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
screenReaderOnlyText: "Screen Reader Only Text",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("span.sr-only");
|
||||
|
||||
expect(paragraph.text()).toEqual("Screen Reader Only Text");
|
||||
});
|
||||
|
||||
it("Should return text alignment class", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
textPosition: "text-center",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("span.m-0");
|
||||
|
||||
expect(paragraph.attributes("class")).toContain("text-center");
|
||||
});
|
||||
|
||||
it("Should return aria-required state", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
isRequired: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
});
|
||||
|
||||
it("Should return loader enabled true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
});
|
||||
|
||||
it("Should return loader position", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should emit button value on click", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
value: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
modelValue: ["List Card Checkbox"],
|
||||
},
|
||||
});
|
||||
wrapper.vm.handleCheckChange();
|
||||
// Assert
|
||||
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: false}]);
|
||||
});
|
||||
|
||||
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
modelValue: ["List Card Checkbox"],
|
||||
isMultiSelect: false,
|
||||
value: "Car-Front",
|
||||
selectedValues: ["Car-Front"]
|
||||
},
|
||||
});
|
||||
// Assert
|
||||
expect(wrapper.vm.checkValue).toEqual(true);
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleInputChange();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
});
|
||||
|
||||
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleKeyupArrow();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleKeyupArrow();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
<template>
|
||||
<div
|
||||
class="list-group list-button-horizontal d-flex flex-column w-100"
|
||||
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
|
||||
@keyup.space="triggerButton()"
|
||||
@keyup.up="handleKeyupArrow()"
|
||||
@keyup.down="handleKeyupArrow()"
|
||||
@keyup.left="handleKeyupArrow()"
|
||||
@keyup.right="handleKeyupArrow()"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:aria-required="isRequired"
|
||||
v-model="checkValue"
|
||||
:checked="checkValue"
|
||||
@change="handleInputChange()"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-label="buttonLabel"
|
||||
class="d-flex flex-column justify-content-center py-3 px-4"
|
||||
@mouseup="triggerButton()"
|
||||
>
|
||||
<span
|
||||
class="m-0"
|
||||
:class="textPosition"
|
||||
>
|
||||
{{buttonLabel}}
|
||||
</span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
<loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
import { toRef } from "vue";
|
||||
|
||||
export default {
|
||||
name: "listButtonHorizontal",
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
buttonID: String,
|
||||
buttonLabel: String,
|
||||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
textPosition: String,
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
isRequired: Boolean,
|
||||
isCashOrInsurance: Boolean,
|
||||
value: {
|
||||
// Field initial value
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
validationRules: String,
|
||||
selectedValues: [Array, String],
|
||||
hasError: Boolean,
|
||||
valueToLogType: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaderDisplayed: false,
|
||||
checkValue: Boolean,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (Array.isArray(this.selectedValues)) {
|
||||
this.checkValue = this.isMultiSelect
|
||||
? this.selectedValues.includes(this.value)
|
||||
: this.selectedValues[0] == this.value;
|
||||
}
|
||||
else {
|
||||
this.checkValue = this.selectedValues === this.value;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isValueSelectedByArray(arr) {
|
||||
return this.isMultiSelect
|
||||
? arr.includes(this.value)
|
||||
: arr[0];
|
||||
},
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleInputChange() {
|
||||
if (!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
handleKeyupArrow() {
|
||||
if (this.isMultiSelect) {
|
||||
return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
}
|
||||
|
||||
if (!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
triggerButton() {
|
||||
if (this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
}
|
||||
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
|
||||
value: this.value,
|
||||
buttonId: this.buttonID && this.buttonID.toString(),
|
||||
};
|
||||
|
||||
this.handleChange(this.value);
|
||||
this.$emit("isCheckedChanged", emitEvent);
|
||||
this.$emit("update:modelValue", emitEvent);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
const fieldOptions = {
|
||||
type: inputType,
|
||||
checkedValue: props.value,
|
||||
potentialInitialValue: props.selectedValues,
|
||||
};
|
||||
|
||||
// Set initialValue for validation setup if pre-selected
|
||||
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
|
||||
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
|
||||
}
|
||||
|
||||
const {
|
||||
handleChange,
|
||||
errors,
|
||||
value
|
||||
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
|
||||
|
||||
const validateValue = value;
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
validateValue,
|
||||
fieldOptions, // only need to expose this for unit test purposes
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-button-horizontal {
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
|
||||
&:focus-visible+label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus+label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:checked+label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
outline: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:checked:focus+label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
|
||||
&:checked+label p:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
outline: none;
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
color: $gray-600;
|
||||
|
||||
&:hover {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
cursor: pointer;
|
||||
z-index: 4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
+p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Cash/Insurance option radio button styling
|
||||
&.radio-fancy {
|
||||
label {
|
||||
border: 1px solid $blue-700;
|
||||
z-index: 2;
|
||||
color: $blue;
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
label:hover {
|
||||
background-color: $blue-700;
|
||||
color: $white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
|
||||
&:focus-visible+label {
|
||||
border-radius: 0.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus+label {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:checked+label {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
color: $white;
|
||||
background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
|
||||
border-radius: 0.5rem;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&:checked:focus+label {
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
||||
}
|
||||
|
||||
&:checked+label p:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.list-button-horizontal {
|
||||
height: 100%;
|
||||
label {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
&:first-of-type {
|
||||
.list-button-horizontal {
|
||||
label {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.list-button-horizontal {
|
||||
label {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Cash/insurance styling
|
||||
&:first-of-type {
|
||||
.list-button-horizontal.radio-fancy {
|
||||
input[type="radio"] {
|
||||
&:checked+label {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&:checked:focus+label {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.list-button-horizontal.radio-fancy {
|
||||
input[type="radio"] {
|
||||
&:checked+label {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&:checked:focus+label {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import listButton from "./list-button";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
describe("list-button.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
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 = shallowMount(listButton, {
|
||||
propsData: {
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
});
|
||||
|
||||
it("Should return primary label text (buttonID)", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
buttonID: "List Card Checkbox",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
|
||||
expect(label.attributes().for).toEqual("List Card Checkbox");
|
||||
});
|
||||
|
||||
it("Should return screen reader text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
screenReaderOnlyText: "Screen Reader Only Text",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("span.sr-only");
|
||||
|
||||
expect(paragraph.text()).toEqual("Screen Reader Only Text");
|
||||
});
|
||||
|
||||
it("Should return text alignment class", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
textPosition: "text-center",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("span.m-0");
|
||||
|
||||
expect(paragraph.attributes("class")).toContain("text-center");
|
||||
});
|
||||
|
||||
it("Should return aria-required state", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
isRequired: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
});
|
||||
|
||||
it("Should return loader enabled true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.triggerButton();
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
});
|
||||
|
||||
it("Should return loader position", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should emit button value on click", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
value: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
modelValue: ["List Card Checkbox"],
|
||||
buttonID: 'list-card-id'
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.handleCheckChange();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: false, buttonId: 'list-card-id'}]);
|
||||
|
||||
});
|
||||
|
||||
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
modelValue: ["List Card Checkbox"],
|
||||
selectedValues: "Car-Front"
|
||||
},
|
||||
});
|
||||
// Assert
|
||||
expect(wrapper.componentVM.checkValue).toEqual(false);
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleInputChange();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
});
|
||||
|
||||
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleKeyupArrow();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleKeyupArrow();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
});
|
||||
|
||||
});
|
||||
241
src/ux-components/list-button/list-button.vue
Normal file
241
src/ux-components/list-button/list-button.vue
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<div
|
||||
class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
|
||||
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
|
||||
@keyup.space="triggerButton"
|
||||
@keyup.enter="triggerButton"
|
||||
@keyup.up="handleKeyupArrow"
|
||||
@keyup.down="handleKeyupArrow"
|
||||
@keyup.left="handleKeyupArrow"
|
||||
@keyup.right="handleKeyupArrow">
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="value"
|
||||
:aria-required="isRequired"
|
||||
v-model="checkValue"
|
||||
:checked="checkValue"
|
||||
@change="handleInputChange"
|
||||
>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-label="buttonLabel"
|
||||
class="d-flex flex-column justify-content-center py-3 px-4"
|
||||
@mouseup="triggerButton"
|
||||
>
|
||||
<span
|
||||
class="m-0"
|
||||
:class="textPosition"
|
||||
>
|
||||
{{ buttonLabel }}
|
||||
</span>
|
||||
<span
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="m-0 small"
|
||||
:class="textPosition"
|
||||
>
|
||||
{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
class="sr-only"
|
||||
>
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed && selectingInitiatesLoad"
|
||||
:class="[this.loaderColor, this.loaderPosition]"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import { toRef } from "vue";
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
|
||||
export default {
|
||||
name: "listButton",
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
buttonLabel: [Number, String],
|
||||
buttonID: [Number, String],
|
||||
isRequired: Boolean,
|
||||
textPosition: String,
|
||||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
value: {
|
||||
// Field initial value
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
|
||||
validationRules: String,
|
||||
selectedValues: [Array, String],
|
||||
hasError: Boolean,
|
||||
valueToLogType: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaderDisplayed: false,
|
||||
checkValue: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (Array.isArray(this.validateValue)) {
|
||||
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
|
||||
|
||||
if (this.checkValue != isSelectedByValidator) {
|
||||
this.handleChange(this.value);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.checkValue = this.selectedValues == this.value;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isValueSelectedByArray(arr) {
|
||||
return this.isMultiSelect
|
||||
? arr.includes(this.value)
|
||||
: arr[0];
|
||||
},
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleInputChange() {
|
||||
if(!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
handleKeyupArrow() {
|
||||
if (this.isMultiSelect) {
|
||||
return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
}
|
||||
},
|
||||
triggerButton() {
|
||||
if(this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
|
||||
value: this.value.toString(),
|
||||
buttonId: this.buttonID && this.buttonID.toString(),
|
||||
};
|
||||
|
||||
this.handleChange(this.value);
|
||||
this.$emit("isCheckedChanged", emitEvent);
|
||||
this.$emit("update:modelValue", emitEvent);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
const fieldOptions = {
|
||||
type: inputType,
|
||||
checkedValue: props.value,
|
||||
potentialInitialValue: props.selectedValues,
|
||||
};
|
||||
|
||||
// Set initialValue for validation setup if pre-selected
|
||||
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
|
||||
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
|
||||
}
|
||||
|
||||
const {
|
||||
handleChange,
|
||||
errors,
|
||||
value
|
||||
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
|
||||
|
||||
const validateValue = value;
|
||||
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
validateValue,
|
||||
fieldOptions, // only need to expose this for unit test purposes
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-group {
|
||||
&.list-button {
|
||||
outline: none;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: static; //override bootstrap
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus-visible + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + label {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
&:checked:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + label p,
|
||||
&:checked + label span {
|
||||
font-weight: 500;
|
||||
}
|
||||
&:checked + label span:nth-child(2) {
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
color: $gray-600;
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
|
||||
span {
|
||||
&.small {
|
||||
font-size: .75rem;
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
+ p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import listCard from "./list-card";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
describe("list-card.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "checkbox-demo-1",
|
||||
groupName: "Checkbox 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().type).toEqual("checkbox");
|
||||
});
|
||||
|
||||
it("Should return primary label text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("p");
|
||||
expect(paragraph.text()).toEqual("Windshield");
|
||||
});
|
||||
|
||||
it("Should return secondary (sub) label text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("p:nth-of-type(2)");
|
||||
expect(paragraph.text()).toEqual("Test");
|
||||
});
|
||||
|
||||
it("Should return value used for various text settings including the label 'for' and input id", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.attributes().for).toEqual("List Card Checkbox");
|
||||
});
|
||||
|
||||
it("Should return input group name used for radio or checkbox", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes().name).toEqual("radio 1");
|
||||
});
|
||||
|
||||
it("Should return aria-required state", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
});
|
||||
|
||||
it("Should return flex row classes if isWide is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: true,
|
||||
buttonLabelSubCopy: "",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4"]);
|
||||
});
|
||||
|
||||
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: true,
|
||||
buttonLabelSubCopy: "Button Subcopy",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4", "checkboxTop"]);
|
||||
});
|
||||
|
||||
it("Should return flex column classes if isWide is false", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
|
||||
});
|
||||
|
||||
it("Should emit button value on click", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
value: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
buttonID: 'list-card-id',
|
||||
selectedValues: "List Card Checkbox"
|
||||
},
|
||||
});
|
||||
wrapper.vm.handleCheckChange();
|
||||
// Assert
|
||||
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, buttonId: 'list-card-id'}]);
|
||||
});
|
||||
|
||||
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
value: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
selectedValues: "Car-Front"
|
||||
},
|
||||
});
|
||||
// Assert
|
||||
expect(wrapper.componentVM.checkValue).toEqual(false);
|
||||
});
|
||||
|
||||
it("Should set an initial value for validation if selectedValues include the value", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
value: "Windshield",
|
||||
groupName: "radio 1",
|
||||
selectedValues: ["Windshield"],
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]);
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleInputChange();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
});
|
||||
|
||||
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleKeyupArrow();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
isMultiSelect: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.handleKeyupArrow();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
});
|
||||
|
||||
it("Should run handleChange if triggerButton is triggered", async () => {
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleChange).toBeCalled;
|
||||
expect(wrapper.vm.handleCheckChange).not.toBeCalled;
|
||||
expect(wrapper.vm.displayLoader).not.toBeCalled;
|
||||
});
|
||||
|
||||
it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { issPage: 'page-name' } },
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
wrapper.vm.triggerButton();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.handleCheckChange).toBeCalled;
|
||||
expect(wrapper.vm.displayLoader).toBeCalled;
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,399 @@
|
|||
<template>
|
||||
<div :class="{'h-100': !isWide}">
|
||||
<div
|
||||
class="list-card w-100 rounded-3 d-flex align-items-center"
|
||||
:class="[
|
||||
'h-100',
|
||||
isWide ? 'horizontal' : '',
|
||||
(errors.length > 0 || hasError) ? 'has-error' : '',
|
||||
]"
|
||||
@keyup.space="triggerButton"
|
||||
@keyup.up="handleKeyupArrow"
|
||||
@keyup.down="handleKeyupArrow"
|
||||
@keyup.left="handleKeyupArrow"
|
||||
@keyup.right="handleKeyupArrow"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="value"
|
||||
:aria-required="isRequired"
|
||||
v-model="checkValue"
|
||||
:checked="checkValue"
|
||||
@change="handleInputChange"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-label="buttonLabel"
|
||||
class="d-flex w-100 align-items-center px-2 h-100"
|
||||
:class="getLabelClasses"
|
||||
@mouseup="triggerButton"
|
||||
>
|
||||
<img
|
||||
:id="buttonImageId"
|
||||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
:src="buttonImage"
|
||||
:alt="altText"
|
||||
/>
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
|
||||
>
|
||||
{{ buttonLabel }}
|
||||
</p>
|
||||
<p
|
||||
v-if="buttonLabelSubCopy && !isWide"
|
||||
class="fs-7 m-0 order-4 sub-copy"
|
||||
>
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
<div v-if="isWide" class="order-2">
|
||||
<p class="m-0 small">{{ buttonLabel }}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import { toRef } from "vue";
|
||||
|
||||
export default {
|
||||
name: "listCard",
|
||||
props: {
|
||||
isMultiSelect: Boolean, //Defines use as checkbox
|
||||
isWide: Boolean,
|
||||
buttonImage: String, //Required: File name of image
|
||||
buttonImageId: String,
|
||||
buttonLabel: String, //Required: Label text
|
||||
isRequired: Boolean, //Required: is aria-required required or not?
|
||||
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
|
||||
buttonID: String, //Required: Unique
|
||||
groupName: String, //Rquired: Unique
|
||||
buttonLabelSubCopy: String, //Optional: sub text
|
||||
value: {
|
||||
// Field initial value
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
colLength: String,
|
||||
validationRules: String,
|
||||
selectedValues: [Array, String],
|
||||
hasError: Boolean,
|
||||
valueToLogType: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkValue: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (Array.isArray(this.validateValue)) {
|
||||
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
|
||||
|
||||
if (this.checkValue != isSelectedByValidator) {
|
||||
this.handleChange(this.value);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.checkValue = this.selectedValues == this.value;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
if (this.isWide) {
|
||||
let classes = "flex-row py-2 ps-4 pe-4";
|
||||
if (this.buttonLabelSubCopy) {
|
||||
classes += " checkboxTop";
|
||||
}
|
||||
return classes;
|
||||
} else {
|
||||
return "flex-column pt-4 pb-3";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isValueSelectedByArray(arr) {
|
||||
return this.isMultiSelect
|
||||
? arr.includes(this.value)
|
||||
: arr[0];
|
||||
},
|
||||
handleInputChange() {
|
||||
if(!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
handleKeyupArrow() {
|
||||
if (this.isMultiSelect) {
|
||||
return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
}
|
||||
|
||||
if(!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
triggerButton() {
|
||||
if(this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
}
|
||||
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
|
||||
value: this.value.toString(),
|
||||
buttonId: this.buttonID && this.buttonID.toString(),
|
||||
};
|
||||
|
||||
this.handleChange(this.value);
|
||||
this.$emit("isCheckedChanged", emitEvent);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// Changing this will impact pre-selection data loads on vehicle-parts.
|
||||
// If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
|
||||
selectedValues(newVal) {
|
||||
if (typeof newVal === "string") {
|
||||
this.checkValue = newVal == this.value;
|
||||
}
|
||||
else if (newVal !== undefined) {
|
||||
this.checkValue = newVal.value;
|
||||
}
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
const fieldOptions = {
|
||||
type: inputType,
|
||||
checkedValue: props.value, // EX: "Single" or "Passenger"
|
||||
potentialInitialValue: props.selectedValues,
|
||||
};
|
||||
|
||||
// Set initialValue for validation setup if pre-selected
|
||||
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
|
||||
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
|
||||
}
|
||||
|
||||
const {
|
||||
handleChange,
|
||||
errors,
|
||||
value
|
||||
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
|
||||
|
||||
// First land on the blank, unselected page, no handleChange
|
||||
// Land on page with initial values, handleChange
|
||||
const validateValue = value;
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
validateValue,
|
||||
fieldOptions, // only need to expose this for unit test purposes
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
|
||||
&.invalid {
|
||||
//Red border if invalid
|
||||
border: 1px solid $red;
|
||||
}
|
||||
|
||||
img {
|
||||
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
|
||||
height: auto;
|
||||
width: 6.5rem;
|
||||
margin-bottom: 2.2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0px 0px 0px 4px $blue-300;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
|
||||
position: absolute;
|
||||
|
||||
+ label {
|
||||
outline: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: center;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:focus-visible + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + label {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 3rem 0 0 0;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
+ label.checkboxTop::before {
|
||||
margin: -1.25rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
+ label.checkboxTop::after {
|
||||
margin: -1.5rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
&:checked + label::before {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 3.2rem 0 0 0;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 11px;
|
||||
transform: rotate(-45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ label {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 0.5rem 0 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
content: "";
|
||||
margin: -0.15rem 0 0 0;
|
||||
left: 1.175rem;
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
+ label {
|
||||
outline: none;
|
||||
min-height: 48px;
|
||||
color: $gray-600;
|
||||
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: left;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in a new issue