Merge pull request #146 from Safelite/feature/Digital/SSR-240

Feature/digital/ssr 240

src/iss-components/address-questions/address-questions.spec.js

@@ -15,7 +15,7 @@ describe("address-questions.vue", () => {
     });
 
     describe("initial state", () => {
-        test("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
+        test("Should hide addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
@@ -24,17 +24,16 @@ describe("address-questions.vue", () => {
             const city = wrapper.findComponent({ ref: "city" });
             const state = wrapper.findComponent({ ref: "state" });
             const zipCode = wrapper.findComponent({ ref: "zipCode" });
+            const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"});
 
             // Assert
             expect(streetAddress.exists()).toBe(true);
-            expect(city.exists()).toBe(true);
+            expect(city.exists()).toBe(false);
-            expect(state.exists()).toBe(true);
+            expect(state.exists()).toBe(false);
-            expect(zipCode.exists()).toBe(true);
+            expect(zipCode.exists()).toBe(false);
+            expect(streetAddress2.exists()).toBe(false);
         });
        
-    });
-
-    describe("happy paths", () => {
         test("full street address is passed in => address fields are displayed", async () => {
             // Arrange/Act
             const { wrapper } = setupMocks({
@@ -45,6 +44,7 @@ describe("address-questions.vue", () => {
                         state: "OH",
                         zipCode: "12312",
                     },
+                    includeStreetAddress2: true,
                 },
             });
 
@@ -54,14 +54,40 @@ describe("address-questions.vue", () => {
             const cityField = wrapper.findComponent({ ref: "city" });
             const stateField = wrapper.findComponent({ ref: "state" });
             const zipField = wrapper.findComponent({ ref: "zipCode" });
+            const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"});
+
             expect(cityField.exists()).toBeTruthy();
             expect(cityField.isVisible()).toBeTruthy();
             expect(stateField.exists()).toBeTruthy();
             expect(cityField.isVisible()).toBeTruthy();
             expect(zipField.exists()).toBeTruthy();
             expect(cityField.isVisible()).toBeTruthy();
+            expect(streetAddress2.isVisible()).toBeTruthy();
         });
 
+        test("address2 is hidden if includeStreetAddress2 is false", async () => {
+            // Arrange/Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: {
+                        streetAddress: "12345 Test Road",
+                        city: "Tests",
+                        state: "OH",
+                        zipCode: "12312",
+                    },
+                    includeStreetAddress2: false,
+                },
+            });
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"});
+            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({});

src/iss-components/address-questions/address-questions.vue

@@ -14,7 +14,6 @@
             cmsWidgetName="AlertNoMatchWarningWidget"
             alertClass="alert-warning"
             v-bind:isDismissible="false" />
-
         <div class="row mt-2 mb-4">
             <div class="col">
                 <textboxQuestion
@@ -31,55 +30,55 @@
                     @keydown.enter.prevent />
             </div>
         </div>
-        <div class="row mt-2 mb-4" v-if="includeStreetAddress2">
-            <div class="col">
-                <textboxQuestion
-                    cmsWidgetName="StreetAddress2QuestionWidget"
-                    v-model="addressModel.streetAddress2"
-                    aria-haspopup=""
-                    inputId="streetAddress2Field"
-                    disableAutoFill
-                     />
-            </div>
-        </div>
         <transition name="fade" mode="out-in">
-            <div class="row mb-4" aria-live="polite">
+            <div v-if="showAllFields">
-                <div class="col">
+                <div class="row mt-2 mb-4" v-if="includeStreetAddress2">
-                    <textboxQuestion
+                    <div class="col">
-                        cmsWidgetName="CityQuestionWidget"
+                        <textboxQuestion
-                        v-model="addressModel.city"
+                            ref="streetAddress2"
-                        ref="city"
+                            cmsWidgetName="StreetAddress2QuestionWidget"
-                        inputId="cbf28188fdf2436688fd735915f7ee56"
+                            v-model="addressModel.streetAddress2"
-                        disableAutoFill
+                            aria-haspopup=""
-                        validationRules="city-required" />
+                            inputId="streetAddress2Field"
+                            disableAutoFill
+                            />
+                    </div>
+                </div>
+                <div class="row mb-4" aria-live="polite">
+                    <div class="col">
+                        <textboxQuestion
+                            cmsWidgetName="CityQuestionWidget"
+                            v-model="addressModel.city"
+                            ref="city"
+                            inputId="cbf28188fdf2436688fd735915f7ee56"
+                            disableAutoFill
+                            validationRules="city-required" />
+                    </div>
+                </div>
+                <div class="row mb-4" aria-live="polite">
+                    <div class="col">
+                        <dropdownQuestion
+                            cmsWidgetName="StateQuestionWidget"
+                            v-model="addressModel.state"
+                            ref="state"
+                            inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                            :options="stateOptions"
+                            disableAutoFill
+                            validationRules="state-required" />
+                    </div>
+                    <div class="col">
+                        <textboxQuestion
+                            cmsWidgetName="ZipQuestionWidget"
+                            v-model="addressModel.zipCode"
+                            ref="zipCode"
+                            inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
+                            mask="#####"
+                            disableAutoFill
+                            validationRules="zip-code-required|zip-code-format" />
+                    </div>
                 </div>
             </div>
         </transition>
-        <transition name="fade" mode="out-in">
-            <div class="row mb-4" aria-live="polite">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="StateQuestionWidget"
-                        v-model="addressModel.state"
-                        ref="state"
-                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                        :options="stateOptions"
-                        disableAutoFill
-                        validationRules="state-required" />
-                </div>
-                <div class="col">
-                    <textboxQuestion
-                        cmsWidgetName="ZipQuestionWidget"
-                        v-model="addressModel.zipCode"
-                        ref="zipCode"
-                        inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
-                        mask="#####"
-                        disableAutoFill
-                        validationRules="zip-code-required|zip-code-format" />
-                </div>
-            </div>
-        </transition>
-        
     </div>
 </template>
 
@@ -130,6 +129,7 @@ export default {
             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
+            showAllFields: false,
         };
     },
     computed: {
@@ -210,6 +210,8 @@ export default {
                         // If a match has been previously found then do nothing
                         // OR
                         // If the user pressed "Enter" then do nothing
+                        this.showAllFields = true;
+                        
                         if (self.matchFound || self.enterPressed) {
                             return;
                         }
@@ -307,6 +309,7 @@ export default {
     },
     mounted() {
         this.setupAddressLookup();
+        this.showAllFields = !!this.addressModel.streetAddress;
     },
     watch: {
         matchFound: {