jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updating map tests

Browse source
This commit is contained in:
Michaela Brydon 2023-11-27 12:27:30 -05:00
parent 0606e9cc27
commit 509fee2fa9
3 changed files with 181 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,22 @@
exports[`Google Map should render expected initial data 1`] = ` exports[`Google Map should render expected initial data 1`] = `
Object { Object {
"country": "USA", "country": "USA",
"geocoder": null, "geocoder": Object {
"geocode": [MockFunction] {
"calls": Array [
Array [
Object {
"address": " USA",
},
],
],
"results": Array [
Object {
"type": "return",
"value": undefined,
},
],
},
},
} }
`; `;

205
src/iss-components/google-map/google-map.spec.js
View file

@ -1,6 +1,11 @@
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { createTestingPinia } from '@pinia/testing';
import googleMap from '@/iss-components/google-map/google-map.vue'; import googleMap from '@/iss-components/google-map/google-map.vue';
// Supporting Files
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { useMainStore } from '@/store';
const mockFitBounds = jest.fn(); const mockFitBounds = jest.fn();
const mockMapInstance = { const mockMapInstance = {
fitBounds: mockFitBounds fitBounds: mockFitBounds
@ -8,10 +13,13 @@ const mockMapInstance = {
const mockMap = jest.fn(() => mockMapInstance); const mockMap = jest.fn(() => mockMapInstance);
const mockGeocode = jest.fn(); const mockGeocode = jest.fn();
const mockGeocoderInstance = { const mockGeocoderInstance1 = {
geocode: mockGeocode geocode: mockGeocode
}; };
const mockGeocoder = jest.fn(() => (mockGeocoderInstance)); const mockGeocoderInstance2 = {
geocode: mockGeocode
};
const mockGeocoder = jest.fn(() => (mockGeocoderInstance1));
const mockAdvancedMarkerElement = jest.fn(); const mockAdvancedMarkerElement = jest.fn();
@ -47,20 +55,52 @@ beforeEach(() => {
setupGoogleMock(); setupGoogleMock();
}); });
function getMountedComponent(mainInitialState = {}, initialData = {}, propsData = {}) {
const mountOptions = getMountOptions({
router: {
navigate: jest.fn()
}
});
const testingPinia = createTestingPinia({
initialState: {
main: mainInitialState
}
});
useMainStore(testingPinia);
mountOptions.global.plugins = [testingPinia];
mountOptions.data = () => (initialData);
mountOptions.propsData = propsData;
const wrapper = shallowMount(googleMap, mountOptions);
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
wrapper.vm.setCmsContent = jest.fn();
return { wrapper };
}
async function awaitingSetupTicks(wrapper) {
for (let i = 0; i < 11; i++) {
// eslint-disable-next-line no-await-in-loop
await wrapper.vm.$nextTick();
}
}
describe('Google Map', () => { describe('Google Map', () => {
describe('should render', () => { describe('should render', () => {
test('expected initial data', async () => { test('expected initial data', async () => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await wrapper.vm.$nextTick(); await awaitingSetupTicks(wrapper);
// Assert // Assert
expect(wrapper.vm.$data).toMatchSnapshot(); expect(wrapper.vm.$data).toMatchSnapshot();
}); });
test('map', () => { test('map', async () => {
// Arrange // Arrange
const mapReference = '#map'; const mapReference = '#map';
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
// Act // Act
const map = wrapper.find(mapReference); const map = wrapper.find(mapReference);
@ -78,8 +118,8 @@ describe('Google Map', () => {
'given that zipcode set to "%p", computed zipCodeAddress should return "%p"', 'given that zipcode set to "%p", computed zipCodeAddress should return "%p"',
async (zipCode, expected) => { async (zipCode, expected) => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const { wrapper } = getMountedComponent({}, {}, { zipCode });
await wrapper.setData({ zipCode }); await awaitingSetupTicks(wrapper);
// Act // Act
const result = wrapper.vm.zipCodeAddress; const result = wrapper.vm.zipCodeAddress;
@ -88,11 +128,78 @@ describe('Google Map', () => {
expect(result).toBe(expected); expect(result).toBe(expected);
} }
); );
test('before mount addresses creates map with expected markers', async () => {
// Arrange
const mockGetCenter = jest.fn();
const mockNorthEast = jest.fn();
const mockSouthWest = jest.fn();
const zipCodeGeocodeResult = {
results: [
{
geometry: {
bounds:
{
getCenter: mockGetCenter,
getNorthEast: mockNorthEast,
getSouthWest: mockSouthWest
}
}
}
]
};
const zipCode = '00882';
const [address1, address2, position1, position2] = ['a1', 'a2', 'p1', 'p2'];
const addresses = [address1, address2];
mockGeocode.mockImplementation((obj) => {
let result = {};
if (obj.address.includes(zipCode)) {
result = zipCodeGeocodeResult;
} else if (obj.address === address1) {
result = {
results: [
{ geometry: { location: position1 } }
]
};
} else if (obj.address === address2) {
result = {
results: [
{ geometry: { location: position2 } }
]
};
}
return Promise.resolve(result);
});
const propsData = { addresses, zipCode };
const { wrapper } = getMountedComponent({}, {}, propsData);
await awaitingSetupTicks(wrapper);
// Assert
expect(mockMap).toBeCalledTimes(1);
expect(mockAdvancedMarkerElement).toBeCalledTimes(2);
expect(mockAdvancedMarkerElement).toBeCalledWith(expect.objectContaining({
map: expect.anything(),
position: position1
}));
expect(mockAdvancedMarkerElement).toBeCalledWith(expect.objectContaining({
map: expect.anything(),
position: position2
}));
expect(mockGeocoder).toBeCalledTimes(1);
expect(mockExtend).toBeCalledTimes(4);
expect(mockFitBounds).toBeCalledTimes(1);
expect(mockGetCenter).toBeCalledTimes(1);
expect(mockNorthEast).toBeCalledTimes(1);
expect(mockSouthWest).toBeCalledTimes(1);
});
test('watch addresses creates map with expected markers', async () => { test('watch addresses creates map with expected markers', async () => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {});
const zipCode = '00882'; const zipCode = '00882';
await wrapper.setData({ zipCode }); const { wrapper } = getMountedComponent({}, { zipCode });
await awaitingSetupTicks(wrapper);
const mockGetCenter = jest.fn(); const mockGetCenter = jest.fn();
const mockNorthEast = jest.fn(); const mockNorthEast = jest.fn();
@ -135,14 +242,10 @@ describe('Google Map', () => {
// Act // Act
await wrapper.vm.$options.watch.addresses.call(wrapper.vm, newAddresses); await wrapper.vm.$options.watch.addresses.call(wrapper.vm, newAddresses);
await awaitingSetupTicks(wrapper);
for (let i = 0; i < 11; i++) {
// eslint-disable-next-line no-await-in-loop
await wrapper.vm.$nextTick();
}
// Assert // Assert
expect(mockMap).toBeCalledTimes(1); expect(mockMap).toBeCalledTimes(2);
expect(mockAdvancedMarkerElement).toBeCalledTimes(2); expect(mockAdvancedMarkerElement).toBeCalledTimes(2);
expect(mockAdvancedMarkerElement).toBeCalledWith(expect.objectContaining({ expect(mockAdvancedMarkerElement).toBeCalledWith(expect.objectContaining({
map: expect.anything(), map: expect.anything(),
@ -154,8 +257,8 @@ describe('Google Map', () => {
})); }));
expect(mockGeocoder).toBeCalledTimes(1); expect(mockGeocoder).toBeCalledTimes(1);
expect(mockExtend).toBeCalledTimes(4); expect(mockExtend).toBeCalledTimes(6);
expect(mockFitBounds).toBeCalledTimes(1); expect(mockFitBounds).toBeCalledTimes(2);
expect(mockGetCenter).toBeCalledTimes(1); expect(mockGetCenter).toBeCalledTimes(1);
expect(mockNorthEast).toBeCalledTimes(1); expect(mockNorthEast).toBeCalledTimes(1);
@ -165,6 +268,7 @@ describe('Google Map', () => {
test('getMap calls map constructor with expected parameters', async () => { test('getMap calls map constructor with expected parameters', async () => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
const center = { lat: 90, lng: -5 }; const center = { lat: 90, lng: -5 };
// Act // Act
@ -185,32 +289,35 @@ describe('Google Map', () => {
[['loc1', 'loc1', 'loc1', 'loc1'], 4] [['loc1', 'loc1', 'loc1', 'loc1'], 4]
])( ])(
'given parameter %p, getBounds calls extend %p time(s)', 'given parameter %p, getBounds calls extend %p time(s)',
(locations, numberOfExtendCalls) => { async (locations, numberOfExtendCallsPostMount) => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
const numberOfExtendCallsDuringMount = 2;
// Act // Act
const result = wrapper.vm.getBounds(locations); const result = wrapper.vm.getBounds(locations);
// Assert // Assert
expect(mockExtend).toHaveBeenCalledTimes(numberOfExtendCalls); expect(mockExtend).toHaveBeenCalledTimes(
numberOfExtendCallsDuringMount + numberOfExtendCallsPostMount);
expect(result).toBe(mockLatLngBound); expect(result).toBe(mockLatLngBound);
} }
); );
test.each([ test.each([
[1, null, mockGeocoderInstance], [1, null, mockGeocoderInstance1],
[1, undefined, mockGeocoderInstance], [1, undefined, mockGeocoderInstance1],
[0, {}, {}], [0, mockGeocoderInstance2, mockGeocoderInstance2]
[0, { value: 'any value' }, { value: 'any value' }]
])( ])(
'setGeocoder calls Geocoder constructor %p time(s) when original geocoder %p and geocoder set to %p', 'setGeocoder calls Geocoder constructor %p time(s) when original geocoder %p and geocoder set to %p',
async (numberOfCalls, originalGeocoder, newGeocoder) => { async (numberOfCalls, originalGeocoder, newGeocoder) => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const { wrapper } = getMountedComponent({}, { geocoder: originalGeocoder }, {});
await wrapper.setData({ geocoder: originalGeocoder }); await awaitingSetupTicks(wrapper);
// Act // Act
await wrapper.vm.setGeocoder(); await wrapper.vm.setGeocoder();
await wrapper.vm.$nextTick();
// Assert // Assert
expect(mockGeocoder).toHaveBeenCalledTimes(numberOfCalls); expect(mockGeocoder).toHaveBeenCalledTimes(numberOfCalls);
@ -228,6 +335,7 @@ describe('Google Map', () => {
async (positions, numberOfCalls) => { async (positions, numberOfCalls) => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
const map = jest.fn(); const map = jest.fn();
// Act // Act
@ -246,21 +354,26 @@ describe('Google Map', () => {
[['a1', 'a2', 'a3'], 3] [['a1', 'a2', 'a3'], 3]
])( ])(
'given address(es) %p calls geocode %p times', 'given address(es) %p calls geocode %p times',
async (addresses, numberOfCalls) => { async (addresses, numberOfCallsPostMount) => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
const numberOfCallsFromMount = 1;
expect(mockGeocode).toHaveBeenCalledTimes(numberOfCallsFromMount);
// Act // Act
await wrapper.vm.getLocationsFromAddresses(addresses); await wrapper.vm.getLocationsFromAddresses(addresses);
await wrapper.vm.$nextTick();
// Assert // Assert
expect(mockGeocode).toHaveBeenCalledTimes(numberOfCalls); expect(mockGeocode).toHaveBeenCalledTimes(numberOfCallsFromMount + numberOfCallsPostMount);
expect(wrapper.vm.geocoder).not.toBeNull(); expect(wrapper.vm.geocoder).not.toBeNull();
} }
); );
test('only returns geocode results that are not null', async () => { test('only returns geocode results that are not null', async () => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); 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'];
mockGeocode.mockImplementationOnce(() => null) mockGeocode.mockImplementationOnce(() => null)
.mockImplementationOnce(() => ({ results: null })) .mockImplementationOnce(() => ({ results: null }))
@ -300,6 +413,7 @@ describe('Google Map', () => {
test('returns expected when geocode returns valid result', async () => { test('returns expected when geocode returns valid result', async () => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
const address = 'random address'; const address = 'random address';
const expectedResult = 'bounds returned'; const expectedResult = 'bounds returned';
const geocodeResult = { const geocodeResult = {
@ -321,6 +435,7 @@ describe('Google Map', () => {
test('returns null when geocode returns invalid result', async () => { test('returns null when geocode returns invalid result', async () => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {}); const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
const address = 'random address'; const address = 'random address';
mockGeocode.mockImplementationOnce(() => Promise.resolve({})); mockGeocode.mockImplementationOnce(() => Promise.resolve({}));
@ -335,9 +450,6 @@ describe('Google Map', () => {
describe('createMapWithMarkersForAddresses', () => { describe('createMapWithMarkersForAddresses', () => {
test('calls expected when addresses provided', async () => { test('calls expected when addresses provided', async () => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {});
const zipCode = '00882';
await wrapper.setData({ zipCode });
const mockGetCenter = jest.fn(); const mockGetCenter = jest.fn();
const mockNorthEast = jest.fn(); const mockNorthEast = jest.fn();
const mockSouthWest = jest.fn(); const mockSouthWest = jest.fn();
@ -360,34 +472,35 @@ describe('Google Map', () => {
{ geometry: { location: 'valid location' } } { geometry: { location: 'valid location' } }
] ]
}; };
const zipCode = '00882';
mockGeocode.mockImplementation((obj) => mockGeocode.mockImplementation((obj) =>
Promise.resolve(obj.address.includes(zipCode) Promise.resolve(obj.address.includes(zipCode)
? zipCodeGeocodeResult ? zipCodeGeocodeResult
: shopGeocodeResult)); : shopGeocodeResult));
const addresses = ['a1', 'a2']; const addresses = ['a1', 'a2'];
const { wrapper } = getMountedComponent({}, { zipCode });
await awaitingSetupTicks(wrapper);
// Act // Act
await wrapper.vm.createMapWithMarkersForAddresses(addresses); await wrapper.vm.createMapWithMarkersForAddresses(addresses);
await awaitingSetupTicks(wrapper);
// Assert // Assert
expect(mockMap).toBeCalledTimes(1); expect(mockMap).toBeCalledTimes(2);
expect(mockAdvancedMarkerElement).toBeCalledTimes(2); expect(mockAdvancedMarkerElement).toBeCalledTimes(2);
expect(mockGeocoder).toBeCalledTimes(1); expect(mockGeocoder).toBeCalledTimes(1);
expect(mockExtend).toBeCalledTimes(4); expect(mockExtend).toBeCalledTimes(6);
expect(mockFitBounds).toBeCalledTimes(1); 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);
}); });
test.each([null, undefined, []])( test.each([null, undefined, []])(
'calls expected when addresses argument is "%p"', 'calls expected when addresses argument is "%p"',
async (addresses) => { async (addresses) => {
// Arrange // Arrange
const wrapper = shallowMount(googleMap, {});
const zipCode = '00882';
await wrapper.setData({ zipCode });
const mockGetCenter = jest.fn(); const mockGetCenter = jest.fn();
const mockNorthEast = jest.fn(); const mockNorthEast = jest.fn();
const mockSouthWest = jest.fn(); const mockSouthWest = jest.fn();
@ -406,21 +519,25 @@ describe('Google Map', () => {
] ]
}; };
mockGeocode.mockImplementation(() => Promise.resolve(zipCodeGeocodeResult)); mockGeocode.mockImplementation(() => Promise.resolve(zipCodeGeocodeResult));
const zipCode = '00882';
const { wrapper } = getMountedComponent({}, { zipCode });
await awaitingSetupTicks(wrapper);
// Act // Act
await wrapper.vm.createMapWithMarkersForAddresses(addresses); await wrapper.vm.createMapWithMarkersForAddresses(addresses);
await awaitingSetupTicks(wrapper);
// Assert // Assert
expect(mockMap).toBeCalledTimes(1); expect(mockMap).toBeCalledTimes(2);
expect(mockAdvancedMarkerElement).toBeCalledTimes(0); expect(mockAdvancedMarkerElement).toBeCalledTimes(0);
expect(mockGeocoder).toBeCalledTimes(1); expect(mockGeocoder).toBeCalledTimes(1);
expect(mockExtend).toBeCalledTimes(2); expect(mockExtend).toBeCalledTimes(4);
expect(mockFitBounds).toBeCalledTimes(1); 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);
} }
); );
}); });

6
src/iss-components/google-map/google-map.vue
View file

@ -75,13 +75,13 @@ export default {
async createMapWithMarkersForAddresses(addresses) { async createMapWithMarkersForAddresses(addresses) {
const shopPositions = await this.getLocationsFromAddresses(addresses); const shopPositions = await this.getLocationsFromAddresses(addresses);
const zipBounds = await this.getBoundsFromAddress(this.zipCodeAddress); 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, shopPositions); await this.addMarkersToMap(map, shopPositions);
const positionsToDisplay = shopPositions.concat(zipBounds.getNorthEast(), zipBounds.getSouthWest()); const positionsToDisplay = shopPositions.concat(zipBounds?.getNorthEast(), zipBounds?.getSouthWest());
const bounds = this.getBounds(positionsToDisplay); const bounds = this.getBounds(positionsToDisplay);
map.fitBounds(bounds); map?.fitBounds(bounds);
} }
} }
}; };