Able to pass in 'place' into fillInAddress function
This commit is contained in:
parent
6965f3febe
commit
e181315e3f
3 changed files with 46 additions and 20 deletions
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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()
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue