addressQuestions component unit tests

jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
   transform: { "^.+\\.vue$": "vue-jest" },
   moduleFileExtensions: ["js", "vue"],
   collectCoverageFrom: [
-    "src/**/*.{js,vue}",
+    //"src/**/*.{js,vue}",
     "!src/main.js",
     "!src/constants/*.js",
     "!src/router/**/*.js",
@@ -22,7 +22,7 @@ module.exports = {
     // TODO REMOVE THESE AFTER WRITING UNIT TESTS
     "!src/layouts/address-lookup/address-lookup.vue",
     "!src/layouts/address-lookup/customer-questions/customer-questions.vue",
-    "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
+    "src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
     "!src/layouts/address-vehicles/address-vehicles.vue",
     "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
     "!src/ux-components/alert\alert.vue",

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

@@ -0,0 +1,130 @@
+import { shallowMount } from "@vue/test-utils";
+import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+
+const addressModel = {
+    streetAddress: "",
+    city: "",
+    state: "",
+    zipCode: "",            
+}
+
+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

@@ -215,12 +215,12 @@ export default ({
 					// Standard place_changed event handling
 					const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
 
-						// Wrapping the addressField1 element in the Google Address Autocomplete object 
+					// Wrapping the addressField1 element in the Google Address Autocomplete object 
-						// will cause "autocomplete='off'" which Chrome completely ignores. This event
+					// will cause "autocomplete='off'" which Chrome completely ignores. This event
-						// handler will set the value to something arbitrary so autofill doesn't work. 
+					// handler will set the value to something arbitrary so autofill doesn't work. 
-						// https://stackoverflow.com/a/30976223
+					// https://stackoverflow.com/a/30976223
-						addressField1.addEventListener("focus", () => {
+					addressField1.addEventListener("focus", () => {
-							addressField1.setAttribute("autocomplete", "do-not-autofill");
+						addressField1.setAttribute("autocomplete", "do-not-autofill");
 
 						// Make place results box stick to the input on scroll
 						const streetAddressField = document.getElementById("streetAddressField");
@@ -325,7 +325,7 @@ export default ({
 	watch: {
 		addressModel: {
 			handler(newValue) {
-				// The first time the address model changes is w
+				// The first time the address model changes is when the page first loads
 				if (!newValue.city && 
 					!newValue.state &&
 					!newValue.zipCode) {