From 5f7b1dcd835d1e56c0d916c1d245113e09d50f83 Mon Sep 17 00:00:00 2001
From: Heath Harrelson <harrelst@ohsu.edu>
Date: Tue, 10 Jul 2018 13:25:27 -0700
Subject: [PATCH 1/2] Chart Form Validation

Validate chart form when inputs change and prior to saving.
---
 js/components/ChartForm.vue       | 285 +++++++++++++++++++++++-------
 package-lock.json                 |  43 +++--
 package.json                      |   3 +-
 test/components/ChartForm_test.js |  83 +++++----
 4 files changed, 300 insertions(+), 114 deletions(-)

diff --git a/js/components/ChartForm.vue b/js/components/ChartForm.vue
index 0acad670..12195473 100644
--- a/js/components/ChartForm.vue
+++ b/js/components/ChartForm.vue
@@ -1,46 +1,46 @@
 <template>
-  <div :id="id" aria-expanded="true">
+  <div :id="id" aria-expanded="true" @input="validateChanges" @change="validateChanges">
     <div class="vizr-form-panel panel panel-primary">
       <div class="panel-heading">
         <strong>{{ messages.heading }}</strong>
         <span class="glyphicon glyphicon-remove pull-right" aria-hidden="true" data-toggle="collapse" :data-target="idSelector" aria-expanded="true" role="button" @click="reset"></span>
       </div>
       <div class="panel-body">
-        <div class="form-group">
+        <div class="form-group" :class="{ 'has-error': errors.titleError }">
           <label for="chart_title" class="control-label">{{ messages.titleLabel }}</label>
-          <input type="text" class="form-control" name="chart_title" required="required" data-field="title" v-model="model.title">
-          <div class="help-block error-help">{{ titleError }}</div>
+          <input type="text" class="form-control" name="chart_title" required="required" data-field="title" v-model.trim="model.title">
+          <div class="help-block error-help">{{ errors.titleError }}</div>
         </div>
         <div class="form-group">
           <label for="chart_description" class="control-label">{{ messages.descriptionLabel }}</label>
-          <input type="text" class="form-control" name="chart_description" data-field="description" v-model="model.description">
+          <input type="text" class="form-control" name="chart_description" data-field="description" v-model.trim="model.description">
         </div>
         <fieldset>
           <legend><span class="label label-default">{{ messages.timeConfigHeading }}</span></legend>
-          <div class="form-group">
+          <div class="form-group" :class="{ 'has-error': errors.startError }">
             <label for="start_date" class="control-label">{{ messages.startDateLabel }}</label>
             <div class="input-group">
-              <input ref="startDateInput" type="text" class="form-control vizr-date" name="start_date" data-field="start" data-v-model="startDate" data-validate="date,targetDate" v-model="startDate" @input="dateFieldChanged">
+              <input ref="startDateInput" type="text" class="form-control vizr-date" name="start_date" data-field="start" data-v-model="startDate" data-validate="validateDate,validateTargetDate" v-model="startDate" @input="dateFieldChanged">
               <span class="input-group-addon" @click="showDatePicker($refs.startDateInput)">
                 <span class="glyphicon glyphicon-calendar"></span>
               </span>
             </div>
