Merge pull request #899 from Safelite/feature/revert-leahs-pr

Revert "Merge pull request #886 from Safelite/feature/CSR-934"

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

@@ -5,6 +5,7 @@ import alert from "@/ux-components/alert/alert";
 // Supporting Files
 import { mount, shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 
@@ -58,6 +59,35 @@ describe("address-questions.vue", () => {
             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
@@ -209,13 +239,81 @@ describe("address-questions.vue", () => {
             );
 
             // Assert
-            wrapper.vm.$nextTick(function () {
+            const addressModel = wrapper.vm.addressModel;
-                const addressModel = wrapper.vm.addressModel;
+            expect(addressModel.streetAddress).toEqual("1234 Test Road");
-                expect(addressModel.streetAddress).toEqual("1234 Test Road");
+            expect(addressModel.city).toEqual("Columbus");
-                expect(addressModel.city).toEqual("Columbus");
+            expect(addressModel.state).toEqual("OH");
-                expect(addressModel.state).toEqual("OH");
+            expect(addressModel.zipCode).toEqual("43215");
-                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 () => {
@@ -315,8 +413,13 @@ describe("address-questions.vue", () => {
                     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
@@ -331,7 +434,6 @@ describe("address-questions.vue", () => {
                 });
                 expect(verificationAlert.exists()).toBe(true);
                 expect(verificationAlert.isVisible()).toBe(true);
-
                 const noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
                 expect(noMatchAlert.exists()).toBe(false);
             }
@@ -411,39 +513,12 @@ describe("address-questions.vue", () => {
         });
 
         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(function () {
-                    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({
+                wrapper.setData({
-                    matchFound: false,
+                    displayNoMatchWarning: true,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -451,26 +526,24 @@ describe("address-questions.vue", () => {
                 expect(noMatchAlert.exists()).toBeTruthy();
                 expect(noMatchAlert.isVisible()).toBeTruthy();
 
-                // // Act
+                // Act
                 wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
-                    city: "LS",
+                    city: "Somewhere",
                 });
+                await wrapper.vm.$nextTick();
 
                 // Assert
-                wrapper.vm.$nextTick(function () {
+                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-
+                expect(noMatchAlert.exists()).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({
+                wrapper.setData({
-                    matchFound: false,
+                    displayNoMatchWarning: true,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -478,26 +551,24 @@ describe("address-questions.vue", () => {
                 expect(noMatchAlert.exists()).toBeTruthy();
                 expect(noMatchAlert.isVisible()).toBeTruthy();
 
-                // // Act
+                // Act
                 wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
                     state: "KO",
                 });
+                await wrapper.vm.$nextTick();
 
                 // Assert
-                wrapper.vm.$nextTick(function () {
+                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-
+                expect(noMatchAlert.exists()).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({
+                wrapper.setData({
-                    matchFound: false,
+                    displayNoMatchWarning: true,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -505,18 +576,16 @@ describe("address-questions.vue", () => {
                 expect(noMatchAlert.exists()).toBeTruthy();
                 expect(noMatchAlert.isVisible()).toBeTruthy();
 
-                // // Act
+                // Act
                 wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
                     zipCode: "12345",
                 });
+                await wrapper.vm.$nextTick();
 
                 // Assert
-                wrapper.vm.$nextTick(function () {
+                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-
+                expect(noMatchAlert.exists()).toBeFalsy();
-                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(noMatchAlert.exists()).toBeFalsy();
-                });
             });
         });
     });

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

@@ -12,8 +12,7 @@
                     aria-haspopup=""
                     hasIcon
                     disableAutoFill
-                    validationRules="street-address-required"
+                    validationRules="street-address-required" />
-                    @keydown.enter.prevent />
             </div>
         </div>
         <transition name="fade" mode="out-in">
@@ -110,10 +109,6 @@ export default {
             alertCopyVerificationWarning: "",
             alertHeadlineNoMatchWarning: "",
             alertCopyNoMatchWarning: "",
-            matchingIndirectly: false,
-            matchFound: null, // null = no attempted match, true = match was found, false = match was not found
-            enterPressed: false,
-            isAddressWatchActive: false, // Only deep watch the address model when a match was not found
         };
     },
     computed: {
@@ -218,11 +213,11 @@ export default {
                         fillInAddress
                     );
 
+                    // Wrapping the addressField1 element in the Google Address Autocomplete object
+                    // will cause "autocomplete='off'" which Chrome completely ignores. This event
+                    // handler will set the value to something arbitrary so autofill doesn't work.
+                    // https://stackoverflow.com/a/30976223
                     addressField1.addEventListener("focus", () => {
-                        // Wrapping the addressField1 element in the Google Address Autocomplete object
-                        // will cause "autocomplete='off'" which Chrome completely ignores. This event
-                        // handler will set the value to something arbitrary so autofill doesn't work.
-                        // https://stackoverflow.com/a/30976223
                         addressField1.setAttribute("autocomplete", "do-not-autofill");
 
                         // Make place results box stick to the input on scroll
@@ -234,43 +229,12 @@ export default {
                         }
                     });
 
-                    addressField1.addEventListener("keydown", (e) => {
-                        if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
-                            if (e.code === "Tab") {
-                                self.matchingIndirectly = true;
-                            } else {
-                                self.enterPressed = true;
-                            }
-
-                            addressField1.blur();
-                        } else {
-                            return;
-                        }
-                    });
-
                     addressField1.addEventListener("change", () => {
-                        // NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen
+                        const hover = document.querySelector(".pac-container .pac-item:hover");
-                        // using either the down / up arrows or the address the user was hovering over when they pressed "Enter."
+                        // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
-
+                        if (hover === null) {
-                        // If a match has been previously found then do nothing
-                        // OR
-                        // If the user pressed "Enter" then do nothing
-                        if (self.matchFound || self.enterPressed) {
-                            return;
-                        }
-
-                        // Get the address that the user clicked on (if any)
-                        const clickedAddress = document.querySelector(
-                            ".pac-container .pac-item:hover"
-                        );
-
-                        // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
-                        if (clickedAddress === null) {
-                            // Fill-in the address using first item in the list.
                             const item = document.querySelector(".pac-container .pac-item");
                             if (item != null) {
-                                self.matchingIndirectly = true;
-
                                 const firstResult = item.textContent;
                                 const geocoder = new window.google.maps.Geocoder();
                                 geocoder.geocode(
@@ -280,12 +244,18 @@ export default {
                                     function (results, status) {
                                         if (status === window.google.maps.GeocoderStatus.OK) {
                                             fillInAddress(results[0]);
+                                            self.displayVerificationWarning = true;
+                                            self.displayNoMatchWarning = false;
                                         }
                                     }
                                 );
                             } else {
-                                // No addresses found for the input
+                                self.addressModel.city = "";
-                                self.matchFound = false;
+                                self.addressModel.state = "";
+                                self.addressModel.zipCode = "";
+                                self.showAddressFields = true;
+                                self.displayVerificationWarning = false;
+                                self.displayNoMatchWarning = true;
                             }
                         }
                     });
@@ -296,53 +266,50 @@ export default {
                         }
 
                         if (place && place.address_components) {
-                            self.matchFound = true;
                             self.addressModel.streetAddress = "";
-                            self.$nextTick(function () {
+                            self.showAddressFields = true;
-                                self.showAddressFields = true;
 
-                                for (const component of place.address_components) {
+                            for (const component of place.address_components) {
-                                    const componentType = component.types[0];
+                                const componentType = component.types[0];
 
-                                    switch (componentType) {
+                                switch (componentType) {
-                                        case "street_number": {
+                                    case "street_number": {
-                                            self.addressModel.streetAddress = component.long_name;
+                                        self.addressModel.streetAddress = component.long_name;
-                                            break;
+                                        break;
-                                        }
+                                    }
-                                        case "route": {
+                                    case "route": {
-                                            self.addressModel.streetAddress +=
+                                        self.addressModel.streetAddress +=
-                                                " " + component.short_name;
+                                            " " + component.short_name;
-                                            break;
+                                        break;
-                                        }
+                                    }
-                                        case "locality": {
+                                    case "locality": {
-                                            self.addressModel.city = component.long_name;
+                                        self.addressModel.city = component.long_name;
-                                            break;
+                                        break;
-                                        }
+                                    }
-                                        case "administrative_area_level_1": {
+                                    case "administrative_area_level_1": {
-                                            self.addressModel.state = component.short_name;
+                                        self.addressModel.state = component.short_name;
-                                            break;
+                                        break;
-                                        }
+                                    }
-                                        case "postal_code": {
+                                    case "postal_code": {
-                                            self.addressModel.zipCode = component.long_name;
+                                        self.addressModel.zipCode = component.long_name;
-                                            break;
+                                        break;
-                                        }
                                     }
                                 }
+                            }
 
-                                self.displayVerificationWarning = self.matchingIndirectly;
+                            self.displayVerificationWarning = false;
-
+                            self.displayNoMatchWarning = false;
-                                // after showing the address fields, disable the address autocomplete
-                                window.google.maps.event.removeListener(autocompleteListener);
-                                window.google.maps.event.clearInstanceListeners(autocomplete);
-                                addressField1.onchange = null;
-                                const pacContainer = document.querySelector(".pac-container");
-                                if (pacContainer) {
-                                    pacContainer.remove();
-                                }
-                            });
                         } else {
                             self.displayVerificationWarning = true;
+                            self.displayNoMatchWarning = false;
                         }
+
+                        // after showing the address fields, disable the address autocomplete
+                        window.google.maps.event.removeListener(autocompleteListener);
+                        window.google.maps.event.clearInstanceListeners(autocomplete);
+                        addressField1.onchange = null;
+                        const pacContainer = document.querySelector(".pac-container");
+                        pacContainer.remove();
                     }
                 })
                 .catch(() => {
@@ -355,29 +322,11 @@ export default {
         this.setupAddressLookup();
     },
     watch: {
-        matchFound: {
-            handler(newValue) {
-                if (!newValue) {
-                    this.displayNoMatchWarning = true;
-
-                    this.addressModel.city = "";
-                    this.addressModel.state = "";
-                    this.addressModel.zipCode = "";
-                    this.showAddressFields = true;
-                    this.displayVerificationWarning = false;
-
-                    this.$nextTick(function () {
-                        // Only deep watch the Address Model after a failed match
-                        this.isAddressWatchActive = true;
-                    });
-                }
-            },
-        },
         addressModel: {
-            handler() {
+            handler(newValue) {
-                if (this.isAddressWatchActive) {
+                // Clear no match warning on address change
+                if (newValue.city || newValue.state || newValue.zipCode) {
                     this.displayNoMatchWarning = false;
-                    this.isAddressWatchActive = false;
                 }
             },
             deep: true,