From e2c5fa96337e58cd4e62a9541c8e5eef6e37a291 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 13:38:40 -0400 Subject: [PATCH 1/4] Fixed bug where we were not correctly checking the zip field when the vin was already populated --- src/layouts/vin-lookup/vin-lookup.vue | 47 +++++++++++++++++---------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index aaf2d016c..036277395 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -143,6 +143,7 @@ import { Form, defineRule } from "vee-validate"; import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper"; import vinPagesMixin from "@/mixins/vin-pages-mixin"; +import { StatusCodes } from 'http-status-codes'; // DEFINE VALIDATION RULES defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); @@ -203,6 +204,9 @@ export default { this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") ); }, + initialVin() { + console.log("initial vin change"); + }, }, computed: { perfectMatchNewVinAlert() { @@ -260,7 +264,7 @@ export default { }, setupVinMask() { const lastSixChars = this.initialVin.substring(11, this.initialVin.length); - this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; + this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; }, arePagePrerequisitesValid() { return store.getters.vehicle.carId !== null; @@ -305,26 +309,9 @@ export default { } }, async forwardButtonAction() { - // If there is no change to the VIN entered then navigate forward without performing lookup. - if (this.vinPopulatedOnPageLoad && this.vin == this.initialVin) { - this.navigateForward(); - return; - } const zipValidation = this.validateZip(this.zip); - const vehicleLookup = this.lookupVehicle(this.vin); - const zipValidationResponse = await zipValidation; - const vehicleLookupResponse = await vehicleLookup.catch(() => { - this.vinNotFound = true; - this.$refs.funnelFooter.removeLoader(); - this.noServiceZip = false; - return false; - }); - - if (!vehicleLookupResponse) { - return; - } if (!zipValidationResponse.data.isServiceable) { this.customAlertData.zip = this.zip; @@ -334,6 +321,30 @@ export default { return; } + // If the vin has been touched and we've gotten this far it means they've entered vin or it's already been entered. + let vehicleLookupResponse; + if (this.vinTouched && this.vin != this.initialVin) { + console.log(this.vin); + + const vinToLookup = this.vinTouched ? this.vin : this.initialVin; + const vehicleLookup = this.lookupVehicle(vinToLookup); + vehicleLookupResponse = await vehicleLookup.catch((response) => { + if (response.status == StatusCodes.NOT_FOUND) { + this.vinNotFound = true; + this.$refs.funnelFooter.removeLoader(); + this.noServiceZip = false; + return false; + } + }); + + if (!vehicleLookupResponse) { + return; + } + } else { + this.navigateForward(); + return; + } + this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) { From 0ae55bf21af88ebbdb54586b8dd0cbb6ad0263ab Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 14:28:54 -0400 Subject: [PATCH 2/4] Updated unit tests --- jest.config.js | 4 +-- src/layouts/vin-lookup/vin-lookup.spec.js | 40 +++++++++++++++++++++-- src/layouts/vin-lookup/vin-lookup.vue | 5 ++- 3 files changed, 42 insertions(+), 7 deletions(-) diff --git a/jest.config.js b/jest.config.js index a511fdc02..6662c43cf 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,14 +6,14 @@ module.exports = { transform: { "^.+\\.vue$": "vue-jest" }, moduleFileExtensions: ["js", "vue"], collectCoverageFrom: [ - "src/**/*.{js,vue}", + //"src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/unit-test-helper.js", "!src/layouts/component-test/component-test.vue", "!src/layouts/form-test/form-test.vue", - "!src/layouts/vin-lookup/vin-lookup.vue", + "src/layouts/vin-lookup/vin-lookup.vue", "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/part-questions/**/*.vue", diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index 1c580f4a6..e782f345e 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -69,9 +69,38 @@ describe("vin-lookup.vue", () => { expect(wrapper.vm.navigateForward).toHaveBeenCalled(); }); + it("Should do a VIN lookup if the user has clicked on the VIN field and entered a new VIN or changed a previously matched VIN.", async () => { + // Arrange + const { wrapper } = setupMocks({}); + wrapper.vm.vinTouched = true; + wrapper.vm.vin = "foo"; + wrapper.vm.initialVin = "!foo"; + + wrapper.vm.navigateForward = jest.fn(); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.lookupVehicle).toHaveBeenCalled(); + }); + it("Should not call navigateForward() if the store carId does not match the vin response carId and forward button is clicked", async () => { // Arrange const { wrapper } = setupMocks({}); + // New lookup + wrapper.vm.vinTouched = true; + wrapper.vm.vin = ""; + wrapper.vm.initialVin = "foo"; + const vehicleLookupApiResponse = { data: { carId: 'new carId' // does not match the store value @@ -138,14 +167,21 @@ describe("vin-lookup.vue", () => { it("Should not call navigateForward() when forward button is clicked but lookupVehicle errors out.", async () => { // Arrange const { wrapper } = setupMocks({}); + wrapper.vm.vinTouched = true; + wrapper.vm.vin = "foo"; + wrapper.vm.initialVin = "!foo"; + const vehicleLookupApiResponse = { - data: { + status: { carId: 'new carId' // does not match the store value } }; const vinPromise = Promise.reject(vehicleLookupApiResponse); - wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + const response = { + status: 404 + }; + wrapper.vm.lookupVehicle = jest.fn().mockImplementation((response) => vinPromise); wrapper.vm.navigateForward = jest.fn(); wrapper.vm.previouslyEnteredCarId = 'new carId'; diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 851b5e012..699856b79 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -320,11 +320,10 @@ export default { return; } - // If the vin has been touched and we've gotten this far it means they've entered vin or it's already been entered. + // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched. + // Therefore we need to do a VIN Lookup let vehicleLookupResponse; if (this.vinTouched && this.vin != this.initialVin) { - console.log(this.vin); - const vinToLookup = this.vinTouched ? this.vin : this.initialVin; const vehicleLookup = this.lookupVehicle(vinToLookup); vehicleLookupResponse = await vehicleLookup.catch((response) => { From 3357772a11fb15241ee286cb4605899326a36e15 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 14:34:14 -0400 Subject: [PATCH 3/4] Updated unit tests 2 --- jest.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jest.config.js b/jest.config.js index 6662c43cf..a511fdc02 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,14 +6,14 @@ module.exports = { transform: { "^.+\\.vue$": "vue-jest" }, moduleFileExtensions: ["js", "vue"], collectCoverageFrom: [ - //"src/**/*.{js,vue}", + "src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/unit-test-helper.js", "!src/layouts/component-test/component-test.vue", "!src/layouts/form-test/form-test.vue", - "src/layouts/vin-lookup/vin-lookup.vue", + "!src/layouts/vin-lookup/vin-lookup.vue", "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/part-questions/**/*.vue", From 8e091816295d07ec0fc16e0f3aaa782599390d5e Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 15:10:58 -0400 Subject: [PATCH 4/4] Removed unused watch for initialVin --- src/layouts/vin-lookup/vin-lookup.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 699856b79..29aeda5e4 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -203,9 +203,6 @@ export default { this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") ); }, - initialVin() { - console.log("initial vin change"); - }, }, computed: { perfectMatchNewVinAlert() {