location.lat is not a function - google-maps

Question

I'm trying to write a unit test for getAddress() a function that gets the address from a google.maps.places.autocomplete. To trigger the function I need to set a new place programmatically because the place_changed event handler calls getAddress(). When setting a place using the GUI location.lat is a function and when doing programmatically it is a property.
So to set a new place I do this:
let place = { "address_components": [{ "long_name": "Auckland", "short_name": "Auckland", "types": ["locality", "political"] }, { "long_name": "Auckland", "short_name": "Auckland", "types": ["administrative_area_level_2", "political"] }, { "long_name": "Auckland", "short_name": "Auckland", "types": ["administrative_area_level_1", "political"] }, { "long_name": "New Zealand", "short_name": "NZ", "types": ["country", "political"] }], "adr_address": "<span class=\"locality\">Auckland</span>, <span class=\"country-name\">New Zealand</span>", "formatted_address": "Auckland, New Zealand", "geometry": { "location": { "lat": -36.8484597, "lng": 174.76333150000005 }, "viewport": { "south": -37.0654751, "west": 174.44380160000003, "north": -36.660571, "east": 175.2871371 } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png", "id": "088418ddc17fef2513462d92dbee1355929b35ed", "name": "Auckland", "photos": [{ "height": 1836, "html_attributions": ["Johannes De Smedt"], "width": 3264 }, { "height": 2988, "html_attributions": ["Michal Panek"], "width": 5312 }, { "height": 3096, "html_attributions": ["Sakchhyam Malla"], "width": 4128 }, { "height": 3672, "html_attributions": ["Maria Bitunjac"], "width": 4896 }, { "height": 1836, "html_attributions": ["Carol Prichard"], "width": 3264 }, { "height": 3120, "html_attributions": ["Kovács György"], "width": 4208 }, { "height": 1504, "html_attributions": ["Martin Mobers"], "width": 2006 }, { "height": 492, "html_attributions": ["Priyesh Bhavsar"], "width": 1000 }, { "height": 2988, "html_attributions": ["Alvie Granito"], "width": 5312 }, { "height": 3265, "html_attributions": ["Simon Chen"], "width": 4898 }], "place_id": "ChIJ--acWvtHDW0RF5miQ2HvAAU", "reference": "CmRbAAAAEJGwhQ0l3O1QapXvbJ_s-xNVyh7UxBjd89D9Q860dfhb5Xh3xeY95UT1tIdugiTRhhZHT2qk_wzUqfd3wPS-vdX1pBljxcPtMUqhTtslzMyVccViA9ckk50Xv_cFWNXFEhCPkvW84Okrk2SJUpUDLGz8GhSEN1dm_0tJj4nEHYo0-bkRdOykYQ", "scope": "GOOGLE", "types": ["locality", "political"], "url": "https://maps.google.com/?q=Auckland,+New+Zealand&ftid=0x6d0d47fb5a9ce6fb:0x500ef6143a29917", "utc_offset": 780, "vicinity": "Auckland" }
testHost.areaPicker.autocomplete.set("place", place);
regarding my place variable I get this compile time error:
'"adr_address"' does not exist in type 'PlaceResult'.
However when I do this, for some reason the resulting place object's geometry.lat and geometry.lng are no longer functions but now they are properties.
But when I use the autocomplete in real scenarios they are functions. As they should be. How do I get them to be functions in my unit test? Full code below.
Unit test:
it('EmitAreaChanged_AreaEntered_AreaPlaceValueMakesItToHost', () => {
let place = { "address_components": [{ "long_name": "Auckland", "short_name": "Auckland", "types": ["locality", "political"] }, { "long_name": "Auckland", "short_name": "Auckland", "types": ["administrative_area_level_2", "political"] }, { "long_name": "Auckland", "short_name": "Auckland", "types": ["administrative_area_level_1", "political"] }, { "long_name": "New Zealand", "short_name": "NZ", "types": ["country", "political"] }], "adr_address": "<span class=\"locality\">Auckland</span>, <span class=\"country-name\">New Zealand</span>", "formatted_address": "Auckland, New Zealand", "geometry": { "location": { "lat": -36.8484597, "lng": 174.76333150000005 }, "viewport": { "south": -37.0654751, "west": 174.44380160000003, "north": -36.660571, "east": 175.2871371 } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png", "id": "088418ddc17fef2513462d92dbee1355929b35ed", "name": "Auckland", "photos": [{ "height": 1836, "html_attributions": ["Johannes De Smedt"], "width": 3264 }, { "height": 2988, "html_attributions": ["Michal Panek"], "width": 5312 }, { "height": 3096, "html_attributions": ["Sakchhyam Malla"], "width": 4128 }, { "height": 3672, "html_attributions": ["Maria Bitunjac"], "width": 4896 }, { "height": 1836, "html_attributions": ["Carol Prichard"], "width": 3264 }, { "height": 3120, "html_attributions": ["Kovács György"], "width": 4208 }, { "height": 1504, "html_attributions": ["Martin Mobers"], "width": 2006 }, { "height": 492, "html_attributions": ["Priyesh Bhavsar"], "width": 1000 }, { "height": 2988, "html_attributions": ["Alvie Granito"], "width": 5312 }, { "height": 3265, "html_attributions": ["Simon Chen"], "width": 4898 }], "place_id": "ChIJ--acWvtHDW0RF5miQ2HvAAU", "reference": "CmRbAAAAEJGwhQ0l3O1QapXvbJ_s-xNVyh7UxBjd89D9Q860dfhb5Xh3xeY95UT1tIdugiTRhhZHT2qk_wzUqfd3wPS-vdX1pBljxcPtMUqhTtslzMyVccViA9ckk50Xv_cFWNXFEhCPkvW84Okrk2SJUpUDLGz8GhSEN1dm_0tJj4nEHYo0-bkRdOykYQ", "scope": "GOOGLE", "types": ["locality", "political"], "url": "https://maps.google.com/?q=Auckland,+New+Zealand&ftid=0x6d0d47fb5a9ce6fb:0x500ef6143a29917", "utc_offset": 780, "vicinity": "Auckland" }
testHost.areaPicker.autocomplete.set("place", place);
expect(testHost.placeValue).toBe(true);
});
relevant part of my component under test that uses a google autocomplete:
ngAfterViewInit() {
this.autocomplete = new google.maps.places.Autocomplete(
<HTMLInputElement>this.areaInput.nativeElement, this._options);
this.autocomplete.addListener('place_changed', () => {
this.getAddress(this.autocomplete)
});
this.areaInput.nativeElement.setCustomValidity("");
}
public getAddress(autocomplete: google.maps.places.Autocomplete): void {
if (this._canGetAddress) {
var place: google.maps.places.PlaceResult = autocomplete.getPlace();
this.address = place['formatted_address'];
var location = place['geometry']['location'];
var lat = location.lat();
var lng = location.lng();
this.onAreaChanged.emit({areaEntered: true, place: place});
this.areaInput.nativeElement.setCustomValidity("");
}
}
Here is my code I want to test:
public getAddress(autocomplete: google.maps.places.Autocomplete): void {
if (this._canGetAddress) {
var place: google.maps.places.PlaceResult = autocomplete.getPlace();
this.address = place['formatted_address'];
var location = place['geometry']['location'];
var lat = location.lat();
var lng = location.lng();
this.onAreaChanged.emit({areaEntered: true, place: place});
this.areaInput.nativeElement.setCustomValidity("");
}
}

Answer 1

The location needs to be a google.maps.LatLng object.