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

Cleanup and logic fixes

Browse source
This commit is contained in:
Max 2022-02-16 13:25:05 -05:00
parent b2b874e988
commit 845679df74
5 changed files with 41 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,12 +3,14 @@ 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 () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
isOverflowScrollable: true,
const wrapper = shallowMount(buttonQuestion, {
propsData: {
isOverflowScrollable: true,
}
});
// Assert
const fieldSet = wrapper.find('fieldset');
expect(fieldSet.classes()).toContain("overflow-scroll");
@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Fieldset classes should contain row if button type is listCard", async () => {
it("Fieldset classes should contain row if button type is listCard", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
buttonType: "listCard",
const wrapper = shallowMount(buttonQuestion, {
propsData: {
buttonType: "listCard",
}
});
// Assert
const Div = wrapper.find('fieldset div');
@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
buttonType: "listButtonHorizontal",
const wrapper = shallowMount(buttonQuestion, {
propsData: {
buttonType: "listButtonHorizontal",
}
});
// Assert
const Div = wrapper.find('fieldset div');
@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Should add values to array on checkbox click", async () => {
it("Should add values to array on checkbox click", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
modelValue: ["2022", "2021", "2020"],
isMultiSelect: true
const wrapper = shallowMount(buttonQuestion, {
propsData: {
modelValue: ["2022", "2021", "2020"],
isMultiSelect: true,
}
});
const val = {isChecked: true, buttonId: "2019", }
wrapper.vm.handleCheckedChanged(val);

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

@ -29,7 +29,7 @@
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="this.answers.length < 3 ? '' : '-4'"
:colLength="getColLength"
:selectedButtonIDs="selectedValues"
data-test="button"
:validationRules="validationRules"
@ -83,8 +83,6 @@ export default {
isWide: Boolean,
modelValue: Array,
validationRules: String,
name: String,
value: String,
suppressError: Boolean,
},
computed: {
@ -111,6 +109,13 @@ export default {
}
return classes;
},
getColLength(){
if(this.isWide) {
return "12"
} else {
return this.answers.length < 3 ? '' : '-4';
}
},
selectedValues: {
get: function() {
return this.modelValue;
@ -120,17 +125,16 @@ export default {
}
},
},
mounted(){
if(Array.isArray(this.answers) && this.answers.length === 1) {
beforeUpdate(){
const exceptions = ["Windshield", "Crack"];
const firstItem = typeof(this.answers[0]) === 'object' ? this.answers[0] : this.answers[0];
if(Array.isArray(this.answers) && this.answers.length === 1 && !exceptions.includes(typeof(firstItem) === 'object' ? firstItem.Text : firstItem)) {
const newSelectedValues = this.selectedValues;
newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
newSelectedValues.push(typeof(firstItem) === 'object' ? firstItem.Name : firstItem);
this.selectedValues = newSelectedValues;
}
},
methods: {
chooseAnswer(answer) {
this.$emit("update:modelValue", answer);
},
handleCheckedChanged(val) {
if(this.isMultiSelect) {
// Add or remove item to array of data to emit

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

@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
test("Answers to display filtered by data from api.", async () => {
//Arrange
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
//Act
replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");

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

@ -1,8 +1,9 @@
<template>
<transition name="fade">
<div class="replace-options-question">
<div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
<buttonQuestion
v-if="isAvailable && answersToDisplay.length > 1"
v-if="isAvailable"
isWide
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"

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

@ -5,7 +5,7 @@
<funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
<replaceOptionsQuestion ref="windshieldOptions" isAvailable groupName="windshieldOptions" />
<replaceOptionsQuestion ref="windshieldOptions" isAvailable groupName="windshieldOptions" v-model="windshieldOptionsData" />
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
</template>
@ -81,6 +81,7 @@ export default {
return {
selectedDamageLocations: [],
driverSideOptionsData: [],
windshieldOptionsData: [],
}
},
methods: {