Merge pull request #1010 from Safelite/feature/CSR-1214-release
Feature/csr 1214
This commit is contained in:
chloeherdsafelite
GitHub
commit
7b2faec640
9 changed files with 303 additions and 5 deletions
|
|
@ -197,4 +197,137 @@ describe("textboxQuestion.vue", () => {
|
|||
// Assert
|
||||
expect(wrapper.vm.handleChange).toHaveBeenCalled;
|
||||
});
|
||||
|
||||
it("Should call this.handleChange when image is submitted with valid value.", async () => {
|
||||
// Arrange
|
||||
const inputId = "test";
|
||||
const responseValue = "testResponse";
|
||||
|
||||
const storeMixin = {
|
||||
methods: {
|
||||
dispatchStoreAction: jest.fn().mockImplementation(() => {
|
||||
return new Promise((resolve, reject) =>
|
||||
resolve({
|
||||
data: [responseValue],
|
||||
})
|
||||
);
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = shallowMount(textboxQuestion, {
|
||||
global: {
|
||||
directives: {
|
||||
maska: maska,
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
modelValue: "",
|
||||
includeCameraIcon: true,
|
||||
inputId: inputId,
|
||||
},
|
||||
mixins: [mockMixin, storeMixin],
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
|
||||
|
||||
// Act
|
||||
const imageUploadField = wrapper.find('[data-test="image-upload"]');
|
||||
|
||||
await imageUploadField.trigger("change");
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
|
||||
expect(wrapper.vm.handleChange).toHaveBeenCalled();
|
||||
expect(wrapper.emitted()).toHaveProperty("update:modelValue");
|
||||
});
|
||||
|
||||
it("Should emit image-lookup-error when image is submitted with invalid value", async () => {
|
||||
// Arrange
|
||||
const inputId = "test";
|
||||
|
||||
const storeMixin = {
|
||||
methods: {
|
||||
dispatchStoreAction: jest.fn().mockImplementation(() => {
|
||||
return new Promise((resolve, reject) =>
|
||||
resolve({
|
||||
data: [],
|
||||
})
|
||||
);
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = shallowMount(textboxQuestion, {
|
||||
global: {
|
||||
directives: {
|
||||
maska: maska,
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
modelValue: "",
|
||||
includeCameraIcon: true,
|
||||
inputId: inputId,
|
||||
},
|
||||
mixins: [mockMixin, storeMixin],
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
|
||||
|
||||
// Act
|
||||
const imageUploadField = wrapper.find('[data-test="image-upload"]');
|
||||
|
||||
await imageUploadField.trigger("change");
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted()).toHaveProperty("imageLookupError");
|
||||
});
|
||||
|
||||
it("Should emit image-lookup-error when image endpoint responds with an error", async () => {
|
||||
// Arrange
|
||||
const inputId = "test";
|
||||
|
||||
const storeMixin = {
|
||||
methods: {
|
||||
dispatchStoreAction: jest.fn().mockImplementation(() => {
|
||||
return new Promise((resolve, reject) => reject());
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = shallowMount(textboxQuestion, {
|
||||
global: {
|
||||
directives: {
|
||||
maska: maska,
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
modelValue: "",
|
||||
includeCameraIcon: true,
|
||||
inputId: inputId,
|
||||
},
|
||||
mixins: [mockMixin, storeMixin],
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
|
||||
|
||||
// Act
|
||||
const imageUploadField = wrapper.find('[data-test="image-upload"]');
|
||||
|
||||
await imageUploadField.trigger("change");
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted()).toHaveProperty("imageLookupError");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
class="form-label"
|
||||
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
|
||||
v-html="labelText"></label>
|
||||
<div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
|
||||
<div
|
||||
class="input-wrapper"
|
||||
:class="[
|
||||
includeSearchIcon ? 'has-search-icon' : '',
|
||||
includeCameraIcon ? 'has-camera-icon' : '',
|
||||
]">
|
||||
<input
|
||||
class="form-control"
|
||||
v-model.trim="value"
|
||||
|
|
@ -31,6 +36,19 @@
|
|||
:maxlength="maxLength ? maxLength : '999'"
|
||||
@focus="$emit('focus', $event.target.value)" />
|
||||
<button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
|
||||
<label class="camera-icon-input" v-show="includeCameraIcon && !isLoading">
|
||||
<input
|
||||
type="file"
|
||||
id="vin-input"
|
||||
accept="image/jpeg,image/png"
|
||||
aria-label="Camera icon/button"
|
||||
data-test="image-upload"
|
||||
@change="submitImage" />
|
||||
</label>
|
||||
<loader
|
||||
v-show="includeCameraIcon && isLoading"
|
||||
loaderColor="blue"
|
||||
class="loading-icon"></loader>
|
||||
</div>
|
||||
<div v-show="errorMessage" class="row my-2 form-test-error">
|
||||
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
|
||||
|
|
@ -41,6 +59,8 @@
|
|||
<script>
|
||||
import { useField, validate } from "vee-validate";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import loader from "@/ux-components/loader/loader.vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
name: "textbox-question",
|
||||
|
|
@ -70,11 +90,13 @@ export default {
|
|||
questionAlignment: String, // Left or center. Left is default.
|
||||
cornerStyle: String, // Rounded or square. Square is default.
|
||||
includeSearchIcon: Boolean,
|
||||
includeCameraIcon: Boolean,
|
||||
},
|
||||
setup(props) {
|
||||
const propsClone = Object.assign({}, props);
|
||||
const modelValue = propsClone.modelValue;
|
||||
let initialValue;
|
||||
let isLoading = ref(false);
|
||||
|
||||
switch (typeof modelValue) {
|
||||
case "number":
|
||||
|
|
@ -104,8 +126,32 @@ export default {
|
|||
validate,
|
||||
meta,
|
||||
errors,
|
||||
isLoading,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async submitImage(e) {
|
||||
this.isLoading = true;
|
||||
await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, e.target.files[0])
|
||||
.then(async (response) => {
|
||||
if (response.data.length > 0) {
|
||||
this.value = response.data[0];
|
||||
|
||||
// Wait for DOM to update before firing change event to handle validation.
|
||||
await this.$nextTick();
|
||||
|
||||
document.getElementById(this.inputId).dispatchEvent(new Event("change"));
|
||||
} else {
|
||||
this.$emit("imageLookupError");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$emit("imageLookupError");
|
||||
});
|
||||
this.isLoading = false;
|
||||
e.target.value = null;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
|
|
@ -151,6 +197,9 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -183,6 +232,38 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
&.has-camera-icon {
|
||||
label {
|
||||
&.camera-icon-input {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 1rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9774 16.5228C17.3559 16.5228 15.1864 18.6621 15.1864 21.3476C15.1864 24.0331 17.3107 26.1724 19.9774 26.1724C22.6441 26.1724 24.7684 24.0331 24.7684 21.3476C24.7684 18.6621 22.6441 16.5228 19.9774 16.5228Z' fill='%231574A1'/%3E%3Cpath d='M38.4181 7.23725H29.8701C29.1469 2.64 24.7684 0 19.9774 0C15.1864 0 10.8531 2.64 10.0847 7.23725H1.58192C0.723164 7.23725 0 7.96553 0 8.83035V33.7738C0 34.6387 0.723164 35.3669 1.58192 35.3669H38.4181C39.2768 35.3669 40 34.6387 40 33.7738V8.83035C40 7.96553 39.2768 7.23725 38.4181 7.23725ZM19.9774 29.7683C15.3672 29.7683 11.5706 25.9904 11.5706 21.3021C11.5706 16.6138 15.3672 12.8814 19.9774 12.8814C24.5876 12.8814 28.3842 16.6593 28.3842 21.3476C28.3842 26.0359 24.6328 29.7683 19.9774 29.7683ZM36.565 14.5655H33.0395V11.0152H36.565V14.5655Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="file"] {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
&.has-icon {
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@ const endpoints = {
|
|||
url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
|
||||
method: "POST",
|
||||
},
|
||||
LookupVinByImage: {
|
||||
url: "/vehicle/api/v1/vehicle/vins-by-image",
|
||||
method: "POST",
|
||||
},
|
||||
IsVinByAddressPermissible: {
|
||||
url: "/vehicle/api/v1/vehicle/is-vin-by-address-permissible",
|
||||
method: "GET",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ const storeActions = {
|
|||
LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
|
||||
LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
|
||||
LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
|
||||
LOOKUP_VIN_BY_IMAGE: "lookupVinByImage",
|
||||
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
|
||||
GET_PARTS: "getParts",
|
||||
GET_WIPERS: "getWipers",
|
||||
|
|
|
|||
|
|
@ -7,10 +7,16 @@ import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
|
|||
import { headerKeys } from "@/constants/header-keys";
|
||||
|
||||
export default {
|
||||
callHttpClient({ method, endpoint, payload, logApiCall = true }) {
|
||||
callHttpClient({ method, endpoint, payload, logApiCall = true, isFormData = false }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
|
||||
const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
|
||||
let payloadAndAnalyticsData = {};
|
||||
if (isFormData) {
|
||||
payloadAndAnalyticsData = payload;
|
||||
payloadAndAnalyticsData.append("AppName", "FixMyGlass");
|
||||
} else {
|
||||
Object.assign(payloadAndAnalyticsData, payload, { AppName: "FixMyGlass" });
|
||||
}
|
||||
const headers = {
|
||||
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -242,6 +242,19 @@ describe("vin-lookup.vue", () => {
|
|||
// Assert
|
||||
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(0);
|
||||
});
|
||||
|
||||
test("Error emitted by textbox-question element => VinScanFailed alert shown.", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
// Act
|
||||
const vinLookup = wrapper.findComponent('[data-test="vin-lookup-component"]');
|
||||
vinLookup.trigger("imageLookupError");
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
:displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container make-tall">
|
||||
<div class="row mt-2">
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="VinNumberQuestionWidget"
|
||||
|
|
@ -19,7 +19,18 @@
|
|||
validationRules="vin-required|vin-format"
|
||||
:isDisabled="vinPopulatedOnPageLoad"
|
||||
maxLength="17"
|
||||
:mask="vinMask" />
|
||||
includeCameraIcon
|
||||
:mask="vinMask"
|
||||
@image-lookup-error="displayVinScanAlert"
|
||||
data-test="vin-lookup-field" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<alert
|
||||
cmsWidgetName="AlertVinScanFailed"
|
||||
v-if="displayVinScanFailedAlert"
|
||||
alertClass="alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
|
|
@ -187,6 +198,7 @@ export default {
|
|||
displayNonServiceableZipAlert: false,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
displayVinScanFailedAlert: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -380,11 +392,15 @@ export default {
|
|||
await this.navigateForwardWithSingleCarMatch();
|
||||
}
|
||||
},
|
||||
displayVinScanAlert() {
|
||||
this.displayVinScanFailedAlert = true;
|
||||
},
|
||||
resetAlerts() {
|
||||
this.displayMatchedDifferentVehicleAlert = false;
|
||||
this.displayNonServiceableZipAlert = false;
|
||||
this.displayInvalidZipAlert = false;
|
||||
this.displayVinNotFoundAlert = false;
|
||||
this.displayVinScanFailedAlert = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -449,6 +465,7 @@ export default {
|
|||
watch: {
|
||||
vin() {
|
||||
this.displayVinNotFoundAlert = false;
|
||||
this.displayVinScanFailedAlert = false;
|
||||
this.$refs.funnelFooter.updateButtonText(
|
||||
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
|
|
|
|||
|
|
@ -530,6 +530,16 @@ export const actions = {
|
|||
},
|
||||
});
|
||||
},
|
||||
lookupVinByImage(context, image) {
|
||||
const data = new FormData();
|
||||
data.append("vinImage", image);
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.LookupVinByImage.method,
|
||||
endpoint: endpoints.LookupVinByImage.url,
|
||||
payload: data,
|
||||
isFormData: true,
|
||||
});
|
||||
},
|
||||
isVinByAddressPermissible(context, zip) {
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.IsVinByAddressPermissible.method,
|
||||
|
|
|
|||
|
|
@ -403,6 +403,39 @@ describe("Actions", () => {
|
|||
expect(response.data).toEqual({ carId: "C00000001" });
|
||||
});
|
||||
|
||||
it("lookupVinByImage action, should return list of vins", async () => {
|
||||
// Arrange
|
||||
const context = state;
|
||||
const dummyImage = {};
|
||||
|
||||
globalMethods.callHttpClient.mockImplementation(() => {
|
||||
return Promise.resolve({ data: ["1C6JJTAG3NL134044"] });
|
||||
});
|
||||
|
||||
// Act
|
||||
const response = await actions.lookupVinByImage(context, dummyImage);
|
||||
|
||||
// Assert
|
||||
expect(response.data).toEqual(["1C6JJTAG3NL134044"]);
|
||||
});
|
||||
|
||||
it("lookupVinByImage action, should reject if error in calling API", async () => {
|
||||
// Arrange
|
||||
const context = state;
|
||||
const dummyImage = {};
|
||||
|
||||
globalMethods.callHttpClient.mockImplementation(() => {
|
||||
return Promise.reject("An error occurred");
|
||||
});
|
||||
|
||||
// Act
|
||||
|
||||
// Assert
|
||||
await expect(actions.lookupVinByImage(context, dummyImage)).rejects.toEqual(
|
||||
"An error occurred"
|
||||
);
|
||||
});
|
||||
|
||||
it("getVehicleMakes action, should return makes list", async () => {
|
||||
// Arrange
|
||||
const context = state;
|
||||
|
|
|
|||
Loading…
Reference in a new issue