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);