SSR-776 Fix unit test

src/iss-components/google-map/__snapshots__/google-map.spec.js.snap

@@ -20,5 +20,6 @@ Object {
       ],
     },
   },
+  "infoWindow": null,
 }
 `;

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(mockGetCenter).toBeCalledTimes(2);
-        expect(mockNorthEast).toBeCalledTimes(1);
+        expect(mockNorthEast).toBeCalledTimes(2);
-        expect(mockSouthWest).toBeCalledTimes(1);
+        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);
 

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() {
+    async beforeMount() {
-        this.createMapWithMarkersForAddresses(this.providers);
+        await this.createMapWithMarkersForAddresses(this.providers);
     },
     methods: {
         async getMap(center) {
@@ -77,9 +77,7 @@ export default {
                                 <br /> <a href="${directionsUrl}" target="_blank">Get directions</a>
                              </div>`;
 
-            const infoWindow = new window.google.maps.InfoWindow({
+            const infoWindow = new window.google.maps.InfoWindow({ content });
-                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) => {
+            return providers?.map((provider, index) => {
-                const { results } = geocodeShopAddressResults[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);