diff --git a/src/iss-components/address-questions/address-questions.spec.js b/src/iss-components/address-questions/address-questions.spec.js index 6d225c65..cf7003fa 100644 --- a/src/iss-components/address-questions/address-questions.spec.js +++ b/src/iss-components/address-questions/address-questions.spec.js @@ -41,16 +41,6 @@ function setupMocks({ }, places: { Autocomplete: jest.fn().mockImplementation((el) => el) - }, - Geocoder: class Geocoder { - // constructor(); - - geocode(request, callback) { - callback([geocoderResult], true); - } - }, - GeocoderStatus: { - OK: true } } }; @@ -60,6 +50,7 @@ function setupMocks({ const wrapper = isShallowMount ? shallowMount(addressQuestions, resultingMountOptions) : mount(addressQuestions, resultingMountOptions); + document.querySelector = jest.fn().mockImplementation((query) => { let result = null; if (query === '.pac-container') result = document.createElement('div'); @@ -153,375 +144,4 @@ describe('address-questions.vue', () => { expect(streetAddress2.exists()).toBe(false); }); }); - - describe('happy paths', () => { - test('street address is entered, user chooses good result from autocomplete results => other fields are filled in', async () => { - // Arrange - const { wrapper } = setupMocks({}); - await wrapper.setData({ - addressModel: { - streetAddress: '123 Test Street' - } - }); - - const selectedPlace = { - address_components: [ - { - long_name: '1234', - short_name: '1234', - types: ['street_number'] - }, - { - long_name: 'Test Road', - short_name: 'Test Road', - types: ['route'] - }, - { - long_name: 'East Columbus', - short_name: 'Columbus', - types: ['neighborhood', 'political'] - }, - { - long_name: 'Columbus', - short_name: 'Columbus', - types: ['locality', 'political'] - }, - { - long_name: 'Franklin County', - short_name: 'Franklin County', - types: ['administrative_area_level_2', 'political'] - }, - { - long_name: 'Ohio', - short_name: 'OH', - types: ['administrative_area_level_1', 'political'] - }, - { - long_name: 'United States', - short_name: 'US', - types: ['country', 'political'] - }, - { - long_name: '43215', - short_name: '43215', - types: ['postal_code'] - } - ] - }; - - // Act - autocompleteElement.dispatchEvent(new CustomEvent('place_changed', { detail: selectedPlace })); - - // Assert - wrapper.vm.$nextTick(() => { - const { addressModel } = wrapper.vm; - expect(addressModel.streetAddress).toEqual('1234 Test Road'); - expect(addressModel.city).toEqual('Columbus'); - expect(addressModel.state).toEqual('OH'); - expect(addressModel.zipCode).toEqual('43215'); - }); - }); - - test('street address is entered, but user clicks away => first result is selected and other fields are filled in', async () => { - // Arrange - let changeEventCallbackFunction; - autocompleteElement.addEventListener = jest - .fn() - .mockImplementation((eventName, callbackFunction) => { - if (eventName === 'change') { - changeEventCallbackFunction = callbackFunction; - } - }); - - const { wrapper } = setupMocks({ - querySelectorFunction(query) { - if (query === '.pac-container .pac-item') { - const element = document.createElement('div'); - element.textContent = '123 Test Street'; - return element; - } - return null; - }, - geocoderResult: { - address_components: [ - { - long_name: '1234', - short_name: '1234', - types: ['street_number'] - }, - { - long_name: 'Test Road', - short_name: 'Test Road', - types: ['route'] - }, - { - long_name: 'East Columbus', - short_name: 'Columbus', - types: ['neighborhood', 'political'] - }, - { - long_name: 'Columbus', - short_name: 'Columbus', - types: ['locality', 'political'] - }, - { - long_name: 'Franklin County', - short_name: 'Franklin County', - types: ['administrative_area_level_2', 'political'] - }, - { - long_name: 'Ohio', - short_name: 'OH', - types: ['administrative_area_level_1', 'political'] - }, - { - long_name: 'United States', - short_name: 'US', - types: ['country', 'political'] - }, - { - long_name: '43215', - short_name: '43215', - types: ['postal_code'] - } - ] - } - }); - - const noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - const verificationAlert = wrapper.findComponent({ ref: 'alertVerificationWarning' }); - expect(noMatchAlert.exists()).toBeFalsy(); - expect(verificationAlert.exists()).toBeFalsy(); - - await wrapper.vm.$nextTick(); - - // Act - changeEventCallbackFunction(); - - await wrapper.vm.$nextTick(); - - // Assert - const { addressModel } = wrapper.vm; - expect(addressModel.streetAddress).toEqual('1234 Test Road'); - expect(addressModel.city).toEqual('Columbus'); - expect(addressModel.state).toEqual('OH'); - expect(addressModel.zipCode).toEqual('43215'); - }); - }); - - describe('alerts', () => { - const places = [null, { address_components: null }, undefined, {}]; - test.each(places)( - 'selected place/place properties is null => display verification alert', - async (place) => { - // Arrange - const { wrapper } = setupMocks({}); - await wrapper.setData({ - addressModel: { - streetAddress: '123 Test Street' - } - }); - - const selectedPlace = place; - - // Act - autocompleteElement.dispatchEvent(new CustomEvent('place_changed', { detail: selectedPlace })); - await wrapper.vm.$nextTick(); - - // Assert - const verificationAlert = wrapper.findComponent({ - ref: 'alertVerificationWarning' - }); - expect(verificationAlert.exists()).toBe(true); - expect(verificationAlert.isVisible()).toBe(true); - - const noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBe(false); - } - ); - - test('user enters address that yields no autocomplete results => show noMatch alert', async () => { - // Arrange - let changeEventCallbackFunction; - autocompleteElement.addEventListener = jest - .fn() - .mockImplementation((eventName, callbackFunction) => { - if (eventName === 'change') { - changeEventCallbackFunction = callbackFunction; - } - }); - - const { wrapper } = setupMocks({}); - - let noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeFalsy(); - - await wrapper.vm.$nextTick(); - - // Act - changeEventCallbackFunction(); - - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.displayNoMatchWarning).toBeTruthy(); - noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - }); - - test("user enters address that yields autocomplete results, but doesn't select => show verification alert", async () => { - // Arrange - let changeEventCallbackFunction; - autocompleteElement.addEventListener = jest - .fn() - .mockImplementation((eventName, callbackFunction) => { - if (eventName === 'change') { - changeEventCallbackFunction = callbackFunction; - } - }); - - const { wrapper } = setupMocks({ - querySelectorFunction(query) { - if (query === '.pac-container .pac-item') { - const element = document.createElement('div'); - element.textContent = '123 Test Street'; - return element; - } - return null; - } - }); - - let noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - let verificationAlert = wrapper.findComponent({ ref: 'alertVerificationWarning' }); - expect(noMatchAlert.exists()).toBeFalsy(); - expect(verificationAlert.exists()).toBeFalsy(); - - await wrapper.vm.$nextTick(); - - // Act - changeEventCallbackFunction(); - - await wrapper.vm.$nextTick(); - - // Assert - verificationAlert = wrapper.findComponent({ ref: 'alertVerificationWarning' }); - expect(wrapper.vm.displayVerificationWarning).toBeTruthy(); - expect(verificationAlert.exists()).toBeTruthy(); - expect(verificationAlert.isVisible()).toBeTruthy(); - noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - expect(noMatchAlert.exists()).toBeFalsy(); - }); - - describe('noMatch alert is cleared on address change', () => { - test('user sees noMatch warning and modifies street address => noMatch warning is removed', async () => { - // Arrange - const { wrapper } = setupMocks({}); - - await wrapper.setData({ - matchFound: false - }); - await wrapper.vm.$nextTick(); - - let noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - streetAddress: 'LS' - }); - - // Assert - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - - noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); - }); - - test('user sees noMatch warning and enters city => noMatch warning is removed', async () => { - // Arrange - const { wrapper } = setupMocks({}); - - await wrapper.setData({ - matchFound: false - }); - await wrapper.vm.$nextTick(); - - let noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - city: 'LS' - }); - - // Assert - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - - noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); - }); - - test('user sees noMatch warning and enters state => noMatch warning is removed', async () => { - // Arrange - const { wrapper } = setupMocks({}); - - await wrapper.setData({ - matchFound: false - }); - await wrapper.vm.$nextTick(); - - let noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - state: 'KO' - }); - - // Assert - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - - noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); - }); - - test('user sees noMatch warning and enters zip code => noMatch warning is removed', async () => { - // Arrange - const { wrapper } = setupMocks({}); - - await wrapper.setData({ - matchFound: false - }); - await wrapper.vm.$nextTick(); - - let noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - zipCode: '12345' - }); - - // Assert - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - - noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); - }); - }); - }); });