Fix for CSR-934, includes several improvements and fixes for undocumented defects.

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

@@ -5,7 +5,6 @@ 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";
 
@@ -59,35 +58,6 @@ 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
@@ -239,81 +209,13 @@ describe("address-questions.vue", () => {
             );
 
             // Assert
-            const addressModel = wrapper.vm.addressModel;
+            wrapper.vm.$nextTick(function () {
-            expect(addressModel.streetAddress).toEqual("1234 Test Road");
+                const addressModel = wrapper.vm.addressModel;
-            expect(addressModel.city).toEqual("Columbus");
+                expect(addressModel.streetAddress).toEqual("1234 Test Road");
-            expect(addressModel.state).toEqual("OH");
+                expect(addressModel.city).toEqual("Columbus");
-            expect(addressModel.zipCode).toEqual("43215");
+                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 () => {
@@ -413,13 +315,8 @@ 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
@@ -434,6 +331,7 @@ 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);
             }
@@ -513,12 +411,12 @@ describe("address-questions.vue", () => {
         });
 
         describe("noMatch alert is cleared on address change", () => {
-            test("user sees noMatch warning and enters city => noMatch warning is removed", async () => {
+            test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => {
                 // Arrange
                 const { wrapper } = setupMocks({});
 
-                wrapper.setData({
+                await wrapper.setData({
-                    displayNoMatchWarning: true,
+                    matchFound: false,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -526,24 +424,53 @@ describe("address-questions.vue", () => {
                 expect(noMatchAlert.exists()).toBeTruthy();
                 expect(noMatchAlert.isVisible()).toBeTruthy();
 
-                // Act
+                // // Act
                 wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
-                    city: "Somewhere",
+                    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({
+                    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
-                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                wrapper.vm.$nextTick(function () {
-                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                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({});
 
-                wrapper.setData({
+                await wrapper.setData({
-                    displayNoMatchWarning: true,
+                    matchFound: false,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -551,24 +478,26 @@ 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
-                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                wrapper.vm.$nextTick(function () {
-                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                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({});
 
-                wrapper.setData({
+                await wrapper.setData({
-                    displayNoMatchWarning: true,
+                    matchFound: false,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -576,16 +505,18 @@ 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
-                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                wrapper.vm.$nextTick(function () {
-                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                expect(noMatchAlert.exists()).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
             });
         });
     });

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

@@ -113,7 +113,7 @@ export default {
             matchingIndirectly: false,
             matchFound: null, // null = no attempted match, true = match was found, false = match was not found
             enterPressed: false,
-            unwatchAddress: null // handle to allow us to only deep watch the address model when a match was not found
+            isAddressWatchActive: false, // Only deep watch the address model when a match was not found
         };
     },
     computed: {
@@ -249,7 +249,7 @@ export default {
                     });
 
                     addressField1.addEventListener("change", () => {
-                        // NOTE: The "place_changed" event of the autocomplete fires after this and will use eitherthe address the user had chosen
+                        // NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen
                         // using either the down / up arrows or the address the user was hovering over when they pressed "Enter."
 
                         // If a match has been previously found then do nothing
@@ -280,7 +280,6 @@ export default {
                                     function (results, status) {
                                         if (status === window.google.maps.GeocoderStatus.OK) {
                                             fillInAddress(results[0]);
-                                            self.displayNoMatchWarning = false;
                                         }
                                     }
                                 );
@@ -343,7 +342,6 @@ export default {
                             });
                         } else {
                             self.displayVerificationWarning = true;
-                            self.displayNoMatchWarning = false;
                         }
                     }
                 })
@@ -359,12 +357,6 @@ export default {
     watch: {
         matchFound: {
             handler(newValue) {
-                if (newValue === null) {                   
-                    this.displayNoMatchWarning = false;
-                    this.unwatchAddress();
-                    return; 
-                }
-
                 if (!newValue) {
                     this.displayNoMatchWarning = true;
 
@@ -373,15 +365,23 @@ export default {
                     this.addressModel.zipCode = "";
                     this.showAddressFields = true;
                     this.displayVerificationWarning = false;
-                   
+
-                    // Only deep watch the Address Model after a failed match
+                    this.$nextTick(function () {
-                    this.unwatchAddress = this.$watch("addressModel", (newAddress) => {
+                        // Only deep watch the Address Model after a failed match
-                        // When the address model changes reset to "no attempted match"
+                        this.isAddressWatchActive = true;
-                        this.matchFound = null;
+                    });
-                    }, { deep: true });
+                }
-                } 
             },
         },
+        addressModel: {
+            handler() {
+                if (this.isAddressWatchActive) {
+                    this.displayNoMatchWarning = false;
+                    this.isAddressWatchActive = false;
+                }
+            },
+            deep: true,
+        },
     },
     components: {
         textboxQuestion,