SSR-776 Fix unit test

This commit is contained in:
Josh Dassinger 2024-08-29 15:37:03 -05:00
parent 4aa6c4ed64
commit 266ebc4e1c
3 changed files with 55 additions and 26 deletions

View file

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

View file

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

View file

@ -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 {
<br /> <a href="${directionsUrl}" target="_blank">Get directions</a>
</div>`;
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);