diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 07632f5e5..f9b4d551b 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -55,6 +55,7 @@ export function getMountOptions(mockData) { mocks.$store = mockData.store; mocks.$router = mockData.router; mocks.$route = mockData.route; + mocks.$loadScript = mockData.loadScript; const global = { mocks: mocks, diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js index 2db456aa8..ec50cb30f 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js @@ -18,7 +18,7 @@ import { storeActions } from "@/constants/store-actions"; import { storeMutations } from "@/constants/store-mutations"; import store from "@/store"; -let fillInAddressFunction; +// let fillInAddressFunction; // Mock our module for promises. // jest.mock("@/helpers/layout-helper.js", () => ({ @@ -84,14 +84,13 @@ describe("address-questions.vue", () => { } }) - // Act - autocompleteElement.dispatchEvent(new CustomEvent("place_changed", { bubbles: true })); + autocompleteElement.dispatchEvent(new CustomEvent("place_changed", { detail: "boogly" })); }) }); }); -function setupMocks({ mountOptions, autocompleteElement, isShallowMount = true }) { +function setupMocks({ mountOptions, selectedPlace, isShallowMount = true }) { store.commit(storeMutations.RESET_STATE); const resultingMountOptions = getMountOptions({ @@ -110,7 +109,9 @@ function setupMocks({ mountOptions, autocompleteElement, isShallowMount = true } // } // }) - fillInAddressFunction = null; + // fillInAddressFunction = null; + + window.google = { maps: { @@ -121,9 +122,14 @@ function setupMocks({ mountOptions, autocompleteElement, isShallowMount = true } // console.log(eventName) // console.log(callbackFunction) // element.addEventListener(eventName, callbackFunction); - element.addEventListener(eventName, callbackFunction); - fillInAddressFunction = callbackFunction; - // console.log("Hmm") + function interceptedCallbackFunction(e) { + console.log("intercepted") + console.log(e) + callbackFunction(e.detail); + } + // selectedPlace = "Woogly"; + element.addEventListener(eventName, interceptedCallbackFunction); + // fillInAddressFunction = callbackFunction; }), removeListener: jest.fn(), clearInstanceListeners: jest.fn() diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index f188cf214..4a61da56b 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -185,11 +185,13 @@ export default ({ }, methods: { setupAddressLookup() { - - if (this.addressModel.streetAddress !== null & - this.addressModel.city !== null & - this.addressModel.state !== null & - this.addressModel.zipCode !== null) { + console.log("setup") + console.log(this.addressModel) + if (this.addressModel.streetAddress && + this.addressModel.city && + this.addressModel.state && + this.addressModel.zipCode) { + console.log("AHHHH") this.showAddressFields = true; return; @@ -202,6 +204,7 @@ export default ({ this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`) .then(() => { + console.log("A") // Script is loaded, initialize the autocomplete textbox const autocomplete = new window.google.maps.places.Autocomplete( addressField1, @@ -212,15 +215,25 @@ export default ({ } ); + console.log("B") // Standard place_changed event handling const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress); - // Wrapping the addressField1 element in the Google Address Autocomplete object - // will cause "autocomplete='off'" which Chrome completely ignores. This event - // handler will set the value to something arbitrary so autofill doesn't work. - // https://stackoverflow.com/a/30976223 - addressField1.addEventListener("focus", () => { - addressField1.setAttribute("autocomplete", "do-not-autofill"); + console.log("C") + // console.log(addressField1) + // console.log(addressField1.id) + // console.log(autocomplete) + // console.log(autocomplete.id) + // console.log(addressField1 == autocomplete) + + + + // Wrapping the addressField1 element in the Google Address Autocomplete object + // will cause "autocomplete='off'" which Chrome completely ignores. This event + // handler will set the value to something arbitrary so autofill doesn't work. + // https://stackoverflow.com/a/30976223 + addressField1.addEventListener("focus", () => { + addressField1.setAttribute("autocomplete", "do-not-autofill"); // Make place results box stick to the input on scroll const streetAddressField = document.getElementById("streetAddressField"); @@ -228,9 +241,10 @@ export default ({ if (autocompleteResultsContainer) { streetAddressField.appendChild(autocompleteResultsContainer); } - }) + console.log("D") + addressField1.onchange = function() { const hover = document.querySelector(".pac-container .pac-item:hover"); // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place @@ -260,7 +274,10 @@ export default ({ } }; + console.log("E") function fillInAddress(place) { + console.log("fillInAddress") + console.log(place) if (!place) { place = autocomplete.getPlace(); } @@ -312,6 +329,8 @@ export default ({ pacContainer.remove(); } + + console.log("F") }) .catch(() => { // Failed to fetch script