diff --git a/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap b/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap
index 74a1d74d..87f5298e 100644
--- a/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap
+++ b/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap
@@ -20,5 +20,6 @@ Object {
],
},
},
+ "infoWindow": null,
}
`;
diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js
index b26d36a2..3b4b9d37 100644
--- a/src/iss-components/google-map/google-map.spec.js
+++ b/src/iss-components/google-map/google-map.spec.js
@@ -21,12 +21,19 @@ const mockGeocoderInstance2 = {
};
const mockGeocoder = jest.fn(() => (mockGeocoderInstance1));
-const mockAdvancedMarkerElement = jest.fn();
+const mockAdvancedMarkerInstance = {
+ addListener: jest.fn()
+};
+
+const mockAdvancedMarkerElement = jest.fn(() => (mockAdvancedMarkerInstance));
+const mockPinElement = jest.fn();
+const mockInfoWindow = jest.fn();
const mockImportLibrary = jest.fn().mockImplementation(() => (Promise.resolve({
Map: mockMap,
Geocoder: mockGeocoder,
- AdvancedMarkerElement: mockAdvancedMarkerElement
+ AdvancedMarkerElement: mockAdvancedMarkerElement,
+ PinElement: mockPinElement
})));
const mockExtend = jest.fn();
@@ -36,7 +43,8 @@ const setupGoogleMock = () => {
global.window.google = {
maps: {
importLibrary: mockImportLibrary,
- LatLngBounds: jest.fn(() => (mockLatLngBound))
+ LatLngBounds: jest.fn(() => (mockLatLngBound)),
+ InfoWindow: mockInfoWindow
}
};
};
@@ -46,6 +54,7 @@ beforeEach(() => {
mockMap.mockClear();
mockGeocoder.mockClear();
mockAdvancedMarkerElement.mockClear();
+ mockPinElement.mockClear();
// clear methods
mockExtend.mockClear();
@@ -150,7 +159,13 @@ describe('Google Map', () => {
const zipCode = '00882';
const [address1, address2, position1, position2] = ['a1', 'a2', 'p1', 'p2'];
- const addresses = [address1, address2];
+ const providers = [
+ {
+ fullAddress: address1
+ },
+ {
+ fullAddress: address2
+ }];
mockGeocode.mockImplementation((obj) => {
let result = {};
if (obj.address.includes(zipCode)) {
@@ -171,7 +186,7 @@ describe('Google Map', () => {
return Promise.resolve(result);
});
- const propsData = { addresses, zipCode };
+ const propsData = { providers, zipCode };
const { wrapper } = getMountedComponent({}, {}, propsData);
await awaitingSetupTicks(wrapper);
@@ -198,8 +213,6 @@ describe('Google Map', () => {
test('watch addresses creates map with expected markers', async () => {
// Arrange
const zipCode = '00882';
- const { wrapper } = getMountedComponent({}, { zipCode });
- await awaitingSetupTicks(wrapper);
const mockGetCenter = jest.fn();
const mockNorthEast = jest.fn();
@@ -238,10 +251,18 @@ describe('Google Map', () => {
}
return Promise.resolve(result);
});
- const newAddresses = [address1, address2];
+ const providers = [
+ {
+ fullAddress: address1
+ },
+ {
+ fullAddress: address2
+ }];
// Act
- await wrapper.vm.$options.watch.addresses.call(wrapper.vm, newAddresses);
+ const { wrapper } = getMountedComponent({}, { zipCode });
+ await awaitingSetupTicks(wrapper);
+ await wrapper.vm.$options.watch.providers.call(wrapper.vm, providers);
await awaitingSetupTicks(wrapper);
// Assert
@@ -260,9 +281,9 @@ describe('Google Map', () => {
expect(mockExtend).toBeCalledTimes(6);
expect(mockFitBounds).toBeCalledTimes(2);
- expect(mockGetCenter).toBeCalledTimes(1);
- expect(mockNorthEast).toBeCalledTimes(1);
- expect(mockSouthWest).toBeCalledTimes(1);
+ expect(mockGetCenter).toBeCalledTimes(2);
+ expect(mockNorthEast).toBeCalledTimes(2);
+ expect(mockSouthWest).toBeCalledTimes(2);
});
describe('method', () => {
test('getMap calls map constructor with expected parameters', async () => {
@@ -295,6 +316,15 @@ describe('Google Map', () => {
await awaitingSetupTicks(wrapper);
const numberOfExtendCallsDuringMount = 2;
+ mockGeocode.mockImplementation((obj) => {
+ const result = {
+ results: [
+ { geometry: { location: 'p1' } }
+ ]
+ };
+ return Promise.resolve(result);
+ });
+
// Act
const result = wrapper.vm.getBounds(locations);
@@ -362,7 +392,7 @@ describe('Google Map', () => {
expect(mockGeocode).toHaveBeenCalledTimes(numberOfCallsFromMount);
// Act
- await wrapper.vm.getLocationsFromAddresses(addresses);
+ await wrapper.vm.getLocationsFromAddresses(addresses?.map((a) => ({fullAddress: a})));
await wrapper.vm.$nextTick();
// Assert
@@ -374,7 +404,7 @@ describe('Google Map', () => {
// Arrange
const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
- const addresses = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'];
+ const addresses = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'].map((a) => ({fullAddress: a}));
mockGeocode.mockImplementationOnce(() => null)
.mockImplementationOnce(() => ({ results: null }))
.mockImplementationOnce(() => ({ results: [] }))
@@ -402,7 +432,7 @@ describe('Google Map', () => {
const expectedResult = ['some value', 'some other value'];
// Act
- const result = await wrapper.vm.getLocationsFromAddresses(addresses);
+ const result = (await wrapper.vm.getLocationsFromAddresses(addresses)).map(a => a.position);
// Assert
expect(result.length).toBe(2);
@@ -477,7 +507,7 @@ describe('Google Map', () => {
Promise.resolve(obj.address.includes(zipCode)
? zipCodeGeocodeResult
: shopGeocodeResult));
- const addresses = ['a1', 'a2'];
+ const addresses = [{fullAddress:'a1'}, {fullAddress:'a2'}];
const { wrapper } = getMountedComponent({}, { zipCode });
await awaitingSetupTicks(wrapper);
diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue
index 9372d6ae..1cf5840f 100644
--- a/src/iss-components/google-map/google-map.vue
+++ b/src/iss-components/google-map/google-map.vue
@@ -25,11 +25,11 @@ export default {
},
watch: {
async providers(newProviders) {
- this.createMapWithMarkersForAddresses(newProviders);
+ await this.createMapWithMarkersForAddresses(newProviders);
}
},
- beforeMount() {
- this.createMapWithMarkersForAddresses(this.providers);
+ async beforeMount() {
+ await this.createMapWithMarkersForAddresses(this.providers);
},
methods: {
async getMap(center) {
@@ -77,9 +77,7 @@ export default {
Get directions
`;
- const infoWindow = new window.google.maps.InfoWindow({
- content
- });
+ const infoWindow = new window.google.maps.InfoWindow({ content });
marker.addListener('click', () => {
this.infoWindow?.close();
@@ -96,15 +94,15 @@ export default {
const geocodeShopAddressPromises = providers?.map((provider) => this.geocoder.geocode({ address: provider.fullAddress })) ?? [];
const geocodeShopAddressResults = await Promise.all(geocodeShopAddressPromises);
- return providers.map((provider, index) => {
- const { results } = geocodeShopAddressResults[index];
+ return providers?.map((provider, index) => {
+ const results = geocodeShopAddressResults[index]?.results;
let position = null;
if (results && results.length > 0) {
position = results[0].geometry?.location;
}
return { ...provider, position };
- }).filter((provider) => provider.position != null);
+ }).filter((provider) => provider.position != null) ?? [];
},
async getBoundsFromAddress(address) {
await this.setGeocoder();
@@ -116,7 +114,7 @@ export default {
async createMapWithMarkersForAddresses(providers) {
const providerPositions = await this.getLocationsFromAddresses(providers);
const zipBounds = await this.getBoundsFromAddress(this.zipCodeAddress);
- const map = await this.getMap(zipBounds.getCenter());
+ const map = await this.getMap(zipBounds?.getCenter());
await this.addMarkersToMap(map, providerPositions);