jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/CSR-78

Browse source
This commit is contained in:
CarlNation 2022-02-04 16:10:35 -05:00
commit 51bd0188c5
27 changed files with 370 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/common-components/button-question/button-question.spec.js
View file

@ -1,5 +1,6 @@
import { shallowMount } from "@vue/test-utils";
import buttonQuestion from "@/common-components/button-question/button-question";
import { nextTick } from "vue";
describe("buttonQuestion.vue", () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
@ -41,44 +42,32 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Should trigger event modelValue change on select", async () => {
it("Should trigger event modelValue change to new value on when radio button selected", async () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setData({
modelValueAnswers: ["Windshield"],
chosenAnswer: "Windshield"
await wrapper.setProps({
answers: ["2022", "2021", "2020"],
isMultiSelect: false
});
wrapper.setValue({ answer: wrapper.vm.chosenAnswer });
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]);
});
});
describe("buttonQuestion.vue", () => {
it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setData({
modelValueAnswers: ["Windshield", "BackDoor"]
});
wrapper.vm.handleCheckedChanged(true);
// Assert
expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object');
});
});
describe("buttonQuestion.vue", () => {
it("Should not trigger event modelValue change on select if checked is false", async () => {
// Act
const wrapper = shallowMount(buttonQuestion);
wrapper.setData({
modelValueAnswers: ["Front-door"]
})
const val = {isChecked : false, buttonId: "Front-door"}
const val = {isChecked: true, buttonId: "2021", }
wrapper.vm.handleCheckedChanged(val);
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]);
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
});
});
describe("buttonQuestion.vue", () => {
it("Should add values to array on checkbox click", async () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
modelValue: ["2022", "2021", "2020"],
isMultiSelect: true
});
const val = {isChecked: true, buttonId: "2019", }
wrapper.vm.handleCheckedChanged(val);
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
});
});

32
src/common-components/button-question/button-question.vue
View file

@ -30,7 +30,7 @@
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="this.answers.length < 3 ? '' : '-4'"
v-model="modelValue"
:selectedButtonIDs="selectedValues"
data-test="button"
/>
</div>
@ -98,24 +98,32 @@ export default {
}
return classes;
},
},
data(){
return {
modelValueAnswers: [],
}
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
mounted(){
if(Array.isArray(this.answers) && this.answers.length === 1) {
this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
this.$emit("update:modelValue", this.modelValueAnswers);
const newSelectedValues = this.selectedValues;
newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
this.selectedValues = newSelectedValues;
}
},
methods: {
handleCheckedChanged(val) {
// Add or remove item to array of data to emit
val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined;
this.$emit("update:modelValue", answersToEmit);
if(this.isMultiSelect) {
// Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues;
val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
this.selectedValues = newSelectedValues;
} else {
this.selectedValues = [val.buttonId]
}
},
},
components: {

45
src/common-components/funnel-footer/funnel-footer.spec.js
View file

@ -5,9 +5,17 @@ describe("funnel-footer.vue", () => {
it("Should return footer-link class", async () => {
// Act
try {
const r = {
test:"testing",
clientHeight: 10,
classList: {
add: jest.fn(() => ''),
remove: jest.fn()
},
};
global.document.getElementById = jest.fn().mockImplementation(()=> {
return {}
return r;
});
const wrapper = mount(funnelFooter, {
@ -22,9 +30,8 @@ describe("funnel-footer.vue", () => {
// Expect
expect(link.attributes('class')).toContain("footer-link");
expect(global.document.getElementById).toBeCalled();
} catch(error) {
console.log(error);
}
expect(r.classList.add).toBeCalledWith("justify-content-end");
expect(r.classList.remove).toBeCalledWith("justify-content-start");
});
@ -57,4 +64,32 @@ describe("funnel-footer.vue", () => {
expect(input.attributes("class")).toContain("btn-primary");
});
it("Should return class justify-content-end if paddingHeight < 80px", async () => {
global.document.getElementById = jest.fn().mockImplementation(()=> {
return {
test:"testing",
clientHeight: 10,
classList: {
add: jest.fn(),
remove: jest.fn()
}
}
});
// Act
const wrapper = mount(funnelFooter, {
propsData: {
footer: true
},
});
const infoBox = document.getElementById('infoBox');
// Assert
const stacked = wrapper.find("#stacked");
wrapper.vm.paddingHeight = 100;
// Expect
expect(stacked.attributes('class')).toContain("justify-content-end");
});
});

31
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -26,15 +26,16 @@
</div>
</div>
<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
<div class="row">
<div class="col">
<div class="row d-flex flex-row-reverse align-items-center">
<div class="col d-flex justify-content-end" id="stacked">
<buttonMain
isPrimary
buttonText="Review Appointment Details"
buttonText="Button test"
loaderColor="white"
sizeInRem="1"
isFloat
/>
</div>
<div class="col">
<textLink
navigation=true
text="back"
@ -68,6 +69,7 @@ export default {
setTimeout(function(){ // Give it a moment to set the date
document.getElementById('years').innerHTML += new Date().getFullYear();
}, 100);
this.checkHeight();
},
beforeUnmount() {
window.removeEventListener('resize', this.onResize);
@ -75,7 +77,28 @@ export default {
methods: {
onResize() {
this.paddingHeight = document.getElementById("infoBox").offsetHeight;
this.checkHeight();
},
checkHeight() {
const parentHeight = document.getElementById('infoBox').clientHeight;
const wrapper2 = document.getElementById('stacked');
console.log(parentHeight);
console.log(wrapper2);
if (parentHeight > 80) {
wrapper2.classList.add("justify-content-start");
wrapper2.classList.remove("justify-content-end");
} else {
wrapper2.classList.add("justify-content-end");
wrapper2.classList.remove("justify-content-start");
}
}
}
};
</script>
<style lang="scss" scoped>
button {
min-width: 200px;
width: 100%;
}
</style>

20
src/layouts/component-test/component-test.vue
View file

@ -76,7 +76,7 @@
<div class="row g-2">
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 1"
@ -94,7 +94,7 @@
/>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 3"
@ -115,7 +115,7 @@
<legend class="sr-only">Functioning as Checkbox</legend>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox"
@ -132,7 +132,7 @@
<legend class="sr-only">Checkbox no Description</legend>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox b"
@ -149,7 +149,7 @@
<legend class="sr-only">Functioning as Radio Button</legend>
<listCard
isRadio
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button"
@ -166,7 +166,7 @@
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isRadio
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button b"
@ -184,7 +184,7 @@
<listCard
isMultiSelect
isWide
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Checkbox"
@ -219,7 +219,7 @@
<legend class="sr-only">Horizontal Radio Button</legend>
<listCard
isWide
buttonImage="back-glass-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Rear Window"
altText=""
buttonID="List Card Horizontal Radio Button"
@ -236,7 +236,7 @@
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isWide
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Radio Button b"
@ -948,7 +948,6 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import checkbox from "@/ux-components/checkbox/checkbox";
import buttonQuestion from "@/common-components/button-question/button-question";
import textLink from "@/ux-components/text-link/text-link";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
export default {
@ -963,7 +962,6 @@ export default {
listButtonHorizontal,
checkbox,
funnelHeader,
buttonQuestion,
textLink,
funnelFooter
},

2
src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
View file

@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
//Assert
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ])
});
});

25
src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
View file

@ -3,11 +3,11 @@
<buttonQuestion
v-if="answersToDisplay.length > 1"
:questionText="questionText"
:isMultiSelect="isMultiSelect"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="modelValue"
v-model="selectedValues"
/>
</div>
</template>
@ -23,27 +23,33 @@ export default ({
questionText: String,
answersFromCms: Array,
damageOptions: Object,
groupName: String,
}
},
props: {
isMultiSelect: Boolean,
modelValue: Array,
groupName: String,
},
methods: {
initializeComponent(cmsContent, damageOptions, groupName){
this.groupName = groupName;
initializeComponent(cmsContent, damageOptions){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.damageOptions = damageOptions;
}
},
computed: {
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
damageOptionsMap(){
return {
Windshield: true,
SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOption ? true : false,
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
}
},
answersToDisplay(){
@ -56,11 +62,6 @@ export default ({
: [];
},
},
watch: {
modelValue(val) {
this.$emit("update:modelValue", val);
}
},
components: {
buttonQuestion,
}

23
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -4,11 +4,11 @@
<buttonQuestion
v-if="isAvailable && answersToDisplay.length > 1"
:questionText="questionText"
:isMultiSelect="isMultiSelect"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="modelValue"
v-model="selectedValues"
/>
</div>
</transition>
@ -25,24 +25,30 @@ export default ({
questionText: String,
answersFromCms: Array,
replaceOptions: Array,
groupName: String,
}
},
props: {
isMultiSelect: Boolean,
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
groupName: String,
modelValue: Array,
},
methods: {
initializeComponent(cmsContent, replaceOptions, groupName){
this.groupName = groupName;
initializeComponent(cmsContent, replaceOptions){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.replaceOptions = replaceOptions;
}
},
computed: {
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
answersToDisplay(){
return Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
@ -53,11 +59,6 @@ export default ({
: [];
},
},
watch: {
modelValue(val) {
this.$emit("update:modelValue", val);
}
},
components: {
buttonQuestion,
}

13
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -3,8 +3,8 @@
<funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" :hasSubText=true />
<damageLocationQuestion ref="damageLocation" isMultiSelect v-model="damageLocationQuestionData" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect v-model="driverSideOptionsData" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
</div>
</template>
@ -60,19 +60,16 @@ export default {
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.driverSideOptions.initializeComponent(
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
);
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions, 'DamageLocationQuestion'
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
// for damageOptions and cms content data
//console.log(resultMap)
});
},
data(){
return {
damageLocationQuestionData: [],
selectedDamageLocations: [],
driverSideOptionsData: [],
}
},

21
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -7,7 +7,7 @@
groupName="Choose Vehicle Make"
textPosition="text-start"
:loaderEnabled="true"
v-model="modelValue"
v-model="selectedValueAsArray"
isRequired=true
/>
</template>
@ -28,7 +28,19 @@ export default {
};
},
props: {
modelValue: Array,
modelValue: String,
},
computed: {
selectedValueAsArray: {
get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
return modelValueAsArray;
},
set: function(newValue) {
const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
this.$emit("update:modelValue", newValueAsScalar);
}
}
},
components: {
buttonQuestion,
@ -45,10 +57,5 @@ export default {
this.makes = initialData;
},
},
watch: {
modelValue(val) {
this.$emit("update:modelValue", val);
},
},
};
</script>

2
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -33,7 +33,7 @@ export default {
name: "vehicle-make",
data() {
return {
selectedMake: [],
selectedMake: null,
};
},
computed: {},

21
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -7,7 +7,7 @@
groupName="Choose Vehicle Model"
textPosition="text-start"
:loaderEnabled="true"
v-model="modelValue"
v-model="selectedValueAsArray"
isRequired=true
/>
</template>
@ -28,7 +28,19 @@ export default {
};
},
props: {
modelValue: Array,
modelValue: String,
},
computed: {
selectedValueAsArray: {
get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
return modelValueAsArray;
},
set: function(newValue) {
const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
this.$emit("update:modelValue", newValueAsScalar);
}
}
},
components: {
buttonQuestion,
@ -45,10 +57,5 @@ export default {
this.models = initialData;
},
},
watch: {
modelValue(val) {
this.$emit("update:modelValue", val);
},
},
};
</script>

2
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -33,7 +33,7 @@ export default {
name: "vehicle-model",
data() {
return {
selectedModel: [],
selectedModel: null,
};
},
computed: {},

21
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -7,7 +7,7 @@
groupName="Choose Vehicle Style"
textPosition="text-start"
:loaderEnabled="true"
v-model="modelValue"
v-model="selectedValueAsArray"
isRequired=true
/>
</template>
@ -28,7 +28,19 @@ export default {
};
},
props: {
modelValue: Array,
modelValue: String,
},
computed: {
selectedValueAsArray: {
get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
return modelValueAsArray;
},
set: function(newValue) {
const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
this.$emit("update:modelValue", newValueAsScalar);
}
}
},
components: {
buttonQuestion,
@ -49,10 +61,5 @@ export default {
this.styles = initialData;
},
},
watch: {
modelValue(val) {
this.$emit("update:modelValue", val);
},
},
};
</script>

2
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -32,7 +32,7 @@ export default {
name: "vehicle-style",
data() {
return {
selectedStyle: [],
selectedStyle: null,
};
},
computed: {},

4
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -28,7 +28,7 @@ export default {
name: "vehicle-year",
data() {
return {
selectedYear: [],
selectedYear: null,
};
},
computed: {},
@ -73,7 +73,7 @@ export default {
watch: {
selectedYear(year) {
this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
this.$router.navigateAfterSave(
this.navigationScenarios.SELECTED_YEAR,

2
src/layouts/vehicle-year/year-question/year-question.spec.js
View file

@ -72,6 +72,7 @@ describe("year-question.vue", () => {
});
});
function setupMocks({
modelValueProp = "1900",
cmsQuestionText = "CMS text goes here",
@ -89,6 +90,7 @@ function setupMocks({
mountOptions.propsData = {
modelValue: modelValueProp,
};
const wrapper = shallowMount(yearQuestion, mountOptions);
//Mock CMS content

21
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -7,7 +7,7 @@
groupName="Choose Vehicle Year"
textPosition="text-start"
:loaderEnabled="true"
v-model="modelValue"
v-model="selectedValueAsArray"
isRequired=true
/>
</template>
@ -26,12 +26,24 @@ export default {
};
},
props: {
modelValue: Array,
modelValue: String,
},
emits: ['update:modelValue'],
components: {
buttonQuestion,
},
computed: {
selectedValueAsArray: {
get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
return modelValueAsArray;
},
set: function(newValue) {
const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
this.$emit("update:modelValue", newValueAsScalar);
}
}
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchNonBlockingStoreAction(
@ -44,10 +56,5 @@ export default {
this.years = initialData;
},
},
watch: {
modelValue(val) {
this.$emit("update:modelValue", val);
},
},
};
</script>

4
src/router/index.js
View file

@ -142,7 +142,7 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {},
} else if (matchingScenarioMap.destinationUrl !== undefined) {
navigateToUrl(matchingScenarioMap.destinationUrl);
}
};
}
// Get navigation map depending on the scenario and the current 'page' you're on.
function getNavigationMap(scenario, currentRoute) {
@ -156,7 +156,7 @@ function getNavigationMap(scenario, currentRoute) {
.map((m) => m.maps.filter((map) => map.scenario === scenario));
return matchedQueryValue[0][0];
};
}
//---------------------------------------------------------- Private Functions ----------------------------------------------------------

2
src/ux-components/button-main/button-main.vue
View file

@ -50,7 +50,7 @@ export default {
border-radius: $border-radius-lg;
color: $white;
transition: all 150ms linear;
white-space: nowrap;
justify-content: center;
&:hover {
background: linear-gradient(
270deg,

41
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -173,4 +173,45 @@ describe("list-button-horizontal.vue", () => {
expect(loader.attributes("style")).toContain("1rem");
});
it("Should emit button value on click", 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"],
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
});
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,
selectedButtonIDs: ["Car-Front"]
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
});
});

16
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -12,6 +12,7 @@
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="handleCheckChange"
/>
<label
tabindex="-1"
@ -69,7 +70,7 @@ export default {
type: String,
default: "",
},
modelValue: [Array, String],
selectedButtonIDs: [Array, String],
},
data() {
return {
@ -78,7 +79,9 @@ export default {
};
},
created(){
this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
if(this.selectedButtonIDs){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
}
},
methods: {
displayLoader() {
@ -90,10 +93,11 @@ export default {
}
this.handleChange(value);
},
},
watch: {
checkValue(){
this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
}
}
},
components: {

40
src/ux-components/list-button/list-button.spec.js
View file

@ -173,4 +173,44 @@ describe("list-button.vue", () => {
expect(loader.attributes("style")).toContain("1rem");
});
it("Should emit button value on click", 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"],
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
});
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"],
selectedButtonIDs: ["Car-Front"]
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
});
});

16
src/ux-components/list-button/list-button.vue
View file

@ -12,6 +12,7 @@
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="handleCheckChange"
>
<label
tabindex="-1"
@ -71,7 +72,7 @@ export default {
type: [String, Number],
default: "",
},
modelValue: [Array, String],
selectedButtonIDs: [Array, String],
},
data() {
return {
@ -80,7 +81,9 @@ export default {
};
},
created(){
this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
if(this.selectedButtonIDs){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
}
},
methods: {
displayLoader() {
@ -92,10 +95,11 @@ export default {
}
this.handleChange(value);
},
},
watch: {
checkValue(){
this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
}
}
},
components: {

41
src/ux-components/list-card/list-card.spec.js
View file

@ -191,4 +191,45 @@ describe("list-card.vue", () => {
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
});
it("Should emit button value on click", 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,
modelValue: ["List Card Checkbox"],
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", 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,
modelValue: ["List Card Checkbox"],
selectedButtonIDs: ["Car-Front"]
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
});
});

16
src/ux-components/list-card/list-card.vue
View file

@ -12,6 +12,7 @@
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="handleCheckChange"
/>
<label
:for="buttonID"
@ -70,7 +71,7 @@ export default {
default: "",
},
colLength: String,
modelValue: [Array, String],
selectedButtonIDs: [Array, String],
},
data(){
return {
@ -78,7 +79,9 @@ export default {
}
},
created(){
this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
if(this.selectedButtonIDs){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
}
},
computed: {
getLabelClasses() {
@ -93,9 +96,12 @@ export default {
}
},
},
watch: {
checkValue(){
this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
methods: {
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
}
}
},
setup(props) {

7
src/ux-components/text-link/text-link.vue
View file

@ -29,8 +29,7 @@ export default {
<style lang="scss">
a {
color: $blue;
text-decoration: none;
border-bottom: 1px solid $blue;
text-underline-offset: 0.5em;
line-height: 26px;
padding: 0 0 4px 0;
font-weight: 500;
@ -45,7 +44,6 @@ a {
}
&.navigation-link {
color: $black;
border-bottom: 1px solid $black;
line-height: 26px;
display: inline-flex;
text-transform: capitalize;
@ -54,14 +52,13 @@ a {
&.footer-link {
color: $gray-600;
text-decoration: none;
border-bottom: 1px solid transparent;
line-height: 20px;
padding: 0 0 2px 0;
font-weight: 400;
font-size: 0.75rem;
&:hover {
border-bottom: 1px solid $gray-500;
padding: 0 0 2px 0;
text-decoration: underline;
}
}
}