SSR-776 Fix unit test
This commit is contained in:
parent
4aa6c4ed64
commit
266ebc4e1c
3 changed files with 55 additions and 26 deletions
|
|
@ -20,5 +20,6 @@ Object {
|
|||
],
|
||||
},
|
||||
},
|
||||
"infoWindow": null,
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue