Able to pass in 'place' into fillInAddress function

This commit is contained in:
Katie 2022-06-03 15:30:56 -04:00
parent 6965f3febe
commit e181315e3f
3 changed files with 46 additions and 20 deletions

View file

@ -55,6 +55,7 @@ export function getMountOptions(mockData) {
mocks.$store = mockData.store; mocks.$store = mockData.store;
mocks.$router = mockData.router; mocks.$router = mockData.router;
mocks.$route = mockData.route; mocks.$route = mockData.route;
mocks.$loadScript = mockData.loadScript;
const global = { const global = {
mocks: mocks, mocks: mocks,

View file

@ -18,7 +18,7 @@ import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations"; import { storeMutations } from "@/constants/store-mutations";
import store from "@/store"; import store from "@/store";
let fillInAddressFunction; // let fillInAddressFunction;
// Mock our module for promises. // Mock our module for promises.
// jest.mock("@/helpers/layout-helper.js", () => ({ // jest.mock("@/helpers/layout-helper.js", () => ({
@ -84,14 +84,13 @@ describe("address-questions.vue", () => {
} }
}) })
// Act // 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); store.commit(storeMutations.RESET_STATE);
const resultingMountOptions = getMountOptions({ const resultingMountOptions = getMountOptions({
@ -110,7 +109,9 @@ function setupMocks({ mountOptions, autocompleteElement, isShallowMount = true }
// } // }
// }) // })
fillInAddressFunction = null; // fillInAddressFunction = null;
window.google = { window.google = {
maps: { maps: {
@ -121,9 +122,14 @@ function setupMocks({ mountOptions, autocompleteElement, isShallowMount = true }
// console.log(eventName) // console.log(eventName)
// console.log(callbackFunction) // console.log(callbackFunction)
// element.addEventListener(eventName, callbackFunction); // element.addEventListener(eventName, callbackFunction);
element.addEventListener(eventName, callbackFunction); function interceptedCallbackFunction(e) {
fillInAddressFunction = callbackFunction; console.log("intercepted")
// console.log("Hmm") console.log(e)
callbackFunction(e.detail);
}
// selectedPlace = "Woogly";
element.addEventListener(eventName, interceptedCallbackFunction);
// fillInAddressFunction = callbackFunction;
}), }),
removeListener: jest.fn(), removeListener: jest.fn(),
clearInstanceListeners: jest.fn() clearInstanceListeners: jest.fn()

View file

@ -185,11 +185,13 @@ export default ({
}, },
methods: { methods: {
setupAddressLookup() { setupAddressLookup() {
console.log("setup")
if (this.addressModel.streetAddress !== null & console.log(this.addressModel)
this.addressModel.city !== null & if (this.addressModel.streetAddress &&
this.addressModel.state !== null & this.addressModel.city &&
this.addressModel.zipCode !== null) { this.addressModel.state &&
this.addressModel.zipCode) {
console.log("AHHHH")
this.showAddressFields = true; this.showAddressFields = true;
return; return;
@ -202,6 +204,7 @@ export default ({
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`) this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
.then(() => { .then(() => {
console.log("A")
// Script is loaded, initialize the autocomplete textbox // Script is loaded, initialize the autocomplete textbox
const autocomplete = new window.google.maps.places.Autocomplete( const autocomplete = new window.google.maps.places.Autocomplete(
addressField1, addressField1,
@ -212,15 +215,25 @@ export default ({
} }
); );
console.log("B")
// Standard place_changed event handling // Standard place_changed event handling
const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress); const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
// Wrapping the addressField1 element in the Google Address Autocomplete object console.log("C")
// will cause "autocomplete='off'" which Chrome completely ignores. This event // console.log(addressField1)
// handler will set the value to something arbitrary so autofill doesn't work. // console.log(addressField1.id)
// https://stackoverflow.com/a/30976223 // console.log(autocomplete)
addressField1.addEventListener("focus", () => { // console.log(autocomplete.id)
addressField1.setAttribute("autocomplete", "do-not-autofill"); // 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 // Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField"); const streetAddressField = document.getElementById("streetAddressField");
@ -228,9 +241,10 @@ export default ({
if (autocompleteResultsContainer) { if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer); streetAddressField.appendChild(autocompleteResultsContainer);
} }
}) })
console.log("D")
addressField1.onchange = function() { addressField1.onchange = function() {
const hover = document.querySelector(".pac-container .pac-item:hover"); 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 // 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) { function fillInAddress(place) {
console.log("fillInAddress")
console.log(place)
if (!place) { if (!place) {
place = autocomplete.getPlace(); place = autocomplete.getPlace();
} }
@ -312,6 +329,8 @@ export default ({
pacContainer.remove(); pacContainer.remove();
} }
console.log("F")
}) })
.catch(() => { .catch(() => {
// Failed to fetch script // Failed to fetch script