Merge pull request #542 from Safelite/feature/unit-tests-2022.06.09-KO

Feature/unit tests 2022.06.09 ko

jest.config.js

@@ -19,7 +19,6 @@ module.exports = {
     "!src/layouts/part-questions/**/*.vue",
     "!src/layouts/reveal/**/*.vue",
     "!src/layouts/estimate/**/*.vue", 
-    "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue", // there are limitations of async script loading and third party scripts that prevent full coverage from being met for this component.
     // TODO REMOVE THESE AFTER WRITING UNIT TESTS 
     "!src/layouts/address-vehicles/address-vehicles.vue",
     "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",

src/helpers/unit-test-helper.js

@@ -55,6 +55,7 @@ export function getMountOptions(mockData) {
   mocks.$store = mockData.store;
   mocks.$router = mockData.router;
   mocks.$route = mockData.route;
+  mocks.$loadScript = mockData.loadScript;
 
   const global = {
     mocks: mocks,

src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js

@@ -1,130 +1,630 @@
-import { shallowMount } from "@vue/test-utils";
+// Components
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+import alert from "@/ux-components/alert/alert";
 
-const addressModel = {
+// Supporting Files
-    streetAddress: "",
+import { mount, shallowMount } from "@vue/test-utils";
-    city: "",
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
-    state: "",
+import { storeActions } from "@/constants/store-actions";
-    zipCode: "",            
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+
+let autocompleteElement;
+describe("address-questions.vue", () => {
+  beforeEach(() => {
+    // Create the `addressField1` element (autocomplete's input)
+    autocompleteElement = document.createElement("input")
+    autocompleteElement.getPlace = jest.fn();
+    document.getElementById = jest.fn().mockReturnValue(autocompleteElement);
+  })
+
+  describe("initial state", () => {
+    test("only street address field is shown", () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      // Assert
+      const streetAddressField = wrapper.findComponent({ ref: "autocomplete" });
+      const cityField = wrapper.findComponent({ ref: "city" });
+      const stateField = wrapper.findComponent({ ref: "state" });
+      const zipCodeField = wrapper.findComponent({ ref: "zipCode" });
+
+      expect(streetAddressField.exists()).toBe(true);
+      expect(streetAddressField.isVisible()).toBe(true);
+      expect(cityField.exists()).toBe(true);
+      expect(cityField.isVisible()).toBe(false);
+      expect(stateField.exists()).toBe(true);
+      expect(stateField.isVisible()).toBe(false);
+      expect(zipCodeField.exists()).toBe(true);
+      expect(zipCodeField.isVisible()).toBe(false);
+
+      const alerts = wrapper.findAllComponents(alert);
+      expect(alerts.length).toEqual(0);
+    })
+
+    test("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
+      // Arrange   
+      const { wrapper } = setupMocks({});
+
+      // Act
+      const streetAddress = wrapper.findComponent({ ref: 'autocomplete' });
+      const city = wrapper.findComponent({ ref: 'city' });
+      const state = wrapper.findComponent({ ref: 'state' });
+      const zipCode = wrapper.findComponent({ ref: 'zipCode' });
+
+      // Assert
+      expect(streetAddress.exists()).toBe(true);
+      expect(city.exists()).toBe(true);
+      expect(state.exists()).toBe(true);
+      expect(zipCode.exists()).toBe(true);
+    });
+
+    test("Should set this.displayNoMatchWarning to false when it is set to true, if the model if prepopulated", async () => {
+      // Arrange   
+      const newAddressModel = {
+        streetAddress: "foo",
+        city: "foo",
+        state: "foo",
+        zipCode: "55555",
+      };
+      const wrapper = shallowMount(addressQuestions, {
+        propsData: {
+          modelValue: newAddressModel,
+        },
+      });
+
+      await wrapper.setData({
+        displayNoMatchWarning: true
+      })
+      expect(wrapper.vm.displayNoMatchWarning).toBeTruthy();
+
+      // Act
+      wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, wrapper.vm.addressModel);
+
+      // Assert
+      expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+    });
+
+    test("Should it set this.showAddressFields to true when the model is prepopulated", async () => {
+      // Arrange   
+      // Act
+      const newAddressModel = {
+        streetAddress: "foo",
+        city: "foo",
+        state: "foo",
+        zipCode: "55555",
+      };
+      const wrapper = shallowMount(addressQuestions, {
+        propsData: {
+          modelValue: newAddressModel,
+        },
+      });
+
+      // Act
+      wrapper.vm.setupAddressLookup();
+
+      // Assert
+      expect(wrapper.vm.showAddressFields).toBe(true);
+
+    });
+  });
+
+  describe("happy paths", () => {
+    test("full street address is passed in => address fields are displayed", async () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        props: {
+          modelValue: {
+            streetAddress: "12345 Test Road",
+            city: "Tests",
+            state: "OH",
+            zipCode: "12312"
+          }
+        }
+      });
+
+      await wrapper.vm.$nextTick();
+
+      // Assert
+      const cityField = wrapper.findComponent({ ref: "city" });
+      const stateField = wrapper.findComponent({ ref: "state" });
+      const zipField = wrapper.findComponent({ ref: "zipCode" });
+      expect(cityField.exists()).toBeTruthy();
+      expect(cityField.isVisible()).toBeTruthy();
+      expect(stateField.exists()).toBeTruthy();
+      expect(cityField.isVisible()).toBeTruthy();
+      expect(zipField.exists()).toBeTruthy();
+      expect(cityField.isVisible()).toBeTruthy();
+    });
+
+    test("full street address is passed in => don't load Google Autocomplete script", async () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        props: {
+          modelValue: {
+            streetAddress: "12345 Test Road",
+            city: "Tests",
+            state: "OH",
+            zipCode: "12312"
+          }
+        }
+      });
+
+      await wrapper.vm.$nextTick();
+
+      // Assert
+      expect(wrapper.vm.$loadScript).not.toHaveBeenCalled();
+    });
+
+    test("address field is focused => disable autocomplete", async () => {
+      // Arrange
+      let focusEventCallbackFunction;
+      autocompleteElement.addEventListener = jest.fn().mockImplementation((eventName, callbackFunction) => {
+        if (eventName == "focus") {
+          focusEventCallbackFunction = callbackFunction;
+        }
+      });
+      const { wrapper } = setupMocks({});
+      await wrapper.vm.$nextTick();
+
+      // Act
+      focusEventCallbackFunction();
+      await wrapper.vm.$nextTick();
+
+      // Assert
+      expect(autocompleteElement.getAttribute("autocomplete")).toEqual("do-not-autofill");
+    });
+
+    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
+      const addressModel = wrapper.vm.addressModel;
+      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, user chooses good result from autocomplete results => alerts are cleared", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      await wrapper.setData({
+        addressModel: {
+          streetAddress: "123 Test Street"
+        },
+        displayVerificationWarning: true,
+        displayNoMatchWarning: true
+      })
+
+      let alerts = wrapper.findAllComponents(alert);
+      alerts.forEach(alert => expect(alert.isVisible()).toBeTruthy());
+
+      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 }));
+      await wrapper.vm.$nextTick();
+
+      // Assert
+      alerts = wrapper.findAllComponents(alert);
+      alerts.forEach(alert => expect(alert.exists()).toBeFalsy());
+    });
+
+    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: function (query) {
+          if (query == ".pac-container .pac-item") {
+            let element = document.createElement("div");
+            element.textContent = "123 Test Street"
+            return element;
+          }
+        },
+        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"]
+            },
+          ]
+        }
+      });
+
+      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
+      const addressModel = wrapper.vm.addressModel;
+      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"
+        },
+        displayVerificationWarning: true,
+        displayNoMatchWarning: true
+      })
+
+      let alerts = wrapper.findAllComponents(alert);
+      alerts.forEach(alert => expect(alert.isVisible()).toBeTruthy());
+
+      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: function (query) {
+          if (query == ".pac-container .pac-item") {
+            let element = document.createElement("div");
+            element.textContent = "123 Test Street"
+            return element;
+          }
+        }
+      });
+
+      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 enters city => noMatch warning is removed", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+
+        wrapper.setData({
+          displayNoMatchWarning: true
+        });
+        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: "Somewhere"
+        })
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        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({});
+
+        wrapper.setData({
+          displayNoMatchWarning: true
+        });
+        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"
+        })
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        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({});
+
+        wrapper.setData({
+          displayNoMatchWarning: true
+        });
+        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"
+        })
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+        noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+        expect(noMatchAlert.exists()).toBeFalsy();
+      });
+    });
+  });
+});
+
+function setupMocks({ mountOptions, props, isShallowMount = true, querySelectorFunction, geocoderResult = ["1234 Test Street"] }) {
+  store.commit(storeMutations.RESET_STATE);
+
+  const resultingMountOptions = getMountOptions({
+    ...mountOptions,
+    router: {
+      navigate: jest.fn(),
+      navigateAfterSave: jest.fn()
+    },
+    loadScript: jest.fn().mockResolvedValue()
+  });
+
+  window.google = {
+    maps: {
+      event: {
+        addListener: jest.fn().mockImplementation((element, eventName, callbackFunction) => {
+          function interceptedCallbackFunction(e) {
+            callbackFunction(e.detail);
+          }
+          // selectedPlace = "Woogly";
+          element.addEventListener(eventName, interceptedCallbackFunction);
+        }),
+        removeListener: jest.fn(),
+        clearInstanceListeners: jest.fn()
+      },
+      places: {
+        Autocomplete: jest.fn().mockImplementation((el) => el)
+      },
+      Geocoder: class Geocoder {
+        // constructor();
+
+        geocode(request, callback) {
+          callback([geocoderResult], true)
+        }
+      },
+      GeocoderStatus: {
+        OK: true
+      }
+    }
+  };
+
+  if (props)
+    resultingMountOptions.propsData = props;
+
+  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");
+    else if (querySelectorFunction) {
+      result = querySelectorFunction(query);
+    }
+
+    return result ?? null;
+  });
+
+  return { wrapper };
 }
