adding prop
This commit is contained in:
Sneha
parent
591f512fde
commit
ba04a08c07
4 changed files with 14 additions and 269 deletions
|
|
@ -16,9 +16,13 @@
|
||||||
:disabled="isDisabled"
|
:disabled="isDisabled"
|
||||||
:aria-required="isRequired"
|
:aria-required="isRequired"
|
||||||
:validationRules="validationRules"
|
:validationRules="validationRules"
|
||||||
:placeHolderText="placeHolderText">
|
:placeHolderText="placeHolderText"
|
||||||
|
:valueAsKey="valueAsKey">
|
||||||
<option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
|
<option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
|
||||||
<option v-for="(value, name, index) in options" :value="name" :key="index">
|
<option
|
||||||
|
v-for="(value, name, index) in options"
|
||||||
|
:value="valueAsKey == true ? value : name"
|
||||||
|
:key="valueAsKey == true ? value : index">
|
||||||
{{ value }}
|
{{ value }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
@ -47,6 +51,11 @@ export default {
|
||||||
placeHolderText: String,
|
placeHolderText: String,
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
hasError: Boolean,
|
hasError: Boolean,
|
||||||
|
valueAsKey: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const uuid = uuidv4();
|
const uuid = uuidv4();
|
||||||
|
|
|
||||||
|
|
@ -1,117 +0,0 @@
|
||||||
import { shallowMount } from "@vue/test-utils";
|
|
||||||
import dropdownVehicle from "./dropdown-vehicle";
|
|
||||||
|
|
||||||
// Mock CMS content
|
|
||||||
const questionText = "Question Text";
|
|
||||||
const mockMixin = {
|
|
||||||
methods: {
|
|
||||||
getCmsContent: jest.fn().mockImplementation(() => {
|
|
||||||
return questionText;
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
|
|
||||||
// It is not being used.
|
|
||||||
describe("dropdownVehicle.vue", () => {
|
|
||||||
it("Should render a select input", async () => {
|
|
||||||
// Arrange
|
|
||||||
const wrapper = shallowMount(dropdownVehicle, {
|
|
||||||
propsData: {
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
mixins: [mockMixin],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Act
|
|
||||||
const select = wrapper.find("select");
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(select.exists()).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should render the 'questionText' data value as the label text.", async () => {
|
|
||||||
// Arrange
|
|
||||||
const wrapper = shallowMount(dropdownVehicle, {
|
|
||||||
propsData: {
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
mixins: [mockMixin],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Act
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(label.text()).toContain(questionText);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
|
|
||||||
// Arrange
|
|
||||||
const wrapper = shallowMount(dropdownVehicle, {
|
|
||||||
propsData: {
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
mixins: [mockMixin],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Act
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(label.attributes("aria-label")).toContain(questionText);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should return aria-disabled state as disabled", async () => {
|
|
||||||
// Arrange
|
|
||||||
const wrapper = shallowMount(dropdownVehicle, {
|
|
||||||
propsData: {
|
|
||||||
options: {},
|
|
||||||
isDisabled: true,
|
|
||||||
},
|
|
||||||
mixins: [mockMixin],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Act
|
|
||||||
const select = wrapper.find("select");
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(select.attributes("aria-disabled")).toEqual("true");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should emit new value when modelValue is changed", async () => {
|
|
||||||
// Arrange
|
|
||||||
const wrapper = shallowMount(dropdownVehicle, {
|
|
||||||
propsData: {
|
|
||||||
options: {},
|
|
||||||
modelValue: "val",
|
|
||||||
},
|
|
||||||
mixins: [mockMixin],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Act
|
|
||||||
await wrapper.find("select").setValue("val2");
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(wrapper.emitted()).toHaveProperty("change");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should call this.handleChange with new value when selectedOption is changed", async () => {
|
|
||||||
// Arrange
|
|
||||||
const wrapper = shallowMount(dropdownVehicle, {
|
|
||||||
propsData: {
|
|
||||||
options: {},
|
|
||||||
modelValue: "0",
|
|
||||||
},
|
|
||||||
mixins: [mockMixin],
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
|
|
||||||
|
|
||||||
// Act
|
|
||||||
wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(wrapper.vm.handleChange).toHaveBeenCalled;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="dropdown-question"
|
|
||||||
:class="(errors && errors.length) || hasError ? 'has-error' : ''">
|
|
||||||
<label
|
|
||||||
:for="dropdownId"
|
|
||||||
:aria-label="questionText"
|
|
||||||
class="form-label"
|
|
||||||
v-html="questionText"></label>
|
|
||||||
<select
|
|
||||||
v-model="selectedOption"
|
|
||||||
class="form-select"
|
|
||||||
:id="dropdownId"
|
|
||||||
:name="dropdownId"
|
|
||||||
:aria-disabled="isDisabled"
|
|
||||||
:disabled="isDisabled"
|
|
||||||
:aria-required="isRequired"
|
|
||||||
:validationRules="validationRules"
|
|
||||||
:placeHolderText="placeHolderText">
|
|
||||||
<option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
|
|
||||||
<option v-for="value in options" :value="value" :key="value">
|
|
||||||
{{ value }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<div v-show="errorMessage" class="row mt-2 form-test-error">
|
|
||||||
<span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { useField } from "vee-validate";
|
|
||||||
import { v4 as uuidv4 } from "uuid";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "dropdown-vehicle",
|
|
||||||
props: {
|
|
||||||
customDropdownId: String,
|
|
||||||
options: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
modelValue: String,
|
|
||||||
isDisabled: Boolean,
|
|
||||||
isRequired: Boolean,
|
|
||||||
validationRules: String,
|
|
||||||
placeHolderText: String,
|
|
||||||
cmsWidgetName: String,
|
|
||||||
hasError: Boolean,
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const uuid = uuidv4();
|
|
||||||
const dropdownId = !props.customDropdownId ? `dropdown-${uuid}` : props.customDropdownId;
|
|
||||||
|
|
||||||
const propsClone = Object.assign({}, props);
|
|
||||||
const modelValue = propsClone.modelValue;
|
|
||||||
let initialValue;
|
|
||||||
|
|
||||||
switch (typeof modelValue) {
|
|
||||||
case "number":
|
|
||||||
initialValue = modelValue;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fieldOptions = {
|
|
||||||
type: "select",
|
|
||||||
value: props.modelValue,
|
|
||||||
initialValue: initialValue,
|
|
||||||
};
|
|
||||||
|
|
||||||
const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
|
|
||||||
dropdownId,
|
|
||||||
props.validationRules,
|
|
||||||
fieldOptions
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
dropdownId,
|
|
||||||
errorMessage,
|
|
||||||
handleBlur,
|
|
||||||
handleChange,
|
|
||||||
meta,
|
|
||||||
errors,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$emit("dropdownQuestionEvent.inputIdAssigned", this.inputId);
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
questionText() {
|
|
||||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
|
||||||
},
|
|
||||||
selectedOption: {
|
|
||||||
get: function () {
|
|
||||||
return !this.modelValue ? "" : this.modelValue;
|
|
||||||
},
|
|
||||||
set: function (newValue) {
|
|
||||||
this.$emit("update:modelValue", newValue);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
selectedOption(newValue) {
|
|
||||||
this.handleChange(newValue);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.dropdown-question {
|
|
||||||
label {
|
|
||||||
color: $black;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.form-label {
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
.form-select {
|
|
||||||
color: $gray-600;
|
|
||||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
min-height: 3rem;
|
|
||||||
&:focus,
|
|
||||||
&:focus-visible {
|
|
||||||
box-shadow: 0 0 0 2.5px $blue;
|
|
||||||
}
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
background-color: $gray-100;
|
|
||||||
filter: grayscale(100%);
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 0 0 4px transparent;
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
box-shadow: 0 0 0 4px $blue-300;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<dropdownVehicle disableAutoFill v-model="selectedValue" />
|
<dropdownQuestion disableAutoFill v-model="selectedValue" :valueAsKey="true" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import dropdownVehicle from "@/digital-components/dropdown-vehicle/dropdown-vehicle";
|
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "vehicle-question",
|
name: "vehicle-question",
|
||||||
|
|
@ -13,7 +13,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
dropdownVehicle,
|
dropdownQuestion,
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue