diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js index d5d1de4e6..e3c7b315d 100644 --- a/src/common-components/textbox-question/textbox-question.spec.js +++ b/src/common-components/textbox-question/textbox-question.spec.js @@ -197,4 +197,252 @@ describe("textboxQuestion.vue", () => { // Assert expect(wrapper.vm.handleChange).toHaveBeenCalled; }); + + it("Should not display camera or spinner icon when disabled", () => { + // Arrange + const inputId = "test"; + + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + modelValue: "", + includeImageQuestion: true, + inputId: inputId, + isDisabled: true, + }, + mixins: [mockMixin], + attachTo: document.body, + }); + + // Act + const cameraIcon = wrapper.find('[data-test="image-upload"]'); + const loadingIcon = wrapper.findComponent("loader"); + + // Assert + expect(cameraIcon.exists()).toBe(false); + expect(loadingIcon.exists()).toBe(false); + }); + + describe("Image Uploading", () => { + it("Should call this.handleChange & emit update when fully valid image is submitted.", async () => { + // Arrange + const inputId = "test"; + const responseValue = "testResponse"; + + const imageHandler = jest.fn().mockImplementation( + () => + new Promise((resolve, reject) => { + resolve({ + data: [responseValue], + }); + }) + ); + + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + modelValue: "", + "onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }), + includeImageQuestion: true, + inputId: inputId, + imageQuestionSubmitHandler: imageHandler, + }, + mixins: [mockMixin], + attachTo: document.body, + }); + + wrapper.vm.handleChange = jest.fn().mockImplementation(() => {}); + wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true); + + // Act + const imageUploadField = wrapper.find('[data-test="image-upload"]'); + + await imageUploadField.trigger("change"); + + await wrapper.vm.$nextTick(); + + // Assert + + expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled(); + expect(wrapper.vm.handleChange).toHaveBeenCalled(); + expect(wrapper.emitted()).toHaveProperty("update:modelValue"); + }); + + it("Should not call handler and emit image-lookup-error when image is invalid.", async () => { + // Arrange + const inputId = "test"; + const responseValue = "testResponse"; + + const imageHandler = jest.fn().mockImplementation( + () => + new Promise((resolve, reject) => { + resolve({ + data: [responseValue], + }); + }) + ); + + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + modelValue: "", + "onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }), + includeImageQuestion: true, + inputId: inputId, + imageQuestionSubmitHandler: imageHandler, + }, + mixins: [mockMixin], + attachTo: document.body, + }); + + wrapper.vm.handleChange = jest.fn().mockImplementation(() => {}); + wrapper.vm.isImageValid = jest.fn().mockImplementation(() => false); + + // Act + const imageUploadField = wrapper.find('[data-test="image-upload"]'); + + await imageUploadField.trigger("change"); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.imageQuestionSubmitHandler).not.toHaveBeenCalled(); + expect(wrapper.vm.handleChange).not.toHaveBeenCalled(); + expect(wrapper.emitted()).toHaveProperty("imageValidityError"); + }); + + it("Should emit image-lookup-error when image lookup responds with an error.", async () => { + // Arrange + const inputId = "test"; + + const imageHandler = jest.fn().mockImplementation( + () => + new Promise((resolve, reject) => { + reject({}); + }) + ); + + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + modelValue: "", + "onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }), + includeImageQuestion: true, + inputId: inputId, + imageQuestionSubmitHandler: imageHandler, + }, + mixins: [mockMixin], + attachTo: document.body, + }); + + wrapper.vm.handleChange = jest.fn().mockImplementation(() => {}); + wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true); + + // Act + const imageUploadField = wrapper.find('[data-test="image-upload"]'); + + await imageUploadField.trigger("change"); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled(); + expect(wrapper.vm.handleChange).not.toHaveBeenCalled(); + expect(wrapper.emitted()).toHaveProperty("imageLookupError"); + }); + }); + + describe("Image Validation", () => { + it("Should return true if a valid image is tested.", () => { + // Arrange + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + inputId: "input ID", + maxFileSize: 5140 * 1028, + }, + mixins: [mockMixin], + }); + + const image = { + size: 100 * 1028, + }; + + // Act + const result = wrapper.vm.isImageValid(image); + + // Assert + expect(result).toBeTruthy(); + }); + + it("Should return false if null image is tested.", () => { + // Arrange + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + inputId: "input ID", + maxFileSize: 5140 * 1028, + }, + mixins: [mockMixin], + }); + + const image = null; + + // Act + const result = wrapper.vm.isImageValid(image); + + // Assert + expect(result).toBeFalsy(); + }); + + it("Should return false if oversized image is tested.", () => { + // Arrange + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + inputId: "input ID", + maxFileSize: 5140 * 1028, + }, + mixins: [mockMixin], + }); + + const image = { + size: 10000000 * 1028, + }; + + // Act + const result = wrapper.vm.isImageValid(image); + + // Assert + expect(result).toBeFalsy(); + }); + }); }); diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 957f59f36..658bb4bb7 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -6,7 +6,12 @@ class="form-label" :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']" v-html="labelText"> -
+
{{ errorMessage }} @@ -41,6 +63,8 @@ @@ -183,6 +243,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 { diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 1fc6c2b8f..a2f9b38be 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -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", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index c11356d69..96fc64ac8 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -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", diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js index fab6d508f..519de0855 100644 --- a/src/constants/tint-mapper.js +++ b/src/constants/tint-mapper.js @@ -32,6 +32,7 @@ const tintMap = { { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" }, { name: "green tint", src: "Glass-NoShade-GreenTint.svg" }, { name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" }, + { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" }, // No shade or tint { name: "clear", src: "Glass-NoShade-NoTint.svg" }, diff --git a/src/global-methods.js b/src/global-methods.js index 14e5cca0e..2df5c29af 100644 --- a/src/global-methods.js +++ b/src/global-methods.js @@ -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), }; diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index fc15d3667..f47fdfb36 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -242,6 +242,97 @@ 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); + }); + }); + + describe("getVinFromImage", () => { + test("GetVinFromImage resolves with first valid VIN when any vins are returned.", async () => { + // Arrange + const responseValue = "testResponse"; + const lookup = jest.fn().mockImplementation(() => { + return new Promise((resolve, reject) => resolve([responseValue])); + }); + + const image = {}; + + const storeMixin = { + methods: { + dispatchStoreAction: lookup, + }, + }; + + const { wrapper } = setupMocks({ + mixins: [storeMixin], + }); + + // Act + const response = await wrapper.vm.getVinFromImage(image); + + // Assert + expect(lookup).toHaveBeenCalled(); + expect(response).toEqual(responseValue); + }); + + test("GetVinFromImage rejects if no vins are returned.", async () => { + // Arrange + const lookup = jest.fn().mockImplementation(() => { + return new Promise((resolve, reject) => resolve([])); + }); + + const image = {}; + + const storeMixin = { + methods: { + dispatchStoreAction: lookup, + }, + }; + + const { wrapper } = setupMocks({ + mixins: [storeMixin], + }); + + // Act + const promise = wrapper.vm.getVinFromImage(image); + + // Assert + await expect(promise).rejects.toEqual("No VINs detected."); + }); + + test("GetVinFromImage rejects if an error occurs.", async () => { + const lookup = jest.fn().mockImplementation(() => { + return new Promise((resolve, reject) => reject()); + }); + + const image = {}; + + const storeMixin = { + methods: { + dispatchStoreAction: lookup, + }, + }; + + const { wrapper } = setupMocks({ + mixins: [storeMixin], + }); + + // Act + const promise = wrapper.vm.getVinFromImage(image); + + // Assert + await expect(promise).rejects.toEqual("An error occurred during the lookup."); + }); }); }); diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index e42187b12..9fe9077d9 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -8,7 +8,7 @@ :displayGenericVehicleImage="false" />
-
+
+ :mask="vinMask" + includeImageQuestion + :imageQuestionSubmitHandler="getVinFromImage" + :maxFileSize="imageUploadMaxFileSize" + @image-lookup-error="displayVinScanAlert" + @image-validity-error="displayVinScanAlert" + data-test="vin-lookup-field" + ref="vinLookupQuestion" /> +
+
+
+
+
@@ -187,6 +202,7 @@ export default { displayNonServiceableZipAlert: false, displayVinNotFoundAlert: false, displayMatchedDifferentVehicleAlert: false, + displayVinScanFailedAlert: false, }; }, methods: { @@ -380,11 +396,30 @@ export default { await this.navigateForwardWithSingleCarMatch(); } }, + displayVinScanAlert() { + this.displayVinScanFailedAlert = true; + }, + getVinFromImage(image) { + return new Promise((resolve, reject) => { + this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, image) + .then((response) => { + if (response.data.length > 0) { + resolve(response.data[0]); + } else { + reject("No VINs detected."); + } + }) + .catch(() => { + reject("An error occurred during the lookup."); + }); + }); + }, resetAlerts() { this.displayMatchedDifferentVehicleAlert = false; this.displayNonServiceableZipAlert = false; this.displayInvalidZipAlert = false; this.displayVinNotFoundAlert = false; + this.displayVinScanFailedAlert = false; }, }, mounted() { @@ -445,10 +480,16 @@ export default { return "XXXXXXXXXXXXXXXXX"; } }, + imageUploadMaxFileSize() { + let kiloBytes = 5140; + + return kiloBytes * 1028; + }, }, watch: { vin() { this.displayVinNotFoundAlert = false; + this.displayVinScanFailedAlert = false; this.$refs.funnelFooter.updateButtonText( this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") ); diff --git a/src/store/index.js b/src/store/index.js index f42a950ea..751146430 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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, diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 06f0cb746..9c2dbb0a7 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -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;