Merge pull request #559 from Safelite/feature/CSR-633

Feature/csr 633

src/common-components/text-input/text-input.spec.js

@@ -1,35 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import textInput from "./text-input";
-
-describe("text-input.vue", () => {
-  it("Should render a text input", async () => {
-    // Act
-    const wrapper = shallowMount(textInput, {
-      propsData: {
-        name: "test",
-        label: "unit test label",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.exists()).toBe(true);
-  });
-
-  it("Should return aria-required state", async () => {
-    // Act
-    const wrapper = shallowMount(textInput, {
-      propsData: {
-        name: "test",
-        label: "unit test label",
-        isRequired: true,
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes()["aria-required"]).toEqual("true");
-  });
-});

src/common-components/text-input/text-input.vue

@@ -1,71 +0,0 @@
-<!-- Simple implementation of an input field -->
-<template>
-  <div class="d-flex w-50 mb-2" :class="{ 'has-error': !!errorMessage }">
-    <input
-      type="text"
-      :name="name"
-      :value="inputValue"
-      :id="name"
-      :aria-required="isRequired"
-      @input="handleChange"
-      @blur="handleBlur"
-      :data-focus-target="name"
-    />
-    <label
-      :for="name"
-      :aria-labelledby="name"
-      class="d-flex justify-content-center py-3 px-4"
-    >
-      <span class="m-0">{{ label }}</span>
-    </label>
-  </div>
-  <div v-show="errorMessage" class="row px-3 form-test-error">
-    {{ errorMessage }}
-  </div>
-</template>
-
-<script>
-import { useField } from "vee-validate";
-
-export default {
-  name: "textInput",
-  props: {
-    type: {
-      type: String,
-      default: "text",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    isRequired: Boolean,
-  },
-  setup(props) {
-    const {
-      value: inputValue,
-      errorMessage,
-      handleBlur,
-      handleChange,
-      meta,
-    } = useField(props.name, undefined, {
-      initialValue: props.value,
-    });
-
-    return {
-      handleChange,
-      handleBlur,
-      errorMessage,
-      inputValue,
-      meta,
-    };
-  },
-};
-</script>

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

@@ -167,7 +167,7 @@ describe("textboxQuestion.vue", () => {
 
   });
 
-  it("Should call this.handleChange with new value when this.semiAggressiveValidation = true, the value is changed, and the new value is valid", async () => {
+  it("Should call this.handleChange with new value when the value is changed and the new value is valid", async () => {
     // Arrange
     const wrapper = shallowMount(textboxQuestion, {
       global: {
@@ -178,7 +178,6 @@ describe("textboxQuestion.vue", () => {
       propsData: {
         options: {},
         modelValue: "foo",
-        semiAggressiveValidation: true,
       },
       mixins: [mockMixin]
     });

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

@@ -55,7 +55,6 @@ export default {
 			default: "",
 		},
 		validationRules: String,
-		semiAggressiveValidation: Boolean,
 		cmsWidgetName: String,
 		maxLength: String,
 	},
@@ -130,12 +129,10 @@ export default {
 	},
 	watch: {
 		async value(newValue) {
-			if (this.semiAggressiveValidation) {
-				const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
-				if (result.valid) {
-					this.handleChange(newValue); // trigger full validation on this field only
-				}
-			}
+			const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
+			if (result.valid) {
+				this.handleChange(newValue); // trigger full validation on this field only
+			}	
 		},
 	},
 };

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

@@ -25,7 +25,6 @@
 					inputId="cbf28188fdf2436688fd735915f7ee56"
 					disableAutoFill
 					validationRules="city-required"
-					semiAggressiveValidation
 				/>
 			</div>
 		</div>
@@ -52,7 +51,6 @@
 					mask="#####"
 					disableAutoFill
 					validationRules="zip-code-required|zip-code-format"
-					semiAggressiveValidation
 				/>
 			</div>
 		</div>

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

@@ -33,7 +33,6 @@
 				inputId="00450a91b8964a768ce3992e6feb890f"
 				disableAutoFill
 				validationRules="email-address-required|email-address-format"
-				semiAggressiveValidation
 			/>
 		</div>
 	</div>  

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -35,7 +35,6 @@
               v-model="email"
               inputId="email"
               validationRules="email-address-required|email-address-format"
-              semiAggressiveValidation
             />
           </div>
         </div>
@@ -54,7 +53,6 @@
               v-model="serviceZip"
               inputId="serviceZip"
               validationRules="zip-required|zip-format"
-              semiAggressiveValidation
             />
           </div>
         </div>

src/layouts/vin-lookup/vin-lookup.vue

@@ -57,7 +57,6 @@
               isRequired
               disableAutoFill
               validationRules="email-address-required|email-address-format"
-              semiAggressiveValidation
             />
           </div>
         </div>