From 27dae3e8896b3771dd692952afc3afb82602ba78 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 9 Jun 2022 15:05:58 -0400 Subject: [PATCH 1/4] vin-lookup-tests | added some tests --- src/layouts/vin-lookup/vin-lookup.spec.js | 140 ++++++++++++++++++---- 1 file changed, 116 insertions(+), 24 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index ce2ac71af..8574b2505 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -46,7 +46,6 @@ describe("vin-lookup.vue", () => { it("Should update the funnel-footer forward button when VIN is changed", (done) => { //Arrange const { wrapper } = setupMocks({ }); - wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); //Act wrapper.setData({vin: "newValue"}); //Assert @@ -60,25 +59,6 @@ describe("vin-lookup.vue", () => { it("Should call navigateForward() if the store carId matches the vin response carId and forward button is clicked", async () => { // Arrange const { wrapper } = setupMocks({ }); - const zipValidationApiResponse = { - data: { - isServiceable: true - } - }; - const vehicleLookupApiResponse = { - data: { - carId: 'initial carId' - } - }; - - const zipPromise = Promise.resolve(zipValidationApiResponse); - const vinPromise = Promise.resolve(vehicleLookupApiResponse); - - wrapper.vm.validateZip = jest.fn().mockImplementation(() => zipPromise); - wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); - - wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); - wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); wrapper.vm.navigateForward = jest.fn(); // Act @@ -87,12 +67,98 @@ describe("vin-lookup.vue", () => { //Assert expect(wrapper.vm.navigateForward).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({ }); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + + wrapper.vm.navigateForward = jest.fn(); + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).not.toHaveBeenCalled(); + }); + + it("Should call navigateForward() if the store carId does not match the vin response carId but does match previously enterted carId and forward button is clicked", async () => { + // Arrange + const { wrapper } = setupMocks({ }); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + wrapper.vm.navigateForward = jest.fn(); + + wrapper.vm.previouslyEnteredCarId = 'new carId'; + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).toHaveBeenCalled(); + }); + + it("Should not call navigateForward() if zip service returns a non-serviceable flag", async () => { + // Arrange + const { wrapper } = setupMocks({ }); + const zipValidationApiResponse = { + data: { + isServiceable: false + } + }; + + const zipPromise = Promise.resolve(zipValidationApiResponse); + + wrapper.vm.validateZip = jest.fn().mockImplementation(() => zipPromise); + wrapper.vm.navigateForward = jest.fn(); + + wrapper.vm.previouslyEnteredCarId = 'new carId'; + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).not.toHaveBeenCalled(); + }); + + it("Should not call navigateForward() when forward button is clicked but lookupVehicle errors out.", async () => { + // Arrange + const { wrapper } = setupMocks({ }); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.reject(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + wrapper.vm.navigateForward = jest.fn(); + + wrapper.vm.previouslyEnteredCarId = 'new carId'; + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).not.toHaveBeenCalled(); + }); }); function setupMocks({ customMountOptions }) { - - const mountOptions = getMountOptions({}); const finalMountOptions = Object.assign(mountOptions, customMountOptions); @@ -100,10 +166,36 @@ function setupMocks({ customMountOptions }) { finalMountOptions.global.mocks["$store"] = store; finalMountOptions.global.mixins = [mockMixin]; finalMountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods - + const wrapper = shallowMount(vinLookup, finalMountOptions); + mockOutPromises(wrapper); + mockOutStubFunctions(wrapper); return { wrapper }; - } +} + +function mockOutPromises(wrapper) { + const zipValidationApiResponse = { + data: { + isServiceable: true + } + }; + const vehicleLookupApiResponse = { + data: { + carId: 'initial carId' + } + }; + + const zipPromise = Promise.resolve(zipValidationApiResponse); + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.validateZip = jest.fn().mockImplementation(() => zipPromise); + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); +} + +function mockOutStubFunctions(wrapper) { + wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); + wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); +} const mockMixin = { methods: { From 06ca68cff365660d73e5bb46de9ba90a04ca644f Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 9 Jun 2022 15:07:30 -0400 Subject: [PATCH 2/4] vin-lookup-tests | fixed error in vin-lookup --- src/layouts/vin-lookup/vin-lookup.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 6c0f305b5..9dc81f719 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -292,8 +292,11 @@ export default { this.vinNotFound = true; this.$refs.funnelFooter.removeLoader(); this.noServiceZip = false; - return; + return false; }); + if (!vehicleLookupResponse) { + return; + } if (!zipValidationResponse.data.isServiceable) { this.customAlertData.zip = this.zip; this.$refs.funnelFooter.removeLoader(); From ece57def136c0c18dd507daf6ff32268f28dfa5e Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 9 Jun 2022 16:45:36 -0400 Subject: [PATCH 3/4] Halfway through - highly notated fields --- src/layouts/vin-lookup/vin-lookup.vue | 56 +++++++++++++-------------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 9dc81f719..74eb2352e 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -209,9 +209,11 @@ export default { return text; }, MatchedDifferentVehicleAlertBody(){ - const text = this.getCmsContent("MatchedDifferentVehicle", - "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}", - this.customAlertData?.vehicleInfo?.model); + const text = this.getCmsContent("MatchedDifferentVehicle", "BodyText") + .replaceAll("{custom:damage}", getDamageString()) + .replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year) + .replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make) + .replaceAll("{custom:vinlookupModel}", this.customAlertData?.vehicleInfo?.model); return text; }, @@ -287,47 +289,43 @@ export default { async forwardButtonAction() { const zipValidation = this.validateZip(this.zip); const vehicleLookup = this.lookupVehicle(this.vin); + // await responses below to let above service calls run asynchronously 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; + // validations + if (!vehicleLookupResponse) { // vehicle response is null or false (it fails) + this.vinNotFound = true; // used to determine alerts that show this.$refs.funnelFooter.removeLoader(); - this.noServiceZip = true; - this.invalidZip = this.zip; - return; - } - this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; - - if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) { - this.previouslyEnteredCarId = vehicleLookupResponse.data.carId; - this.noServiceZip = false; - this.customAlertData.vehicleInfo = vehicleLookupResponse.data; + this.noServiceZip = false; // used to determine alerts that show + } else if (!zipValidationResponse.data.isServiceable) { // zip response shows zip is not serviceable + this.$refs.funnelFooter.removeLoader(); + this.noServiceZip = true; // used to determine alerts that show + this.invalidZip = this.zip; // used to populate the alert + } else if (vehicleLookupResponse.data.carId !== store.getters.vehicle.carId && // response does not match what was selected previously in the flow && + (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) // response does not match what was returned from a previous response + { + this.isCarIdDifferent = true; // because vehicleLookupResponse.data.carId !== store.getters.vehicle.carId + this.previouslyEnteredCarId = vehicleLookupResponse.data.carId; // tracks if car ID is different since last time we got a vehicle lookup response + this.noServiceZip = false; // used to determine alerts that show + this.customAlertData.vehicleInfo = vehicleLookupResponse.data; // populate the vehicle info alert info this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookupResponse.data.year} ${vehicleLookupResponse.data.make} ${vehicleLookupResponse.data.model}`); - this.isVinValid = true; + this.isVinValid = true; //I don't think this line is needed this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookupResponse.data.carId); this.$refs.funnelFooter.removeLoader(); - this.isCarIdDifferent = true; - return; + } else { + this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; // do I need this line? -- I do + this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data); + this.navigateForward(); } - this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data); - this.navigateForward(); }, navigateForward(){ - if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ + if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ // does it matter if the carId is different here? would we ever go forward if we didn't have glass match? -- it does this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {}); - return; } else { this.$refs.loadingModal.showModal(); navigateAfterSaveToHeritageFunnel(this.$route); - return; } }, validateZip(zip) { From 9e79accb3aa666b110cf8a9104c37ba4e78d2186 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 9 Jun 2022 16:45:36 -0400 Subject: [PATCH 4/4] Revert "Halfway through - highly notated fields" This reverts commit ece57def136c0c18dd507daf6ff32268f28dfa5e. --- src/layouts/vin-lookup/vin-lookup.vue | 56 ++++++++++++++------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 74eb2352e..9dc81f719 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -209,11 +209,9 @@ export default { return text; }, MatchedDifferentVehicleAlertBody(){ - const text = this.getCmsContent("MatchedDifferentVehicle", "BodyText") - .replaceAll("{custom:damage}", getDamageString()) - .replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year) - .replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make) - .replaceAll("{custom:vinlookupModel}", this.customAlertData?.vehicleInfo?.model); + const text = this.getCmsContent("MatchedDifferentVehicle", + "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}", + this.customAlertData?.vehicleInfo?.model); return text; }, @@ -289,43 +287,47 @@ export default { async forwardButtonAction() { const zipValidation = this.validateZip(this.zip); const vehicleLookup = this.lookupVehicle(this.vin); - // await responses below to let above service calls run asynchronously const zipValidationResponse = await zipValidation; const vehicleLookupResponse = await vehicleLookup.catch(() => { + this.vinNotFound = true; + this.$refs.funnelFooter.removeLoader(); + this.noServiceZip = false; return false; }); - // validations - if (!vehicleLookupResponse) { // vehicle response is null or false (it fails) - this.vinNotFound = true; // used to determine alerts that show + if (!vehicleLookupResponse) { + return; + } + if (!zipValidationResponse.data.isServiceable) { + this.customAlertData.zip = this.zip; this.$refs.funnelFooter.removeLoader(); - this.noServiceZip = false; // used to determine alerts that show - } else if (!zipValidationResponse.data.isServiceable) { // zip response shows zip is not serviceable - this.$refs.funnelFooter.removeLoader(); - this.noServiceZip = true; // used to determine alerts that show - this.invalidZip = this.zip; // used to populate the alert - } else if (vehicleLookupResponse.data.carId !== store.getters.vehicle.carId && // response does not match what was selected previously in the flow && - (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) // response does not match what was returned from a previous response - { - this.isCarIdDifferent = true; // because vehicleLookupResponse.data.carId !== store.getters.vehicle.carId - this.previouslyEnteredCarId = vehicleLookupResponse.data.carId; // tracks if car ID is different since last time we got a vehicle lookup response - this.noServiceZip = false; // used to determine alerts that show - this.customAlertData.vehicleInfo = vehicleLookupResponse.data; // populate the vehicle info alert info + this.noServiceZip = true; + this.invalidZip = this.zip; + return; + } + this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; + + if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) { + this.previouslyEnteredCarId = vehicleLookupResponse.data.carId; + this.noServiceZip = false; + this.customAlertData.vehicleInfo = vehicleLookupResponse.data; this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookupResponse.data.year} ${vehicleLookupResponse.data.make} ${vehicleLookupResponse.data.model}`); - this.isVinValid = true; //I don't think this line is needed + this.isVinValid = true; this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookupResponse.data.carId); this.$refs.funnelFooter.removeLoader(); - } else { - this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; // do I need this line? -- I do - this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data); - this.navigateForward(); + this.isCarIdDifferent = true; + return; } + this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data); + this.navigateForward(); }, navigateForward(){ - if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ // does it matter if the carId is different here? would we ever go forward if we didn't have glass match? -- it does + if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {}); + return; } else { this.$refs.loadingModal.showModal(); navigateAfterSaveToHeritageFunnel(this.$route); + return; } }, validateZip(zip) {