Debounced validation functionality

README.md

@@ -25,6 +25,7 @@ __No observers were used nor harmed while developing and testing this addon.__
 * Meta data based cycle tracking to detect cycles within your model relationships which could break the CP chain
 * Custom validators
 * Ember CLI generator to create custom validators with a unit test
+* Debounced validations
 * I18n support
 
 [![Introduction to ember-cp-validations](https://i.vimeocdn.com/video/545445254.png?mw=1920&mh=1080&q=70)](https://vimeo.com/146857699)

addon/validations/factory.js

@@ -14,6 +14,7 @@ import cycleBreaker from '../utils/cycle-breaker';
 const {
   get,
   set,
+  run,
   RSVP,
   isNone,
   guidFor,
@@ -179,19 +180,19 @@ function createGlobalValidationProps(validatableAttrs) {
 function createMixin(GlobalValidations, AttrValidations) {
   return Ember.Mixin.create({
     validate() {
-        return get(this, 'validations').validate(...arguments);
-      },
-      validateSync() {
-        return get(this, 'validations').validateSync(...arguments);
-      },
-      validations: computed(function() {
-        return GlobalValidations.create({
-          model: this,
-          attrs: AttrValidations.create({
-            _model: this
-          })
-        });
-      }).readOnly()
+      return get(this, 'validations').validate(...arguments);
+    },
+    validateSync() {
+      return get(this, 'validations').validateSync(...arguments);
+    },
+    validations: computed(function() {
+      return GlobalValidations.create({
+        model: this,
+        attrs: AttrValidations.create({
+          _model: this
+        })
+      });
+    }).readOnly()
   });
 }
 
@@ -205,28 +206,28 @@ function createCPValidationFor(attribute, validations) {
   var dependentKeys = getCPDependentKeysFor(attribute, validations);
   return computed(...dependentKeys, cycleBreaker(function() {
     var model = get(this, '_model');
-    // var modelErrors = get(model, 'errors');
     var validators = getValidatorsFor(attribute, model);
 
-    var validationResults = validators.map((validator) => {
-      var validationReturnValue = validator.validate(get(model, attribute), validator.processOptions(), model, attribute);
+    var validationResults = validators.map(validator => {
+      let options = validator.processOptions();
+      let debounce = get(options, 'debounce') || 0;
+      let validationReturnValue;
+
+      if(debounce > 0) {
+        // Return a promise and pass the resolve method to the debounce handler
+        validationReturnValue = new Promise(function(resolve) {
+          run.debounce(validator, getValidationResult, validator, options, model, attribute, resolve, debounce, false);
+        });
+      } else {
+        validationReturnValue = getValidationResult(validator, options, model, attribute);
+      }
+
       return validationReturnValueHandler(attribute, validationReturnValue, model);
     });
 
-    validationResults = flatten(validationResults);
-    var validationResultsCollection = ValidationResultCollection.create({
-      attribute, content: validationResults
+    return ValidationResultCollection.create({
+      attribute, content: flatten(validationResults)
     });
-
-    // https://github.com/emberjs/data/issues/3707
-    // if (hasEmberData() && model instanceof self.DS.Model && !isNone(modelErrors) && canInvoke(modelErrors, 'add')) {
-    //   if(modelErrors.has(attribute)) {
-    //     modelErrors.remove(attribute);
-    //   }
-    //   get(validationResultsCollection, 'messages').forEach((m) => modelErrors.add(attribute, m));
-    // }
-
-    return validationResultsCollection;
   }));
 }
 
@@ -271,6 +272,25 @@ function getCPDependentKeysFor(attribute, validations) {
   return dependentKeys.uniq();
 }
 
+/**
+ * Used to retrieve the validation result by calling the validate method on the validator.
+ * If resolve is passed, that means that this validation has been debounced to we pass the
+ * result to the resolve method.
+ * @param  {Validator} validator
+ * @param  {Object} options
+ * @param  {Object} model
+ * @param  {String} attribute
+ * @param  {Function} resolve
+ */
+function getValidationResult(validator, options, model, attribute, resolve) {
+  let result = validator.validate(get(model, attribute), options, model, attribute);
+  if(resolve && typeof resolve === 'function') {
+    resolve(result);
+  } else {
+    return result;
+  }
+}
+
 /**
  * A handler used to create ValidationResult object from values returned from a validator
  * @param  {String} attribute

addon/validations/result.js

@@ -162,7 +162,9 @@ export default Ember.Object.extend({
     var validations = get(this, '_validations');
     set(validations, 'isValidating', true);
     get(this, '_promise').then(
-      (result) => this.update(result), (result) => this.update(result)).catch(reason => {
+      result => this.update(result),
+      result => this.update(result)
+    ).catch(reason => {
       // TODO: send into error state
       throw reason;
     }).finally(() => {

docs/docs/validators/common.md

@@ -26,6 +26,19 @@ validator('x-validator', {
 })
 ```
 
+## debounce
+Debounces the validation with the given time in `milliseconds`. All debounced validations will be handled asynchronously (wrapped in a promise).
+
+```javascript
+// Examples
+validator('length', {
+    debounce: 500
+})
+validator('x-validator', {
+    debounce: 250
+})
+```
+
 ## message 
 This option can take two forms. It can either be a `string` or a `function`. If a string is used, then it will overwrite all error message types for the specified validator.
 

tests/dummy/app/components/validated-input.js

@@ -7,54 +7,38 @@ import Ember from 'ember';
 
 const {
   computed,
-  observer,
   defineProperty,
-  run
 } = Ember;
 
 export default Ember.Component.extend({
   classNames: ['validated-input'],
   classNameBindings: ['showErrorClass:has-error', 'isValid:has-success'],
   model: null,
   value: null,
-  rawInputValue: null,
   type: 'text',
   valuePath: '',
   placeholder: '',
   attributeValidation: null,
   isTyping: false,
 
-  didValidate: computed.oneWay('targetObject.didValidate'),
-
-  showErrorClass: computed('isTyping', 'showMessage', 'hasContent', 'attributeValidation', function() {
-    return this.get('attributeValidation') && !this.get('isTyping') && this.get('showMessage') && this.get('hasContent');
-  }),
-
-  hasContent: computed.notEmpty('rawInputValue'),
-
-  isValid: computed.and('hasContent', 'attributeValidation.isValid'),
+  init() {
+    this._super(...arguments);
+    var valuePath = this.get('valuePath');
+    defineProperty(this, 'attributeValidation', computed.oneWay(`model.validations.attrs.${valuePath}`));
+    defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
+  },
 
+  notValidating: computed.not('attributeValidation.isValidating'),
+  didValidate: computed.oneWay('targetObject.didValidate'),
+  hasContent: computed.notEmpty('value'),
+  isValid: computed.and('hasContent', 'attributeValidation.isValid', 'notValidating'),
   isInvalid: computed.oneWay('attributeValidation.isInvalid'),
 
-  inputValueChange: observer('rawInputValue', function() {
-    this.set('isTyping', true);
-    run.debounce(this, this.setValue, 500, false);
+  showErrorClass: computed('notValidating', 'showMessage', 'hasContent', 'attributeValidation', function() {
+    return this.get('attributeValidation') && this.get('notValidating') && this.get('showMessage') && this.get('hasContent');
   }),
 
   showMessage: computed('attributeValidation.isDirty', 'isInvalid', 'didValidate', function() {
     return (this.get('attributeValidation.isDirty') || this.get('didValidate')) && this.get('isInvalid');
-  }),
-
-  setValue() {
-    this.set('value', this.get('rawInputValue'));
-    this.set('isTyping', false);
-  },
-
-  init() {
-    this._super(...arguments);
-    var valuePath = this.get('valuePath');
-    defineProperty(this, 'attributeValidation', computed.oneWay(`model.validations.attrs.${valuePath}`));
-    this.set('rawInputValue', this.get(`model.${valuePath}`));
-    defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
-  }
+  })
 });

tests/dummy/app/models/user-detail.js

@@ -14,15 +14,24 @@ from 'ember-cp-validations';
 var attr = DS.attr;
 
 var Validations = buildValidations({
-  firstName: validator('presence', true),
-  lastName: validator('presence', true),
+  firstName: validator('presence', {
+    presence: true,
+    debounce: 500
+  }),
+  lastName: validator('presence', {
+    presence: true,
+    debounce: 500
+  }),
   dob: {
     description: 'Date of  birth',
+    debounce: 500,
     validators: [
       validator('presence', true),
       validator('date', {
         before: 'now',
-        after() { return moment().subtract(120, 'years').format('M/D/YYYY'); },
+        after() {
+          return moment().subtract(120, 'years').format('M/D/YYYY');
+        },
         format: 'M/D/YYYY',
         message: function(type, value, context) {
           if (type === 'before') {
@@ -33,16 +42,19 @@ var Validations = buildValidations({
           }
         }
       })
-  ]},
+    ]
+  },
   phone: [
     validator('format', {
       allowBlank: true,
+      debounce: 500,
       type: 'phone'
     })
   ],
   url: [
     validator('format', {
       allowBlank: true,
+      debounce: 500,
       type: 'url'
     })
   ]

tests/dummy/app/models/user.js

@@ -13,14 +13,18 @@ from 'ember-cp-validations';
 var attr = DS.attr;
 
 var Validations = buildValidations({
-  username: [
-    validator('presence', true),
-    validator('length', {
-      max: 15
-    })
-  ],
+  username: {
+    debounce: 500,
+    validators: [
+      validator('presence', true),
+      validator('length', {
+        max: 15
+      })
+    ]
+  },
   password: {
     description: 'Password',
+    debounce: 500,
     validators: [
       validator('presence', true),
       validator('length', {
@@ -33,15 +37,19 @@ var Validations = buildValidations({
       })
     ]
   },
-  email: [
-    validator('presence', true),
-    validator('format', {
-      type: 'email'
-    })
-  ],
+  email: {
+    debounce: 500,
+    validators: [
+      validator('presence', true),
+      validator('format', {
+        type: 'email'
+      })
+    ]
+  },
   emailConfirmation: validator('confirmation', {
     on: 'email',
-    message: 'Email addresses do not match'
+    message: 'Email addresses do not match',
+    debounce: 500
   }),
   details: validator('belongs-to')
 });

tests/dummy/app/templates/components/validated-input.hbs

@@ -1,5 +1,5 @@
 <div class="form-group">
-  {{input type=type value=rawInputValue placeholder=placeholder class="form-control" name=valuePath}}
+  {{input type=type value=value placeholder=placeholder class="form-control" name=valuePath}}
   {{#if isValid}}
     <span class="valid-input fa fa-check"></span>
   {{/if}}

tests/integration/validations/factory-general-test.js

@@ -247,3 +247,35 @@ test("custom messages object", function(assert) {
   assert.equal(object.get('validations.attrs.firstName.isValidating'), false);
   assert.equal(object.get('validations.attrs.firstName.message'), 'Test error message');
 });
+
+test("debounced validations", function(assert) {
+  var done = assert.async();
+  var Validations = buildValidations({
+    firstName: validator(Validators.presence),
+    lastName: validator(Validators.presence, { debounce: 500 }),
+  });
+  var object = setupObject(this, Ember.Object.extend(Validations));
+
+  assert.equal(object.get('validations.isValid'), false, 'isValid was expected to be FALSE');
+  // TODO: I feel like initially a debounced validation should not be debounced.
+  assert.equal(object.get('validations.isValidating'), true, 'isValidating was expected to be TRUE');
+  assert.equal(object.get('validations.isTruelyValid'), false, 'isTruelyValid was expected to be FALSE');
+
+  Ember.run.later(() => {
+    assert.equal(object.get('validations.attrs.lastName.isValid'), false);
+    assert.equal(object.get('validations.attrs.lastName.isValidating'), false);
+    assert.equal(object.get('validations.attrs.lastName.message'), 'lastName should be present');
+
+    object.set('lastName', 'Golan');
+    // TODO: This is true because a new Validation result object is created which initially defaults to TRUE
+    assert.equal(object.get('validations.attrs.lastName.isValid'), true);
+    assert.equal(object.get('validations.attrs.lastName.isValidating'), true);
+
+    Ember.run.later(() => {
+      assert.equal(object.get('validations.attrs.lastName.isValid'), true);
+      assert.equal(object.get('validations.attrs.lastName.isValidating'), false);
+      assert.equal(object.get('validations.attrs.lastName.message'), null);
+      done();
+    }, 600);
+  }, 600);
+});