Merge pull request #15 from Safelite/feature/SSR-78

Feature/ssr 78

src/common-components/dropdown-question/dropdown-question.spec.js

@@ -0,0 +1,170 @@
+import { shallowMount } from "@vue/test-utils";
+import dropdownQuestion from "./dropdown-question";
+
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn().mockImplementation(()=> {
+      return questionText;
+    })
+  }
+}
+
+// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
+// It is not being used.
+describe("dropdownQuestion.vue", () => {
+
+  it("Should render a select input", async () => {
+
+    // Arrange   
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.getCmsContent = jest.fn();
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.exists()).toBe(true);
+
+  });
+  
+  it("Should render the 'questionText' data value as the label text.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(questionText);
+
+  });
+
+  it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        disableAutoFill: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Mock CMS content ...
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
+    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q⁠uestion T⁠ext"
+    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(expectedQuestionText);
+
+  });
+  
+  it("Should return input id as the id of the select field", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes().id).toEqual("input ID");
+
+  });
+  
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.attributes("aria-label")).toContain(questionText);
+
+  });
+
+  it("Should return aria-disabled state as disabled", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        isDisabled: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes("aria-disabled")).toEqual("true");
+
+  });
+
+  it("Should emit new value when modelValue is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: "val",
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    await wrapper.find("select").setValue("val2");
+
+    // Assert
+    expect(wrapper.emitted()).toHaveProperty('change')
+
+  });
+
+  it("Should call this.handleChange with new value when selectedOption is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: 0,
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+    // Act
+    wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
+
+    // Assert
+    expect(wrapper.vm.handleChange).toHaveBeenCalled;
+
+  });
+
+});

src/common-components/dropdown-question/dropdown-question.vue

