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

Merge pull request #221 from Safelite/feature/CSR-268_fix

Browse source 
Feature/csr 268 fix
This commit is contained in:
max-dempsey 2022-02-16 14:54:22 -05:00 committed by GitHub
commit 9c091e91be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 66 additions and 35 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

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

@ -1,7 +1,6 @@
<template>
<div class="damage-location-question">
<buttonQuestion
v-if="answersToDisplay.length > 1"
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"

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");

7
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"
@ -64,7 +65,7 @@ export default ({
? this.answersFromCms.filter(ans =>
{
const name = ans.Name.split('-');
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
})
: [];
},

23
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -175,7 +175,10 @@ function setupMocks({
return Promise.resolve({
driverSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
}
},
windshieldOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
},
});
});
const apiResponses = {
@ -193,6 +196,9 @@ function setupMocks({
damageOptions: {
driverSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
},
windshieldOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
}
},
};
@ -220,6 +226,11 @@ function setupMocks({
initializeComponent: jest.fn(),
};
const windshieldOptions = replaceOptionsQuestion
windshieldOptions.methods = {
initializeComponent: jest.fn(),
};
damageLocationQuestion.methods = {
initializeComponent: jest.fn(),
};
@ -245,12 +256,18 @@ function setupMocks({
funnelSubHeaderWrapper.vm.initializeComponent =
funnelSubHeader.methods.initializeComponent;
const driverSideOptionsWrapper = wrapper.findComponent({
const driverSideOptionsWrapper = wrapper.findAllComponents({
name: "replaceOptionsQuestion",
});
}).at(0);
driverSideOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent;
const windshieldOptionsWrapper = wrapper.findAllComponents({
name: "replaceOptionsQuestion",
}).at(1);
windshieldOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent;
const damageLocationQuestionWrapper = wrapper.findComponent({
name: "damageLocationQuestion",
});

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

@ -4,7 +4,8 @@
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
<replaceOptionsQuestion ref="windshieldOptions" isAvailable groupName="windshieldOptions" v-model="windshieldOptionsData" />
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
</template>
@ -68,6 +69,9 @@ export default {
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
@ -77,6 +81,7 @@ export default {
return {
selectedDamageLocations: [],
driverSideOptionsData: [],
windshieldOptionsData: [],
}
},
methods: {