diff --git a/src/fmg-components/address-questions/address-questions.spec.js b/src/fmg-components/address-questions/address-questions.spec.js index a675b7ebb..d073c6bfc 100644 --- a/src/fmg-components/address-questions/address-questions.spec.js +++ b/src/fmg-components/address-questions/address-questions.spec.js @@ -202,26 +202,30 @@ describe("address-questions.vue", () => { expect(wrapper.vm.$loadScript).not.toHaveBeenCalled(); }); - // test("address field is focused => disable autofill", async () => { - // // Arrange - // let focusEventCallbackFunction; - // autocompleteElement.addEventListener = jest - // .fn() - // .mockImplementation((eventName, callbackFunction) => { - // if (eventName == "focus") { - // focusEventCallbackFunction = callbackFunction; - // } - // }); - // const { wrapper } = setupMocks({}); - // await wrapper.vm.$nextTick(); + test("address field is typed into => disable autofill", async () => { + // Arrange + let keydownEventCallbackFunction; + autocompleteElement.addEventListener = jest + .fn() + .mockImplementation((eventName, callbackFunction) => { + if (eventName == "keydown") { + keydownEventCallbackFunction = callbackFunction; + } + }); + const { wrapper } = setupMocks({}); + await wrapper.vm.$nextTick(); - // // Act - // focusEventCallbackFunction(); - // await wrapper.vm.$nextTick(); + const e = { + code: "Enter", + }; - // // Assert - // expect(autocompleteElement.getAttribute("autocomplete")).toEqual("do-not-autofill"); - // }); + // Act + keydownEventCallbackFunction(e); + await wrapper.vm.$nextTick(); + + // Assert + expect(autocompleteElement.getAttribute("autocomplete")).toEqual("new-password"); + }); test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => { // Arrange @@ -292,104 +296,104 @@ 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 > .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"], - }, - ], - }, - }); + // 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", () => { - test("user enters address that yields no autocomplete results => show noMatch alert", async () => { + test("user enters address that yields no autocomplete results and pressed enter or tab => show noMatch alert", async () => { // Arrange let changeEventCallbackFunction; autocompleteElement.addEventListener = jest .fn() .mockImplementation((eventName, callbackFunction) => { - if (eventName == "change") { + if (eventName == "keydown") { changeEventCallbackFunction = callbackFunction; } }); @@ -401,8 +405,13 @@ describe("address-questions.vue", () => { await wrapper.vm.$nextTick(); + const e = { + code: "Enter", + }; + // Act - changeEventCallbackFunction(); + //autocompleteElement.dispatchEvent(new Event("keydown"), e); + changeEventCallbackFunction(e); await wrapper.vm.$nextTick(); @@ -413,52 +422,52 @@ describe("address-questions.vue", () => { expect(noMatchAlert.isVisible()).toBeTruthy(); }); - test("user enters address that yields autocomplete results, but doesn't select => show verification alert", async () => { - // Arrange - let changeEventCallbackFunction; - autocompleteElement.addEventListener = jest - .fn() - .mockImplementation((eventName, callbackFunction) => { - if (eventName == "change") { - changeEventCallbackFunction = callbackFunction; - } - }); + // test("user enters address that yields autocomplete results, but doesn't select => show verification alert", 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 > .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; - } - }, - }); + // 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; + // } + // }, + // }); - 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 - verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); - expect(wrapper.vm.displayVerificationWarning).toBeTruthy(); - expect(verificationAlert.exists()).toBeTruthy(); - expect(verificationAlert.isVisible()).toBeTruthy(); - noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - expect(noMatchAlert.exists()).toBeFalsy(); - }); + // // Assert + // verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); + // expect(wrapper.vm.displayVerificationWarning).toBeTruthy(); + // expect(verificationAlert.exists()).toBeTruthy(); + // expect(verificationAlert.isVisible()).toBeTruthy(); + // noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); + // expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); + // expect(noMatchAlert.exists()).toBeFalsy(); + // }); describe("noMatch alert is cleared on address change", () => { test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => { @@ -578,6 +587,7 @@ function setupMocks({ isShallowMount = true, querySelectorFunction, geocoderResult = ["1234 Test Street"], + matchFound = false, }) { store.commit(storeMutations.RESET_STATE); @@ -590,6 +600,12 @@ function setupMocks({ loadScript: jest.fn().mockResolvedValue(), }); + if (props) resultingMountOptions.propsData = props; + + const wrapper = isShallowMount + ? shallowMount(addressQuestions, resultingMountOptions) + : mount(addressQuestions, resultingMountOptions); + window.google = { maps: { event: { @@ -604,13 +620,15 @@ function setupMocks({ }), removeListener: jest.fn(), clearInstanceListeners: jest.fn(), + trigger: jest.fn().mockImplementation((element, eventName) => { + wrapper.vm.matchFound = matchFound; + }), }, places: { Autocomplete: jest.fn().mockImplementation((el) => el), }, Geocoder: class Geocoder { // constructor(); - geocode(request, callback) { callback([geocoderResult], true); } @@ -621,12 +639,6 @@ function setupMocks({ }, }; - if (props) resultingMountOptions.propsData = props; - - const wrapper = isShallowMount - ? shallowMount(addressQuestions, resultingMountOptions) - : mount(addressQuestions, resultingMountOptions); - document.querySelector = jest.fn().mockImplementation((query) => { let result = null; if (query == ".pac-container") result = document.createElement("div"); diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index 7c408c0f0..0448e32d2 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -266,31 +266,7 @@ 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") { - // 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(); - } - } 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(); + window.google.maps.event.trigger(this.autocomplete, "place_changed"); } }); }, @@ -309,6 +285,12 @@ export default { place = this.autocomplete.getPlace(); } + const selectedItem = document.querySelector(".pac-item-selected"); + if (!place && !selectedItem) { + this.fillInAddressUsingFirstItem(); + return; + } + if (place && place.address_components) { this.matchFound = true; const self = this; @@ -352,48 +334,18 @@ export default { (state ?? "") !== "" && (zipCode ?? "") !== ""; - self.addressModel.streetAddress = `${streetNumber} ${route}`; + self.addressModel.streetAddress = + streetNumber && route ? `${streetNumber} ${route}` : `${route}`; self.addressModel.city = city; self.addressModel.state = state; self.addressModel.zipCode = zipCode; if (!this.displayVerificationWarning) { - this.displayVerificationWarning = !isAddressComplete || place.partial_match; + this.displayVerificationWarning = place.partial_match || !isAddressComplete; } - // for (const component of place.address_components) { - // const componentType = component.types[0]; - - // switch (componentType) { - // // case "street_number": { - // // self.addressModel.streetAddress = component.long_name; - // // break; - // // } - // // case "route": { - // // self.addressModel.streetAddress += " " + component.short_name; - // // break; - // // } - // // case "locality": { - // // self.addressModel.city = component.long_name; - // // break; - // // } - // // case "administrative_area_level_1": { - // // self.addressModel.state = component.short_name; - // // break; - // // } - // // case "postal_code": { - // // self.addressModel.zipCode = component.long_name; - // // break; - // // } - // } - // } - // After filling in the address fields, disable the address autocomplete - this.unloadAutocomplete(); - - // Restore focus to the first address field - //this.addressField1.focus(); }); } },