-
-describe("addressQuestions.vue", () => {
-
-    it("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
-        // Arrange   
-        const wrapper = shallowMount(addressQuestions);
-
-        // Act
-        const streetAddress = wrapper.findComponent({ ref: 'autocomplete' });
-        const city = wrapper.findComponent({ ref: 'city' });
-        const state = wrapper.findComponent({ ref: 'state' });
-        const zipCode = wrapper.findComponent({ ref: 'zipCode' });
-
-        // Assert
-        expect(streetAddress.exists()).toBe(true);
-        expect(city.exists()).toBe(true);
-        expect(state.exists()).toBe(true);
-        expect(zipCode.exists()).toBe(true);
-  
-    });
-
-    it("Should call the watch handler for the address model when the addressModel is changed", async () => {
-        // Arrange        
-        const wrapper = shallowMount(addressQuestions, {
-            propsData: {
-              modelValue: addressModel,
-            },
-        });
-        wrapper.vm.displayNoMatchWarning = true;
-
-        // Act
-        const newAddressModel = {
-            streetAddress: "foo",
-            city: "foo",
-            state: "foo",
-            zipCode: "55555",            
-        };
-
-        wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, newAddressModel);
-
-        // Assert
-        expect(wrapper.vm.addressModel.handler).toHaveBeenCalled;
-
-    }); 
-
-    it("Should set this.displayNoMatchWarning to false, if the model changes when it is set to true", async () => {
-        // Arrange   
-        const wrapper = shallowMount(addressQuestions, {
-            propsData: {
-              modelValue: addressModel,
-            },
-        });
-        wrapper.vm.displayNoMatchWarning = true;
-      
-        // Act
-        const newAddressModel = {
-            streetAddress: "foo",
-            city: "",
-            state: "",
-            zipCode: "",            
-        };
-
-        // Act
-        wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, newAddressModel);
-
-        // Assert
-        expect(wrapper.vm.displayNoMatchWarning === false);
-
-    });  
-    
-    it("Should it not should set this.displayNoMatchWarning to false when it is set to true, if the model if prepopulated", async () => {
-        // Arrange   
-        const wrapper = shallowMount(addressQuestions, {
-            propsData: {
-              modelValue: addressModel,
-            },
-        });
-        wrapper.vm.displayNoMatchWarning = true;
-      
-        // Act
-        const newAddressModel = {
-            streetAddress: "foo",
-            city: "foo",
-            state: "foo",
-            zipCode: "55555",            
-        };
-
-        // Act
-        wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, newAddressModel);
-
-        // Assert
-        expect(wrapper.vm.displayNoMatchWarning === true);
-
-    }); 
-
-    it("Should it set this.showAddressFields to true when the model is prepopulated", async () => {
-        // Arrange   
-        const wrapper = shallowMount(addressQuestions, {
-            propsData: {
-              modelValue: addressModel,
-            },
-        });
-        wrapper.vm.displayNoMatchWarning = true;
-      
-        // Act
-        const newAddressModel = {
-            streetAddress: "foo",
-            city: "foo",
-            state: "foo",
-            zipCode: "55555",            
-        };
-
-        // Act
-        wrapper.vm.setupAddressLookup();
-
-        // Assert
-        expect(wrapper.vm.showAddressFields).toBe(true);
-
-    }); 
-
-})

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -185,11 +185,10 @@ export default ({
 	},
 	methods: {
 		setupAddressLookup() {
-
+			if (this.addressModel.streetAddress &&
-			if (this.addressModel.streetAddress !== null & 
+				this.addressModel.city &&
-				this.addressModel.city !== null & 
+				this.addressModel.state &&
-				this.addressModel.state !== null & 
+				this.addressModel.zipCode) {
-				this.addressModel.zipCode !== null) {
 
 				this.showAddressFields = true;
 				return;
@@ -228,10 +227,9 @@ export default ({
 						if (autocompleteResultsContainer) {
 							streetAddressField.appendChild(autocompleteResultsContainer);
 						}
-					
 					})
 
-					addressField1.onchange = function() {
+					addressField1.addEventListener("change", () => {
 						const hover = document.querySelector(".pac-container .pac-item:hover");
 						// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
 						if (hover === null) {
@@ -258,7 +256,7 @@ export default ({
 								self.displayNoMatchWarning = true;
 							}					
 						}
-					};
+					});
 
 					function fillInAddress(place) {
 						if (!place) {
@@ -310,7 +308,6 @@ export default ({
 						addressField1.onchange = null;
 						const pacContainer = document.querySelector(".pac-container");
 						pacContainer.remove();
-
 					}
 				})
 				.catch(() => {
@@ -325,14 +322,8 @@ export default ({
 	watch: {
 		addressModel: {
 			handler(newValue) {
-				// The first time the address model changes is when the page first loads
+				// Clear no match warning on address change
-				if (!newValue.city && 
+				if (newValue.city || newValue.state || newValue.zipCode) {
-					!newValue.state &&
-					!newValue.zipCode) {
-					return;
-				}
-
-				if (this.displayNoMatchWarning === true) {
 					this.displayNoMatchWarning = false;
 				}			
 			},