-            <div class="help-block error-help">{{ startDateErrors }}</div>
+            <div class="help-block error-help">{{ errors.startError }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group" :class="{ 'has-error': errors.chartEndError }">
             <label for="chart_end_date" class="control-label">{{ messages.endDateLabel }}</label>
             <div class="input-group">
-              <input ref="endDateInput" type="text" class="form-control vizr-date" name="chart_end_date" data-field="chartEnd" data-v-model="endDate" data-validate="date" v-model="endDate" @input="dateFieldChanged">
+              <input ref="endDateInput" type="text" class="form-control vizr-date" name="chart_end_date" data-field="chartEnd" data-v-model="endDate" data-validate="validateDate" v-model="endDate" @input="dateFieldChanged">
               <span class="input-group-addon" @click="showDatePicker($refs.endDateInput)">
                 <span class="glyphicon glyphicon-calendar"></span>
               </span>
             </div>
-            <div class="help-block error-help">{{ endDateErrors }}</div>
+            <div class="help-block error-help">{{ errors.chartEndError }}</div>
           </div>
 
-          <div class="form-group" v-if="hasEvents">
+          <div class="form-group" :class="{ 'has-error': errors.dateFieldEventError }" v-if="hasEvents">
             <label for="date_field_event" class="control-label">{{ messages.dateFieldEventLabel }}</label>
-            <select v-model="model.dateFieldEvent" class="form-control" name="date_field_event" required="required" data-field="dateFieldEvent" @change="dateFieldEventChanged">
+            <select ref="dateFieldEventSelect" v-model="model.dateFieldEvent" class="form-control" name="date_field_event" required="required" data-field="dateFieldEvent" @change="dateFieldEventChanged">
               <option value="">
                 {{ messages.selectEvent }}
               </option>
@@ -48,12 +48,12 @@
                 {{ choice.label }}
               </option>
             </select>
-            <div class="help-block error-help"></div>
+            <div class="help-block error-help">{{ errors.dateFieldEventError }}</div>
           </div>
 
-          <div class="form-group">
+          <div class="form-group" :class="{ 'has-error': errors.fieldError }">
             <label for="record_date" class="control-label">{{ messages.dateFieldLabel }}</label>
-            <select v-model="model.field" class="form-control" name="record_date" required="required" data-validate="dateEvent" data-field="field">
+            <select v-model="model.field" class="form-control" name="record_date" required="required" data-validate="validateDateEvent" data-field="field">
               <option value="">
                 {{ messages.selectDateField }}
               </option>
@@ -61,9 +61,9 @@
                 {{ choice.label }}
               </option>
             </select>
-            <div class="help-block error-help"></div>
+            <div class="help-block error-help">{{ errors.fieldError }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group" :class="{ 'has-error': errors.dateIntervalError }">
             <label for="date_interval" class="control-label">{{ messages.dateIntervalLabel }}</label>
             <select v-model="model.dateInterval" class="form-control" name="date_interval" required="required" data-field="dateInterval">
               <option value="">
@@ -73,20 +73,20 @@
                 {{ choice.label }}
               </option>
             </select>
-            <div class="help-block error-help">{{ dateIntervalErrors }}</div>
+            <div class="help-block error-help">{{ errors.dateIntervalError }}</div>
           </div>
         </fieldset>
         <fieldset>
           <legend><span class="label label-default">{{ messages.dataConfigurationHeading }}</span></legend>
           <div class="form-group">
             <label for="filter" class="control-label">{{ messages.filterLogicLabel }} <span class="sub-label">{{ messages.filterLogicSubLabel }}</span></label>
-              <textarea class="form-control" rows="3" name="filter" data-field="filter" v-model="model.filter"></textarea>
+              <textarea class="form-control" rows="3" name="filter" data-field="filter" v-model.trim="model.filter"></textarea>
             <small>{{ messages.filterLogicExample }}</small>
           </div>
 
           <div class="form-group" v-if="hasEvents">
             <label for="group_field_event" class="control-label">{{ messages.groupingFieldEventLabel }}</label>
-            <select v-model="model.groupFieldEvent" class="form-control" name="group_field_event" data-field="groupFieldEvent" @change="groupFieldEventChanged">
+            <select class="form-control" name="group_field_event" data-field="groupFieldEvent" ref="groupFieldEventSelect" v-model="model.groupFieldEvent" @change="groupFieldEventChanged">
               <option value="">
                 {{ messages.selectEvent }}
               </option>
@@ -94,12 +94,11 @@
                 {{ choice.label }}
               </option>
             </select>
-            <div class="help-block error-help"></div>
           </div>
 
-          <div class="form-group">
+          <div class="form-group" :class="{ 'has-error': errors.groupError }">
             <label class="control-label" for="group_field">{{ messages.groupingFieldLabel }}</label>
-            <select v-model="model.group" class="form-control" name="group_field" data-validate="group" data-field="group" @change="groupFieldChanged">
+            <select v-model="model.group" class="form-control" name="group_field" data-validate="validateGroup" data-field="group" @change="groupFieldChanged">
               <option value="">
                 {{ messages.noGrouping }}
               </option>
@@ -107,14 +106,14 @@
                 {{ choice.label }}
               </option>
             </select>
-            <div class="help-block error-help">{{ groupFieldErrors }}</div>
+            <div class="help-block error-help">{{ errors.groupError }}</div>
           </div>
         </fieldset>
         <fieldset>
           <legend><span class="label label-default">{{ messages.targetLabel }}</span></legend>
           <div class="form-group targets" v-if="noGroup">
             <label class="control-label" for="target_count">{{ messages.targetCountLabel }}</label>
-            <input type="text" class="form-control" name="target_count" data-validate="targetDate" data-field='targets.No Groups' v-model.number="model.targets['No Groups']">
+            <input type="text" class="form-control" name="target_count" data-validate="validateTargetDate" data-field='targets.No Groups' v-model.number="model.targets['No Groups']">
           </div>
           <div class="form-group targets" v-else>
             <label>{{ messages.targetCountsLabel }}</label> <a data-toggle="collapse" role="button" :href="groupTargetsIdSelector" aria-expanded="true">{{ messages.actions.hideShow }}</a>
@@ -122,24 +121,30 @@
               <div class="well group-targets">
                 <div class="form-group form-group-sm" v-for="target in groupTargets">
                   <label class="control-label" :for="target.name">{{ target.label }}</label>
-                  <input type="text" class="form-control col-sm-10" :name="target.name" data-validate="targetDate" data-type='int' v-model.number="model.targets[target.label]">
+                  <input type="text" class="form-control col-sm-10" :name="target.name" data-validate="validateTargetDate" v-model.number="model.targets[target.label]">
                 </div>
                 <span class="target-total"><em>{{ messages.targetTotal }} {{ targetTotal }}</em></span>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="form-group" :class="{ 'has-error': errors.endError }">
             <label class="control-label" for="target_date">{{ messages.targetEndDateLabel }}</label>
             <div class="input-group">
-              <input ref="targetEndDateInput" type="text" class="form-control vizr-date" name="target_date" data-field="end" data-v-model="targetEndDate" data-validate="date,targetDate" v-model="targetEndDate" @input="dateFieldChanged">
+              <input ref="targetEndDateInput" type="text" class="form-control vizr-date" name="target_date" data-field="end" data-v-model="targetEndDate" data-validate="validateDate,validateTargetDate" v-model="targetEndDate" @input="dateFieldChanged">
               <span class="input-group-addon" @click="showDatePicker($refs.targetEndDateInput)">
                 <span class="glyphicon glyphicon-calendar"></span>
               </span>
             </div>
-            <div class="help-block error-help">{{ targetEndDateErrors }}</div>
+            <div class="help-block error-help">{{ errors.endError }}</div>
           </div>
         </fieldset>
 
+        <div class="form-group has-error save-warning" v-if="hasErrors">
+          <div class="help-block error-help">
+            {{ messages.validation.cannotSave }}
+          </div>
+        </div>
+
         <button
           type="submit"
           class="btn btn-primary"
@@ -164,6 +169,9 @@
 </template>
 
 <script>
+import moment from 'moment';
+import debounce from 'lodash/debounce';
+
 import {
   fieldComparator,
   getDateFields,
@@ -179,6 +187,8 @@ import {
   fieldLabel
 } from '@/util';
 
+const userDateFormat = 'MM/DD/YYYY';
+
 export const selector = {
   titleField: 'input[name=chart_title]',
   descriptionField: 'input[name=chart_description]',
@@ -198,7 +208,8 @@ export const selector = {
   targetsDiv: 'div.targets',
   groupTargetsDiv: 'div.group-targets',
   groupTargetFields: 'input[name^=group_target]',
-  validatedInputs: 'input[data-validate],[required]'
+  validatedInputs: 'input[data-validate],[required]',
+  validationError: '.has-error:not(.save-warning)'
 };
 
 const messages = {
@@ -213,9 +224,6 @@ const messages = {
   dateIntervalLabel: 'Date Interval',
   descriptionLabel: 'Chart Notes (optional)',
   endDateLabel: 'End Date',
-  errors: {
-    fieldRequired: 'Field is required.'
-  },
   filterLogicExample: 'Example: [screened]=\'1\'',
   filterLogicLabel: 'Filter Logic',
   filterLogicSubLabel: '(filter the results returned for the chart based on conditional logic)',
@@ -236,7 +244,15 @@ const messages = {
   targetLabel: 'Target (optional)',
   targetTotal: 'Total: ',
   timeConfigHeading: 'Time Configuration',
-  titleLabel: 'Chart Title'
+  titleLabel: 'Chart Title',
+  validation: {
+    cannotSave: 'Your chart configuration cannot be saved due to errors.',
+    dateEventError: 'An event must be selected before selecting a date field',
+    dateFormatError: `Dates must be ${userDateFormat} format.`,
+    groupError: 'An event must be selected before selecting a grouping field',
+    requiredError: 'Field is required.',
+    targetDateError: 'Field is required when there is a target.'
+  }
 };
 
 export default {
@@ -257,10 +273,12 @@ export default {
         { label: 'Months', value: 'month' },
         { label:'Years', value:'year' }
       ],
+      isDirty: false,
       model: this.copyModel(chartDef),
       startDate: isoToUserDate(chartDef.start),
       endDate: isoToUserDate(chartDef.chartEnd),
-      targetEndDate: isoToUserDate(chartDef.end)
+      targetEndDate: isoToUserDate(chartDef.end),
+      errors: this.createErrorObject()
     };
   },
 
@@ -306,6 +324,22 @@ export default {
       return targetsObjectWithGroups(groups);
     },
 
+    /**
+     * Creates an object for storing the component's error state.
+     */
+    createErrorObject() {
+      return {
+        chartEndError: '',
+        dateFieldEventError: '',
+        dateIntervalError: '',
+        endError: '',
+        fieldError: '',
+        groupError: '',
+        startError: '',
+        titleError: ''
+      };
+    },
+
     /**
      * Attaches date pickers to the date inputs.
      */
@@ -358,9 +392,11 @@ export default {
     reset() {
       const { chartDef } = this;
       this.model = this.copyModel(chartDef);
+      this.errors = this.createErrorObject();
       this.startDate = isoToUserDate(chartDef.start);
       this.endDate = isoToUserDate(chartDef.chartEnd);
       this.targetEndDate = isoToUserDate(chartDef.end);
+      this.isDirty = false;
     },
 
     /**
@@ -410,12 +446,154 @@ export default {
       this[vModelField] = target.value;
     },
 
+    /**
+     * Validates the form on input and change events. Closely-spaced events are coalesced.
+     */
+    validateChanges: debounce(function(evt) {
+      const { target } = evt;
+      this.validateInput(target);
+    }, 300),
+
+    /**
+     * Validates all the form inputs prior to saving.
+     */
+    validateForm() {
+      const { $el } = this;
+      const inputs = $el.querySelectorAll(selector.validatedInputs);
+      for (let i = 0; i < inputs.length; i++) {
+        this.validateInput(inputs[i]);
+      }
+    },
+
+    /**
+     * Validates the value of an input.
+     * @param {Element} el - the element to check
+     */
+    validateInput(el) {
+      // return early if the event didn't have a target
+      if (!el) {
+        return;
+      }
+
+      this.isDirty = true;
+      const { errors } = this;
+      const errorField = `${el.getAttribute('data-field')}Error`;
+      const validations = this.getValidations(el);
+      const inputErrors = validations.map(name =>
+        (typeof this[name] === 'function') ? this[name].call(this, el) : null
+      );
+
+      errors[errorField] = inputErrors.filter(Boolean).join(' ');
+    },
+
+    /**
+     * Gets the list of validation methods that should be run for the given field.
+     * @param {Element} el - the input element to validate
+     * @return {String[]} an array of validation method names
+     */
+    getValidations(el) {
+      const isRequired = el.hasAttribute('required');
+      const hasDataValidations = el.hasAttribute('data-validate');
+      const validations = [];
+
+      if (isRequired) {
+        validations.push('validateRequiredInput');
+      }
+
+      if (hasDataValidations) {
+        const validationNames = el.getAttribute('data-validate')
+          .split(',');
+        validations.push(...validationNames);
+      }
+
+      return validations;
+    },
+
+    /**
+     * Validates that the given element has a value.
+     * @param {Element} el - the element to check
+     * @return {String} an error message if the input is invalid
+     */
+    validateRequiredInput(el) {
+      return !el.value ? messages.validation.requiredError : null;
+    },
+
+    /**
+     * Validates that the value of the given element is a date string.
+     * @param {Element} el - the element to check
+     * @return {String} an error message if the input is invalid
+     */
+    validateDate(el) {
+      const value = el.value;
+      if (value && !moment(value, userDateFormat, true).isValid()) {
+        return messages.validation.dateFormatError;
+      }
+    },
+
+    /**
+     * Validates that a date field event is selected if the project is longitudinal and
+     * a date field is selected.
+     * @param {Element} el - the date field select list
+     * @return {String} an error message if the input is invalid
+     */
+    validateDateEvent(el) {
+      const { model } = this;
+      const { dateFieldEventSelect } = this.$refs;
+      if (el.value && dateFieldEventSelect && !model.dateFieldEvent) {
+        return messages.validation.dateEventError;
+      }
+    },
+
+    /**
+     * Validates that start and end dates have been chosen if targets are present.
+     * @param {Element} el - a target input or date input
+     * @return {String} an error message if the input is invalid
+     */
+    validateTargetDate(el) {
+      const { targets } = this;
+      const { startDateInput, targetEndDateInput } = this.$refs;
+      const inputName = el.getAttribute('name');
+
+      if (inputName === 'target_count' || inputName.startsWith('group_target')) {
+        // count changed, re-validate target dates
+        this.validateInput(startDateInput);
+        this.validateInput(targetEndDateInput);
+      } else {
+        // validating date input; check that if target(s) present, dates exist
+        const targetValues = Object.values(targets).filter(Number.isFinite);
+        if (targetValues.length > 0 && !el.value) {
+          return messages.validation.targetDateError;
+        }
+      }
+    },
+
+    /**
+     * Validates that a group field event is selected if the project is longitudinal and
+     * a grouping field is selected.
+     * @param {Element} el - the grouping field select list
+     * @return {String} an error message if the input is invalid
+     */
+    validateGroup(el) {
+      const { model } = this;
+      const { groupFieldEventSelect } = this.$refs;
+      if (el.value && groupFieldEventSelect && !model.groupFieldEvent) {
+        return messages.validation.groupError;
+      }
+    },
+
     /**
      * Emits an event with the updated chart configuration.
+     * @param {Event} evt - event triggered by the save button
      */
-    save() {
+    save(evt) {
       const { model } = this;
-      this.$emit('save-chart', this.copyModel(model));
+
+      this.validateForm();
+      if (this.hasErrors) {
+        evt.stopPropagation();
+      } else {
+        this.$emit('save-chart', this.copyModel(model));
+      }
     }
   },
 
@@ -464,18 +642,6 @@ export default {
       return Boolean(window.$ && window.$.fn && window.$.fn.datepicker);
     },
 
-    titleError() {
-      return '';
-    },
-
-    startDateErrors() {
-      return '';
-    },
-
-    endDateErrors() {
-      return '';
-    },
-
     eventChoices() {
       const { eventNames } = this;
       return eventNames.map(name => ({ label: name, value: name }));
@@ -494,10 +660,6 @@ export default {
           .map(f => ({ label: fieldLabel(f), value: f.field_name }));
     },
 
-    dateIntervalErrors() {
-      return '';
-    },
-
     groupForms() {
       const { hasEvents, events, model } = this;
       const { groupFieldEvent } = model;
@@ -539,16 +701,21 @@ export default {
         .reduce((acc, key) => acc + targets[key], 0);
     },
 
-    groupFieldErrors() {
-      return '';
+    errorCount() {
+      const { errors } = this;
+      return Object.values(errors)
+        .filter(Boolean)
+        .length;
     },
 
-    targetEndDateErrors() {
-      return '';
+    hasErrors() {
+      const { errorCount } = this;
+      return errorCount > 0;
     },
 
     submitDisabled() {
-      return false;
+      const { isDirty, hasErrors } = this;
+      return !isDirty || hasErrors;
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 0bec06e2..c763444e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -119,7 +119,7 @@
       "integrity": "sha1-oexFIIH2x6n6JFR44t4ieVOjBFU=",
       "dev": true,
       "requires": {
-        "lodash": "4.17.4"
+        "lodash": "4.17.10"
       }
     },
     "accepts": {
@@ -407,7 +407,7 @@
         "convert-source-map": "1.5.0",
         "debug": "2.6.9",
         "json5": "0.5.1",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "minimatch": "3.0.4",
         "path-is-absolute": "1.0.1",
         "private": "0.1.8",
@@ -426,7 +426,7 @@
         "babel-types": "6.26.0",
         "detect-indent": "4.0.0",
         "jsesc": "1.3.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "source-map": "0.5.7",
         "trim-right": "1.0.1"
       }
@@ -463,7 +463,7 @@
         "babel-helper-function-name": "6.24.1",
         "babel-runtime": "6.26.0",
         "babel-types": "6.26.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.10"
       }
     },
     "babel-helper-explode-assignable-expression": {
@@ -528,7 +528,7 @@
       "requires": {
         "babel-runtime": "6.26.0",
         "babel-types": "6.26.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.10"
       }
     },
     "babel-helper-remap-async-to-generator": {
@@ -654,7 +654,7 @@
         "babel-template": "6.26.0",
         "babel-traverse": "6.26.0",
         "babel-types": "6.26.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.10"
       }
     },
     "babel-plugin-transform-es2015-classes": {
@@ -948,7 +948,7 @@
         "babel-runtime": "6.26.0",
         "core-js": "2.5.1",
         "home-or-tmp": "2.0.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "mkdirp": "0.5.1",
         "source-map-support": "0.4.18"
       }
@@ -979,7 +979,7 @@
         "babel-traverse": "6.26.0",
         "babel-types": "6.26.0",
         "babylon": "6.18.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.10"
       }
     },
     "babel-traverse": {
@@ -996,7 +996,7 @@
         "debug": "2.6.9",
         "globals": "9.18.0",
         "invariant": "2.2.2",
-        "lodash": "4.17.4"
+        "lodash": "4.17.10"
       }
     },
     "babel-types": {
@@ -1007,7 +1007,7 @@
       "requires": {
         "babel-runtime": "6.26.0",
         "esutils": "2.0.2",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "to-fast-properties": "1.0.3"
       }
     },
@@ -1618,7 +1618,7 @@
       "integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
       "dev": true,
       "requires": {
-        "lodash": "4.17.4"
+        "lodash": "4.17.10"
       }
     },
     "commander": {
@@ -2576,7 +2576,7 @@
         "js-yaml": "3.10.0",
         "json-stable-stringify": "1.0.1",
         "levn": "0.3.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "minimatch": "3.0.4",
         "mkdirp": "0.5.1",
         "natural-compare": "1.4.0",
@@ -2866,7 +2866,7 @@
           "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
           "dev": true,
           "requires": {
-            "lodash": "4.17.4"
+            "lodash": "4.17.10"
           }
         }
       }
@@ -3868,7 +3868,7 @@
       "requires": {
         "html-minifier": "3.5.15",
         "loader-utils": "0.2.17",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "pretty-error": "2.1.1",
         "tapable": "1.0.0",
         "toposort": "1.0.7",
@@ -4124,7 +4124,7 @@
         "cli-width": "2.2.0",
         "external-editor": "2.1.0",
         "figures": "2.0.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "mute-stream": "0.0.7",
         "run-async": "2.3.0",
         "rx-lite": "4.0.8",
@@ -4739,10 +4739,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.4",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
-      "dev": true
+      "version": "4.17.10",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7252,7 +7251,7 @@
         "ajv": "5.3.0",
         "ajv-keywords": "2.1.1",
         "chalk": "2.3.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
         "slice-ansi": "1.0.0",
         "string-width": "2.1.1"
       },
@@ -7708,7 +7707,7 @@
           "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
           "dev": true,
           "requires": {
-            "lodash": "4.17.4"
+            "lodash": "4.17.10"
           }
         }
       }
@@ -7749,7 +7748,7 @@
           "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
           "dev": true,
           "requires": {
-            "lodash": "4.17.4"
+            "lodash": "4.17.10"
           }
         },
         "supports-color": {
diff --git a/package.json b/package.json
index 98731407..e71a2565 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "clean": "rm -rf dist junit",
     "prebuild": "npm install",
     "build": "webpack --optimize-minimize",
-    "test": "karma start karma.conf.js",
+    "test": "karma start karma.conf.js --single-run",
     "test-jenkins": "karma start karma.conf.js --single-run --reporters junit --browsers Chrome_Headless",
     "test-single-run": "karma start karma.conf.js --single-run",
     "start": "WATCHING=1 webpack --progress --colors --watch"
@@ -52,6 +52,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
+    "lodash": "^4.17.10",
     "qs": "^6.5.2",
     "striptags": "^2.2.1",
     "uuid": "^3.1.0",
diff --git a/test/components/ChartForm_test.js b/test/components/ChartForm_test.js
index 4dfe66e9..3956f08c 100644
--- a/test/components/ChartForm_test.js
+++ b/test/components/ChartForm_test.js
@@ -91,6 +91,7 @@ describe('ChartForm.vue', () => {
           metadata: exampleMetadata
         }
       });
+      withValidData.vm.isDirty = true;
       withValidData.find('button[type=submit]').trigger('click');
       expect(withValidData.emitted()['save-chart']).toBeDefined();
       expect(withValidData.emitted()['save-chart'][0]).toEqual([ exampleChart ]);
