fix initial validation

Author: jelhan

addon/components/bs-form/element.js

@@ -1,4 +1,5 @@
 import BsFormElement from 'ember-bootstrap/components/bs-form/element';
+import { action } from '@ember/object';
 import { dependentKeyCompat } from '@ember/object/compat';
 
 export default class BsFormElementWithChangesetValidationsSupport extends BsFormElement {
@@ -13,4 +14,43 @@ export default class BsFormElementWithChangesetValidationsSupport extends BsForm
   get hasValidator() {
     return typeof this.model.validate === 'function';
   }
+
+  // Ember Changeset does not validate the initial state. Properties are not
+  // validated until they are set the first time. But Ember Bootstrap may show
+  // validation results before the property was changed. We need to make sure
+  // that changeset is validated at that time.
+  // Ember Bootstrap may show the validation in three cases:
+  // 1. User triggered one of the events that should cause validation errors to
+  //    be shown (e.g. focus out) by interacting with the form element.
+  //    Ember Bootstrap stores these state in `showOwnValidation` property of
+  //    the form element.
+  // 2. User submits the form. Ember Bootstrap will show validation errors
+  //    for all form elements in that case. That state is handled by
+  //    `showAllValidations` arguments passed to the form element.
+  // 3. User passes in a validation error or warning explicilty using
+  //    `customError` or `customWarning` arguments of the form element.
+  // Ember Bootstrap ensures that the model is valided as part of its submit
+  // handler. So we can assume that validations are run in second case. Ember
+  // Bootstrap does not show the validation errors of the model but only the
+  // custom error and warning if present. So it does not matter if initial
+  // state is validated or not. That means we only have to handle the first
+  // case.
+  // Ember Bootstrap does not provide any API for validation plugins to support
+  // these needs. We have to override a private method to run the validate
+  // logic for now.
+  @action
+  async showValidationOnHandler(event) {
+    let validationShowBefore = this.showOwnValidation;
+
+    // run original implementation provided by Ember Bootstrap
+    super.showValidationOnHandler(event);
+
+    // run initial validation if
+    //   - visibility of validations changed
+    let canValidate = this.hasValidator && this.property;
+    let validationVisibilityChanged = !validationShowBefore && this.showOwnValidation;
+    if (canValidate && validationVisibilityChanged) {
+      await this.model.validate(this.property);
+    }
+  }
 }

tests/integration/components/bs-form-element-test.js

@@ -1,14 +1,10 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, triggerEvent, fillIn, blur } from '@ember/test-helpers';
-
+import { render, triggerEvent, fillIn, focus, blur } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-
 import {
   validatePresence,
   validateLength,
-  validateConfirmation,
-  validateFormat,
 } from 'ember-changeset-validations/validators';
 
 module('Integration | Component | bs form element', function(hooks) {
@@ -21,19 +17,7 @@ module('Integration | Component | bs form element', function(hooks) {
     ]
   };
 
-  const extendedValidation = {
-    name: [
-      validatePresence(true),
-      validateLength({ min: 4 })
-    ],
-    email: validateFormat({ type: 'email', allowBlank: true }),
-    password: [
-      validateLength({ min: 6 })
-    ],
-    passwordConfirmation: validateConfirmation({ on: 'password' })
-  }
-
-  test('valid validation is supported as expected', async function(assert) {
+  test('form is submitted if valid and validation success shown', async function(assert) {
     let model = {
       name: '1234',
     };
@@ -93,6 +77,7 @@ module('Integration | Component | bs form element', function(hooks) {
     `);
     assert.dom('input').doesNotHaveClass('is-invalid');
 
+    await focus('input');
     await blur('input');
     assert.dom('input').hasClass('is-invalid');
   });
@@ -108,6 +93,7 @@ module('Integration | Component | bs form element', function(hooks) {
     `);
     assert.dom('input').doesNotHaveClass('is-valid');
 
+    await focus('input');
     await blur('input');
     assert.dom('input').hasClass('is-valid');
   });
@@ -124,8 +110,10 @@ module('Integration | Component | bs form element', function(hooks) {
     assert.dom('input').doesNotHaveClass('is-invalid');
 
     await fillIn('input', 'R');
+    assert.dom('input').doesNotHaveClass('is-invalid', 'validation is not shown while user is typing');
+
     await blur('input');
-    assert.dom('input').hasClass('is-invalid');
+    assert.dom('input').hasClass('is-invalid', 'validation error is shown after focus out');
   });
 
   test('validation success is shown after user input', async function(assert) {
@@ -140,53 +128,9 @@ module('Integration | Component | bs form element', function(hooks) {
     assert.dom('input').doesNotHaveClass('is-valid');
 
     await fillIn('input', 'Rosa');
-    await blur('input');
-    assert.dom('input').hasClass('is-valid');
-  });
-
-  test('more complicated validations', async function(assert) {
-    let model = {
-      name: '',
-      password: null,
-      passwordConfirmation: null,
-      email: '',
-    };
+    assert.dom('input').doesNotHaveClass('is-valid', 'validation is not shown while user is typing');
 
-    this.set('model', model);
-    this.set('validation', extendedValidation);
-    this.submitAction = function() {
-      assert.ok(false, 'submit action must not been called.');
-    };
-    this.invalidAction = function() {
-      assert.step('Invalid action has been called.');
-    };
-
-    await render(hbs`
-      <BsForm @model={{changeset this.model this.validation}} @onSubmit={{this.submitAction}} @onInvalid={{this.invalidAction}} as |form|>
-        <form.element id="name" @label="Name" @property="name" />
-        <form.element id="email" @label="Email" @property="email" />
-        <form.element id="password" @label="Password" @property="password" />
-        <form.element id="password-confirmation" @label="Password confirmation" @property="passwordConfirmation" />
-      </BsForm>
-    `);
-
-    await fillIn('#password input', 'bad');
-    assert.dom('#password input').doesNotHaveClass('is-invalid', 'password does not have error while typing.');
-    assert.dom('#password input').doesNotHaveClass('is-valid', 'password does not have success while typing.');
-
-    await blur('#password input');
-    assert.dom('#password input').hasClass('is-invalid', 'password does have error when focus out.');
-
-    await fillIn('#password-confirmation input', 'betterpass');
-    assert.dom('#password-confirmation input').doesNotHaveClass('is-invalid', 'password confirmation does not have error while typing.');
-
-    await blur('#password-confirmation input');
-    assert.dom('#password-confirmation input').hasClass('is-invalid', 'password confirmation does have error when focus out.');
-
-    await triggerEvent('form', 'submit');
-    assert.dom('#password input').hasClass('is-invalid', 'password still has error after submit.');
-    assert.dom('#password-confirmation input').hasClass('is-invalid', 'password confirmation still has error after submit.');
-    assert.verifySteps(['Invalid action has been called.']);
+    await blur('input');
+    assert.dom('input').hasClass('is-valid', 'validation error is shown after focus out');
   });
-
 });