@@ -0,0 +1,152 @@
+<template>
+	<div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
+		<select v-model="selectedOption"
+				class="form-select" 
+				:id="inputId"
+				:name="inputId" 
+				:aria-disabled="isDisabled" 
+				:disabled="isDisabled" 
+				:aria-required="isRequired"
+				:validationRules="validationRules" 
+			>
+			<option v-for="(value, name, index) in options" :value="name" :key="index">
+				{{ value }}       
+			</option>
+		</select>
+		<div v-show="errorMessage" class="row mt-2 form-test-error">
+			<span role="alert">{{ errorMessage }}</span>
+		</div>	
+	</div>    
+</template>
+
+<script>
+import { useField } from "vee-validate";
+
+export default {
+	name: "dropdown-question",
+	props: {
+		modelValue: String,
+		inputId: String,
+		options: {
+			type: Object,
+			required: true
+		},
+		isDisabled: Boolean,
+		isRequired: Boolean,
+		disableAutoFill: Boolean,
+		validationRules: String, 
+		cmsWidgetName: String,
+	},
+	setup(props) {
+		const propsClone = Object.assign({}, props);
+		const modelValue = propsClone.modelValue;
+		let initialValue;
+
+		switch (typeof modelValue) {
+			case "number": 
+				initialValue = modelValue;
+				break;
+			default:
+				initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
+				break;
+		}
+
+		const fieldOptions = {
+			type: "select",
+			value: props.modelValue,
+			initialValue: initialValue, 
+		};
+
+		const {
+			errorMessage,
+			handleBlur,
+			handleChange,
+			meta,
+		} = useField(props.inputId, props.validationRules, fieldOptions);
+
+		return { 
+			errorMessage,
+			handleBlur,
+			handleChange,
+			meta, 
+		};
+	},  
+	computed: {
+		questionText(){
+			return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+		},
+		selectedOption: {
+			get: function() {
+				return this.modelValue;
+			},
+			set: function(newValue) {
+				this.$emit("update:modelValue", newValue);
+			}
+		}, 
+		labelText: {
+			get: function () {
+				const noBreakChar = "&NoBreak;";
+				var questionText = "";
+				if (this.disableAutoFill) {
+					var words = this.questionText.toString().split(/[ ]+/);
+					words.forEach(function (word) {
+						const position = 1;
+						word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
+						questionText += `${word} `;					
+					});	
+					
+					questionText = questionText.trimEnd(); 
+				} else {
+					questionText = this.questionText.toString();
+				}
+
+				return questionText;
+			}
+		}
+	},
+	watch: {
+		selectedOption(newValue) {
+			this.handleChange(newValue);
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.dropdown-question {
+	label {
+		color: $black;
+		font-weight: 500; 
+	}
+	.form-label {
+		margin-bottom: .25rem;
+	}
+	.form-select {
+		color: $gray-600;
+		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
+		border: 1px solid $gray-500;
+		border-radius: .5rem;
+		min-height: 3rem;
+		&:focus,
+		&:focus-visible {
+			box-shadow: 0 0 0 2.5px $blue;
+		}
+		&:disabled,
+		&.disabled {
+			background-color: $gray-100;
+			filter: grayscale(100%);
+			&:hover {
+				box-shadow: 0 0 0 4px transparent;
+				border: 1px solid $gray-500;
+			}
+		}
+		&:hover {
+			border: 1px solid $gray-500;
+			box-shadow: 0 0 0 4px $blue-300;
+		}
+	}
+}
+</style>
+
+

src/constants/error-messages.js

@@ -29,7 +29,8 @@ const errorMessages = {
     POLICY_ZIP_REQUIRED: "Please enter policy zip",
     POLICY_ZIP_FORMAT: "Please enter a valid policy ZIP",
     LOSS_CAUSE_REQUIRED: "Please enter loss cause",
-    LOSS_CITY_REQUIRED: "Please enter loss city"
+    LOSS_CITY_REQUIRED: "Please enter loss city",
+    LOSS_STATE_REQUIRED: "Please enter loss state"
 };
 
 export { errorMessages };

src/layouts/welcome-page/welcome-page.vue

@@ -4,6 +4,17 @@
         <siteHeader cmsWidgetName="Header"/>
         <p>Welcome Page Placeholder</p>
         <br />
+        <div class="col">
+				<dropdownQuestion
+					cmsWidgetName="LossStateQuestionWidget"
+					v-model="addressModel.lossState"
+					ref="lossState"
+					inputId="LossStateQuestionWidget"
+					:options="stateOptions"
+					disableAutoFill
+					validationRules="loss-state-required"
+				/>
+		</div>
         <navButton type="button" text="Next" :scenario="this.navigationScenarios.CLICKED_FORWARD"></navButton>
         <navButton text="Google" :scenario="this.navigationScenarios.CLICKED_TEST"></navButton>
     </div>
@@ -15,32 +26,114 @@
     import siteHeader from '@/common-components/site-header/site-header';
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
     import { settleAllPromises } from "@/helpers/layout-helper";
+    import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+    import { defineRule } from "vee-validate";
+    import { required } from "@/helpers/validation-rules";
+    import { errorMessages } from "@/constants/error-messages";
 
+    //define validation rules
+    defineRule("loss-state-required", required(errorMessages.STATE_REQUIRED));
 
-    export default {
+    export default ({
         name: "welcome-page",
-        components: { navButton, siteHeader },
+        emits: ['update:modelValue'], // The component emits an event
+	    props: {
+		    modelValue: {
+			    type: Object,
+			    default: () => ({
+				    lossState: "",
+			    }),
+		    },
+		    validationRules: String,       
+	    }, 
+        components: { navButton, siteHeader, dropdownQuestion },
         async beforeRouteEnter(to, from, next) 
+        {
+            // Call APIs
+            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+            // Settle promises and get results
+            const promiseResultMap = [
             {
-                // Call APIs
+                resultKey: "cmsContent",
-                const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+                promise: cmsContentPromise,
+                },
+            ];
                 
-                // Settle promises and get results
+            //use resultMap to populate layout content.
-                const promiseResultMap = [
+            let resultMap = await settleAllPromises(promiseResultMap);
-                    {
-                        resultKey: "cmsContent",
-                        promise: cmsContentPromise,
-                    },
-                ];
 
-                //use resultMap to populate layout content.
+            next((vm) => {
-                let resultMap = await settleAllPromises(promiseResultMap);
+                vm.setCmsContent(resultMap.cmsContent);
-
+            });
-                next((vm) => {
+        },
-                    vm.setCmsContent(resultMap.cmsContent);
+        computed: 
-                });
+        {
-            },
+		    stateOptions: {
-    }
+			    get: function () {
+				    return {
+					    'AL': 'Alabama',
+					    'AK': 'Alaska',
+					    'AZ': 'Arizona',
+					    'AR': 'Arkansas',
+					    'CA': 'California',
+					    'CO': 'Colorado',
+					    'CT': 'Connecticut',
+					    'DE': 'Delaware',
+					    'DC': 'District Of Columbia',
+					    'FL': 'Florida',
+					    'GA': 'Georgia',
+					    'HI': 'Hawaii',
+					    'ID': 'Idaho',
+					    'IL': 'Illinois',
+					    'IN': 'Indiana',
+					    'IA': 'Iowa',
+					    'KS': 'Kansas',
+					    'KY': 'Kentucky',
+					    'LA': 'Louisiana',
+					    'ME': 'Maine',
+					    'MD': 'Maryland',
+					    'MA': 'Massachusetts',
+					    'MI': 'Michigan',
+					    'MN': 'Minnesota',
+					    'MS': 'Mississippi',
+					    'MO': 'Missouri',
+					    'MT': 'Montana',
+					    'NE': 'Nebraska',
+					    'NV': 'Nevada',
+					    'NH': 'New Hampshire',
+					    'NJ': 'New Jersey',
+					    'NM': 'New Mexico',
+					    'NY': 'New York',
+					    'NC': 'North Carolina',
+					    'ND': 'North Dakota',
+					    'OH': 'Ohio',
+					    'OK': 'Oklahoma',
+					    'OR': 'Oregon',
+					    'PA': 'Pennsylvania',
+					    'RI': 'Rhode Island',
+					    'SC': 'South Carolina',
+					    'SD': 'South Dakota',
+					    'TN': 'Tennessee',
+					    'TX': 'Texas',
+					    'UT': 'Utah',
+					    'VT': 'Vermont',
+					    'VA': 'Virginia',
+					    'WA': 'Washington',
+					    'WV': 'West Virginia',
+					    'WI': 'Wisconsin',
+					    'WY': 'Wyoming',            
+				    }
+			    }
+		    },
+            addressModel: 
+            {
+			    get: function() {
+				    return this.modelValue;
+			    },  
+		    },
+        }
+    })
 </script>
 
 <style scoped>