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

CSR-762 Fix merge conflict

Browse source
This commit is contained in:
Katie 2022-10-17 11:21:23 -04:00
commit 00d7fd1611
18 changed files with 120 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
jest.config.js
View file

@ -28,7 +28,7 @@ module.exports = {
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: {
global: {
statements: 85,
statements: 80,
// Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
},
},

42
src/App.vue
View file

@ -11,48 +11,12 @@
</template>
<script>
// TODO KO glass-part-question has nested button questions
// TODO KO selectedValues - make consistent for checkbox and radio if possible
import { handleChildFocus } from "@/helpers/input-button-focus-helper"
export default {
name: "app",
data() {
return {
lastFocusedInputGroupName: "",
onFocusCallback: null,
};
},
methods: {
handleChildFocus(e) {
const targetType = e.target.type;
if (targetType !== "radio" && targetType !== "checkbox") {
this.handleInputFocus({
groupName: null,
});
}
},
handleInputFocus(e) {
if (
e &&
this.lastFocusedInputGroupName !== e.groupName &&
this.onFocusCallback
) {
this.onFocusCallback();
}
},
handleInputBlur(e) {
if (e) {
this.lastFocusedInputGroupName = e.groupName;
this.onFocusCallback = e.onFocusCallback;
}
},
},
watch: {
$route: {
handler() {
this.lastFocusedInputGroup = null;
},
},
},
handleChildFocus: handleChildFocus
}
};
</script>

27
src/common-components/base-input-button/base-input-button.spec.js
View file

@ -952,13 +952,30 @@ describe.skip("baseInputButton.vue", () => {
test.only("click on both => both are selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
isMultiSelect: true
isMultiSelect: true,
value1: "value1"
})
console.log(wrapper.html())
// Act
const buttonWrappers = wrapper.findAllComponents({name: "baseInputButtonWrapper"})
await buttonWrappers[0].trigger("click")
// The two together simulate a click
const inputOne = buttonWrappers.at(0);
await inputOne.trigger("mousedown.left")
await inputOne.trigger("change")
await inputOne.trigger("click")
console.log({
html: wrapper.html(),
buttonWrapper1: inputOne,
a: inputOne.vm.selectedValue,
c: inputOne.vm.modelValue,
d: inputOne.modelValue,
e: inputOne.vm.value,
f: inputOne.value,
})
// Assert
expect(wrapper.vm.value).toEqual(["value1"])
@ -1015,8 +1032,8 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
};
let parentComponentTemplate = "<div>"
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" :isMultiSelect="isMultiSelect" groupName="myGroupName" value="value1" />`
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" :isMultiSelect="isMultiSelect" groupName="myGroupName" value="value2" />`
parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value1" />`
parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value2" />`
parentComponentTemplate += `</div>`
const wrapper = mount({
data() {

54
src/common-components/base-input-button/base-input-button.vue
View file

@ -26,40 +26,15 @@
import { useField } from "vee-validate";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin";
import { handleInputFocus, handleInputBlur } from "@/helpers/input-button-focus-helper";
import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
export default {
name: "base-input-button",
props: {
// ...inputButtonWrapperMixin.props
value: {
type: [String, Number],
required: true,
},
modelValue: {
type: [Array, String, Number],
required: true,
},
isMultiSelect: Boolean,
groupName: {
type: String,
required: true,
},
validationRules: {
type: String,
default: "",
},
...inputButtonProps,
buttonWrapperClasses: [String, Array, Object],
inputClasses: [String, Array, Object],
valueToLogType: String,
selectOnKeypress: {
type: Boolean,
default: true,
},
isRequired: Boolean,
lastValuePushedToGa: [String, Number],
setLastValuePushedToGa: Function,
shouldPushClickEventToGAOnMount: Boolean,
},
data() {
return {
@ -68,15 +43,15 @@ export default {
},
mounted() {
if (this.isChecked) {
if (this.shouldPushClickEventToGAOnMount) {
this.handleEventAction(this.eventTypes.MOUNT)
} else {
this.handleChange(this.modelValue);
}
this.handleChange(this.modelValue);
}
},
methods: {
handleEventAction(eventType, e) {
console.log("HANDLE EVENT ACTION: ", {
eventType,
e
})
if (this.isMultiSelect) {
switch (eventType) {
case this.eventTypes.ENTER:
@ -92,16 +67,15 @@ export default {
case this.eventTypes.CLICK:
case this.eventTypes.ENTER:
case this.eventTypes.SPACE:
case this.eventTypes.MOUNT:
this.handleClick(e);
this.handlePushClickEventToGACheck(
this.eventTypes.CLICK
);
break;
case this.eventTypes.CHANGE:
this.selectOnKeypress
? this.handleClick(e)
: this.handleSelectionChange(e);
this.selectingInitiatesLoad
? this.handleSelectionChange(e)
: this.handleClick(e);
break;
}
}
@ -130,12 +104,12 @@ export default {
this.$emit("update:modelValue", this.valueToEmit);
},
handleFocus() {
this.$root.handleInputFocus({
handleInputFocus({
groupName: this.groupName,
});
},
handleBlur() {
this.$root.handleInputBlur({
handleInputBlur({
groupName: this.groupName,
onFocusCallback: this.handlePushClickEventToGACheck,
});
@ -146,6 +120,7 @@ export default {
this.pushClickEventToGA();
} else { // if from tabbing around
if (
this.valueToEmit !== null &&
!this.isValueSelectedOnClick &&
this.isChecked &&
this.lastValuePushedToGa != this.value
@ -193,7 +168,6 @@ export default {
ENTER: "enter",
SPACE: "space",
CLICK: "click",
MOUNT: "mount"
};
},
},

30
src/common-components/base-input-button/button-functionality-props.js Normal file
View file

@ -0,0 +1,30 @@
export const inputButtonProps = {
value: {
type: [String, Number],
required: true,
},
modelValue: {
type: [Array, String, Number],
required: true,
},
isMultiSelect: Boolean,
groupName: {
type: String,
required: true,
},
validationRules: {
type: String,
default: "",
},
valueToLogType: String,
isRequired: {
type: Boolean,
default: true,
},
lastValuePushedToGa: [String, Number],
setLastValuePushedToGa: Function,
selectingInitiatesLoad: {
type: Boolean,
default: false,
},
}

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

@ -49,10 +49,8 @@
:isWide="isWide"
:validationRules="validationRules"
:textPosition="textPosition"
:selectOnKeypress="selectOnKeypress"
:lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa"
:shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount"
v-model="selectedValues"
/>
<!-- For nested questions -->
@ -118,11 +116,6 @@ export default {
suppressError: Boolean,
useTextForValue: Boolean,
valueToLogType: String,
selectOnKeypress: {
type: Boolean,
default: true,
},
shouldPushClickEventToGAOnMount: Boolean
},
data() {
return {
@ -179,7 +172,6 @@ export default {
}
},
buttonsInfo() {
// TODO KO temporary. It should always just be an array
return (Array.isArray(this.answers) ? this.answers : [])?.map(
(answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,

35
src/helpers/analytics-helper.js Normal file
View file

@ -0,0 +1,35 @@
let lastFocusedInputGroupName = "";
let onFocusCallback = null;
// TODO KO Add tests for this file
const handleChildFocus = (e) => {
const targetType = e.target.type;
if (targetType !== "radio" && targetType !== "checkbox") {
handleInputFocus({
groupName: null,
});
}
}
const handleInputFocus = (e) => {
if (
e &&
lastFocusedInputGroupName !== e.groupName &&
onFocusCallback
) {
onFocusCallback();
}
}
const handleInputBlur = (e) => {
if (e) {
lastFocusedInputGroupName = e.groupName;
onFocusCallback = e.onFocusCallback;
}
}
export {
handleChildFocus,
handleInputFocus,
handleInputBlur
}

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

@ -25,7 +25,7 @@ export default ({
name: "replaceOptionsQuestion",
data(){
return {
replaceOptions: [],
replaceOptions: this.isMultiSelect ? [] : "",
}
},
props: {
@ -46,7 +46,7 @@ export default ({
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
this.selectedValues = [this.answersToDisplay[0].Name];
this.selectedValues = this.isMultiSelect ? [this.answersToDisplay[0].Name] : this.answersToDisplay[0].Name;
}
},
},
@ -91,7 +91,7 @@ export default ({
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedValues = [];
this.selectedValues = this.isMultiSelect ? [] : "";
}
}
},

2
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -57,7 +57,7 @@ export default ({
name: "sideDoorOptions",
props: {
groupName: String,
modelValue: [Array, Object], // TODO Does this take an array?
modelValue: Object,
selectedDamageLocations: Array,
cmsWidgetName: String,
},

6
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE
defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => {
return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR ||
(!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) ||
(selectedDamageLocations.length === 1 && selectedDamageLocations[0].length === 1);
(!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) ||
(selectedDamageLocations[0].length === 1);
});
defineRule("repair-only", (value) => {
return value.toString() === damageLocationsSelected.REPAIR;
@ -83,7 +83,7 @@ export default ({
},
props: {
modelValue: [Object, String], // TODO Does this take a string?
modelValue: Object,
selectedDamageLocations: Array,
hasRepairReplaceConflict: Boolean,
hasSplitSingleConflict: Boolean,

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

@ -8,7 +8,6 @@
groupName="ChooseVehicleMake"
textPosition="text-start"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
</template>

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

@ -8,7 +8,6 @@
groupName="ChooseVehicleModel"
textPosition="text-start"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
</template>

6
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -27,9 +27,7 @@
isRequired
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="partValidationRules"
:shouldPushClickEventToGAOnMount="
shouldPushClickEventToGAOnMount
" />
/>
</div>
</div>
</buttonQuestion>
@ -57,7 +55,6 @@ export default {
glassColorQuestion: "",
glassFeatureQuestion: "",
selectedTint: "",
shouldPushClickEventToGAOnMount: true,
};
},
props: {
@ -224,7 +221,6 @@ export default {
this.$nextTick(() => {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
this.shouldPushClickEventToGAOnMount = false;
this.selectedTint = this.modelValue?.color
}
});

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

@ -8,7 +8,6 @@
groupName="ChooseVehicleStyle"
textPosition="text-start"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
</template>

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

@ -8,7 +8,6 @@
groupName="ChooseVehicleYear"
textPosition="text-start"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
</template>

3
src/mixins/analytics-mixin.js
View file

@ -48,6 +48,7 @@ export default {
pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
const currentPageName = getPageNameByQueryString();
const labelToLog = getValueToLog(label, valueToLogType);
const eventToBePushed = {
'event': GaEvents.GENERIC_EVENT,
'category': category,
@ -140,7 +141,7 @@ export default {
noSession() {
return getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000';
}
},
},
computed: {
analyticsPageEvents() {

16
src/mixins/input-button-wrapper-mixin.js
View file

@ -1,9 +1,8 @@
import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
export default {
props: {
modelValue: [Array, String, Number],
value: [String, Number],
isMultiSelect: Boolean,
groupName: String,
...inputButtonProps,
buttonLabel: [Number, String],
buttonLabelSubCopy: String,
buttonImage: String,
@ -13,16 +12,7 @@ export default {
},
textPosition: String,
screenReaderOnlyText: String,
valueToLogType: String,
validationRules: String,
isWide: Boolean,
isRequired: {
type: Boolean,
default: true,
},
lastValuePushedToGa: [String, Number],
setLastValuePushedToGa: Function,
shouldPushClickEventToGAOnMount: Boolean,
},
computed: {
selectedValue: {

7
src/store/index.js
View file

@ -1044,11 +1044,8 @@ export const actions = {
);
const isWindshieldRepairTheSame =
isWindshieldRepair === context.state.order.damage.isRepair;
const isChipCountTheSame = Array.isArray(selectedWindshieldChipCount) //TODO: fix the underlying components so this is never an array
? selectedWindshieldChipCount[0] ===
context.state.order.damage.numberOfChips
: selectedWindshieldChipCount ===
context.state.order.damage.numberOfChips;
const isChipCountTheSame = selectedWindshieldChipCount === context.state.order.damage.numberOfChips;
const isDamageChanging =
!isGlassToReplaceTheSame ||