@@ -201,7 +202,7 @@ describe('ChartForm.vue', () => {
       })
     });
 
-    xdescribe('validation', () => {
+    describe('validation', () => {
       let form;
 
       beforeEach(() => {
@@ -209,60 +210,69 @@ describe('ChartForm.vue', () => {
           propsData: {
             chartDef: exampleChart,
             metadata: exampleMetadata
+          },
+
+          // stub out the use of debounce so tests run synchronously
+          methods: {
+            validateChanges(evt) {
+              const { target } = evt;
+              this.validateInput(target);
+            }
           }
         });
       });
 
       it('disables saving when required fields are missing', () => {
         // delete the title
-        form.find(selector.titleField).val('').change();
+        const titleInput = form.find(selector.titleField);
+        titleInput.setValue('');
 
-        expect(form.find('.has-error').length).toEqual(1);
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.findAll(selector.validationError).length).toEqual(1);
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
       });
 
       it('validates date formats', () => {
         // enter an invalid date
-        form.find(selector.startDateField).val('02/30/2017').change();
+        form.find(selector.startDateField).setValue('02/30/2017');
 
-        expect(form.find('.has-error').length).toEqual(1);
+        expect(form.findAll(selector.validationError).length).toEqual(1);
         expect(form.text()).toMatch('Dates must be MM/DD/YYYY format.');
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
       });
 
       it('validates chart end date formats', () => {
         // enter an invalid date
-        form.find('input[name=chart_end_date]').val('02/30/2017').change();
+        form.find('input[name=chart_end_date]').setValue('02/30/2017');
 
-        expect(form.find('.has-error').length).toEqual(1);
+        expect(form.findAll(selector.validationError).length).toEqual(1);
         expect(form.text()).toMatch('Dates must be MM/DD/YYYY format.');
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
       });
 
       it('disables saving when target date validation fails', () => {
         // make a change to enable save button
-        form.find(selector.titleField).val('Test Title').change();
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(false);
+        form.find(selector.titleField).setValue('Test Title');
+        expect(form.find(selector.saveButton).attributes().disabled).toBeFalsy();
 
         // delete the start date, which is required when target is present
-        form.find(selector.startDateField).val('').change();
+        form.find(selector.startDateField).setValue('');
 
         // errors should disable save button
-        expect(form.find('.has-error').length).toEqual(1);
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.findAll(selector.validationError).length).toEqual(1);
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
       });
 
       it('clears errors on cancel', () => {
         // delete the title
-        form.find(selector.titleField).val('').change();
+        form.find(selector.titleField).setValue('');
 
-        expect(form.find('.has-error').length).toEqual(1);
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.findAll(selector.validationError).length).toEqual(1);
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
 
         // click the cancel button
-        form.find(selector.cancelButton).click();
+        form.find(selector.cancelButton).trigger('click');
 
-        expect(form.find('.has-error').length).toEqual(0);
+        expect(form.findAll(selector.validationError).length).toEqual(0);
       });
     });
 
@@ -342,7 +352,7 @@ describe('ChartForm.vue', () => {
       });
     });
 
-    xdescribe('longitudinalValidation', () => {
+    describe('longitudinalValidation', () => {
       let form;
 
       beforeEach(() => {
@@ -350,36 +360,45 @@ describe('ChartForm.vue', () => {
           propsData: {
             chartDef: exampleLongitudinalChart,
             metadata: exampleLongitudinalMetadata
+          },
+
+          // stub out the use of debounce so tests run synchronously
+          methods: {
+            validateChanges(evt) {
+              const { target } = evt;
+              this.validateInput(target);
+            }
           }
         });
       });
 
       it('disables saving when date field event is missing', () => {
         // unselect the event
-        form.find(selector.dateFieldEventSelect).val('').change();
+        form.findAll(`${selector.dateFieldEventSelect} > option`).at(0).setSelected();
 
-        expect(form.find('.has-error').length).toEqual(2); // date event and date field are invalid
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.findAll(selector.validationError).length).toEqual(1); // date event is invalid
+        expect(form.vm.model.field).toEqual(''); // date field is cleared
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
       });
 
       it('validates date field event selected if date field selected', () => {
         // Unselect date field event - select date field
-        form.find(selector.dateFieldEventSelect).val('').change();
-        form.find(selector.dateFieldSelect).val('screen_date').change();
+        form.findAll(`${selector.dateFieldEventSelect} > option`).at(0).setSelected();
+        form.findAll(`${selector.dateFieldSelect} > option`).at(1).setSelected();
 
-        expect(form.find('.has-error').length).toEqual(2); // date event and date field are invalid
+        expect(form.findAll(selector.validationError).length).toEqual(2); // date event and date field are invalid
         expect(form.text()).toMatch('An event must be selected before selecting a date field');
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
       });
 
       it('validates group event selected if group selected', () => {
         // Unselect group event - select group field
-        form.find(selector.groupFieldEventSelect).val('').change();
-        form.find(selector.groupingFieldSelect).val('study_clinic').change();
+        form.findAll(`${selector.groupFieldEventSelect} > option`).at(0).setSelected();
+        form.findAll(`${selector.groupingFieldSelect} > option`).at(1).setSelected();
 
-        expect(form.find('.has-error').length).toEqual(1);
+        expect(form.findAll(selector.validationError).length).toEqual(1);
         expect(form.text()).toMatch('An event must be selected before selecting a grouping field');
-        expect(form.find(selector.saveButton).prop('disabled')).toBe(true);
+        expect(form.find(selector.saveButton).attributes().disabled).toBeTruthy();
       });
     });
   });

