diff --git a/src/fmg-components/address-questions/address-questions.spec.js b/src/fmg-components/address-questions/address-questions.spec.js index 829442783..a675b7ebb 100644 --- a/src/fmg-components/address-questions/address-questions.spec.js +++ b/src/fmg-components/address-questions/address-questions.spec.js @@ -292,90 +292,94 @@ describe("address-questions.vue", () => { }); }); - // test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => { - // // Arrange - // let changeEventCallbackFunction; - // autocompleteElement.addEventListener = jest - // .fn() - // .mockImplementation((eventName, callbackFunction) => { - // if (eventName == "change") { - // changeEventCallbackFunction = callbackFunction; - // } - // }); + test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => { + // Arrange + let changeEventCallbackFunction; + autocompleteElement.addEventListener = jest + .fn() + .mockImplementation((eventName, callbackFunction) => { + if (eventName == "change") { + changeEventCallbackFunction = callbackFunction; + } + }); - // const { wrapper } = setupMocks({ - // querySelectorFunction: function (query) { - // if (query == ".pac-container .pac-item") { - // let element = document.createElement("div"); - // element.textContent = "123 Test Street"; - // return element; - // } - // }, - // geocoderResult: { - // address_components: [ - // { - // long_name: "1234", - // short_name: "1234", - // types: ["street_number"], - // }, - // { - // long_name: "Test Road", - // short_name: "Test Road", - // types: ["route"], - // }, - // { - // long_name: "East Columbus", - // short_name: "Columbus", - // types: ["neighborhood", "political"], - // }, - // { - // long_name: "Columbus", - // short_name: "Columbus", - // types: ["locality", "political"], - // }, - // { - // long_name: "Franklin County", - // short_name: "Franklin County", - // types: ["administrative_area_level_2", "political"], - // }, - // { - // long_name: "Ohio", - // short_name: "OH", - // types: ["administrative_area_level_1", "political"], - // }, - // { - // long_name: "United States", - // short_name: "US", - // types: ["country", "political"], - // }, - // { - // long_name: "43215", - // short_name: "43215", - // types: ["postal_code"], - // }, - // ], - // }, - // }); + const { wrapper } = setupMocks({ + querySelectorFunction: function (query) { + if (query == ".pac-container .pac-item > .pac-item-query") { + let element = document.createElement("div"); + element.textContent = "123 Test Street"; + return element; + } else if (query == ".pac-container .pac-item > span:nth-child(3)") { + let element = document.createElement("div"); + element.textContent = "Columbus, OH 43230"; + return element; + } + }, + geocoderResult: { + address_components: [ + { + long_name: "1234", + short_name: "1234", + types: ["street_number"], + }, + { + long_name: "Test Road", + short_name: "Test Road", + types: ["route"], + }, + { + long_name: "East Columbus", + short_name: "Columbus", + types: ["neighborhood", "political"], + }, + { + long_name: "Columbus", + short_name: "Columbus", + types: ["locality", "political"], + }, + { + long_name: "Franklin County", + short_name: "Franklin County", + types: ["administrative_area_level_2", "political"], + }, + { + long_name: "Ohio", + short_name: "OH", + types: ["administrative_area_level_1", "political"], + }, + { + long_name: "United States", + short_name: "US", + types: ["country", "political"], + }, + { + long_name: "43215", + short_name: "43215", + types: ["postal_code"], + }, + ], + }, + }); - // let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - // let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); - // expect(noMatchAlert.exists()).toBeFalsy(); - // expect(verificationAlert.exists()).toBeFalsy(); + let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); + let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); + expect(noMatchAlert.exists()).toBeFalsy(); + expect(verificationAlert.exists()).toBeFalsy(); - // await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); - // // Act - // changeEventCallbackFunction(); + // Act + changeEventCallbackFunction(); - // await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); - // // Assert - // const addressModel = wrapper.vm.addressModel; - // expect(addressModel.streetAddress).toEqual("1234 Test Road"); - // expect(addressModel.city).toEqual("Columbus"); - // expect(addressModel.state).toEqual("OH"); - // expect(addressModel.zipCode).toEqual("43215"); - // }); + // Assert + const addressModel = wrapper.vm.addressModel; + expect(addressModel.streetAddress).toEqual("1234 Test Road"); + expect(addressModel.city).toEqual("Columbus"); + expect(addressModel.state).toEqual("OH"); + expect(addressModel.zipCode).toEqual("43215"); + }); }); describe("alerts", () => { @@ -422,10 +426,14 @@ describe("address-questions.vue", () => { const { wrapper } = setupMocks({ querySelectorFunction: function (query) { - if (query == ".pac-container .pac-item") { + if (query == ".pac-container .pac-item > .pac-item-query") { let element = document.createElement("div"); element.textContent = "123 Test Street"; return element; + } else if (query == ".pac-container .pac-item > span:nth-child(3)") { + let element = document.createElement("div"); + element.textContent = "Columbus, OH 43230"; + return element; } }, }); diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index edeedf718..7c408c0f0 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -266,20 +266,33 @@ export default { // When either of the two enter keys or the tab key are pressed if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { - const firstNameField = document.getElementById("firstName"); - // Grab the selected item const selectedItem = document.querySelector(".pac-item-selected"); if (selectedItem == null) { // If there is no selected item, fill-in the address using first item from the list. this.fillInAddressUsingFirstItem(); - firstNameField.focus(); } } else { return; } }); + + this.addressField1.addEventListener("change", () => { + // If a match has been previously attempted then do nothing + if (this.matchFound !== null) { + return; + } + + // Get the address that the user clicked on (if any) + const clickedAddress = document.querySelector(".pac-container .pac-item:hover"); + + // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) + if (clickedAddress === null) { + // Fill-in the address using first item in the list. + this.fillInAddressUsingFirstItem(); + } + }); }, findAddressComponentByType(place, componentName, componentLength) { const component = place.address_components.find((component) => @@ -388,7 +401,6 @@ export default { // Fill-in the address using first item in the list. const item = document.querySelector(".pac-container .pac-item > .pac-item-query"); const item2 = document.querySelector(".pac-container .pac-item > span:nth-child(3)"); - //#streetAddressField > div.pac-container.pac-logo > div:nth-child(1) > span:nth-child(3) if (item != null) { let firstResult = `${item.textContent}, ${item2.textContent}`; @@ -401,10 +413,8 @@ export default { }, function (results, status) { if (status === window.google.maps.GeocoderStatus.OK) { - console.log(results[0]); - - self.fillInAddress(results[0]); self.displayVerificationWarning = true; + self.fillInAddress(results[0]); } } );