From 5a877c03043e2b202bf17a43254151e5bbe87a51 Mon Sep 17 00:00:00 2001
From: Heath Harrelson <harrelst@ohsu.edu>
Date: Tue, 10 Jul 2018 13:47:50 -0700
Subject: [PATCH 2/2] Trim Input Values Before Validation

Trim input values before validating them to match the behavior
of `v-model`.
---
 js/components/ChartForm.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/components/ChartForm.vue b/js/components/ChartForm.vue
index 12195473..6955043d 100644
--- a/js/components/ChartForm.vue
+++ b/js/components/ChartForm.vue
@@ -515,7 +515,7 @@ export default {
      * @return {String} an error message if the input is invalid
      */
     validateRequiredInput(el) {
-      return !el.value ? messages.validation.requiredError : null;
+      return !el.value.trim() ? messages.validation.requiredError : null;
     },
 
     /**
@@ -524,7 +524,7 @@ export default {
      * @return {String} an error message if the input is invalid
      */
     validateDate(el) {
-      const value = el.value;
+      const value = el.value.trim();
       if (value && !moment(value, userDateFormat, true).isValid()) {
         return messages.validation.dateFormatError;
       }
@@ -561,7 +561,7 @@ export default {
       } else {
         // validating date input; check that if target(s) present, dates exist
         const targetValues = Object.values(targets).filter(Number.isFinite);
-        if (targetValues.length > 0 && !el.value) {
+        if (targetValues.length > 0 && !el.value.trim()) {
           return messages.validation.targetDateError;
         }
       }