Merge pull request #34 from offirgolan/eb-update

Support ember-bootstrap v4 and ember-cp-validations v4, drop support for older versions

Author: simonihmig

README.md

@@ -11,10 +11,10 @@ further details.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember Bootstrap v3
-* Ember CP Validations v3
-* Ember.js v3.12 or above
-* Ember CLI v2.13 or above
+* Ember Bootstrap v4
+* Ember CP Validations v4
+* Ember.js v3.16 or above
+* Ember CLI v3.15 or above
 * Node.js v10 or above
 
 

addon/components/bs-form.js

@@ -1,20 +1,26 @@
-import { notEmpty } from '@ember/object/computed';
 import ObjectProxy from '@ember/object/proxy';
-import { Promise as EmberPromise } from 'rsvp';
 import BsForm from 'ember-bootstrap/components/bs-form';
 
-export default BsForm.extend({
-  hasValidator: notEmpty('model.validate'),
+export default class ValidatedBsFrom extends BsForm {
+  // Silence subclassing warning, as we need to extend for our current validations API. This means we need to treat
+  // this addon as a "privileged" one, and guarantee that we will account for possible changes that would things break
+  // due to us extending from the base class (e.g. when refactoring bs-form components to Glimmer.Component)
+  '__ember-bootstrap_subclass' = true;
 
-  validate(model) {
-    return new EmberPromise((resolve, reject) => {
-      let m = model;
+  get hasValidator() {
+    return !!this.model.validate;
+  }
+
+  async validate(model) {
+    let m = model;
 
-      if(model instanceof ObjectProxy && model.get('content') && typeof model.get('content').validate === 'function') {
-        m = model.get('content');
-      }
+    if (model instanceof ObjectProxy && model.get('content') && typeof model.get('content').validate === 'function') {
+      m = model.get('content');
+    }
 
-      m.validate().then(() => model.get('validations.isTruelyValid') ? resolve() : reject(), reject);
-    });
+    await m.validate()
+    if (!model.validations.isTruelyValid) {
+      throw new Error();
+    }
   }
-});
+}

addon/components/bs-form/element.js

@@ -2,26 +2,29 @@ import { not, notEmpty, and, readOnly } from '@ember/object/computed';
 import { defineProperty } from '@ember/object';
 import BsFormElement from 'ember-bootstrap/components/bs-form/element';
 
-export default BsFormElement.extend({
-  _attrValidations: null,
-  notValidating: not('isValidating').readOnly(),
-  notDisabled: not('disabled').readOnly(),
-  _presenceEnabled: not('_attrValidations.options.presence.disabled'),
+export default class ValidatedBsFormElement extends BsFormElement {
+  '__ember-bootstrap_subclass' = true;
 
   // Overwrite
-  hasValidator: notEmpty('_attrValidations').readOnly(),
-  hasErrors: and('_attrValidations.isInvalid', 'notValidating').readOnly(),
-  isValidating: readOnly('_attrValidations.isValidating'),
+  @notEmpty('_attrValidations')
+  hasValidator;
 
-  // mark as required only if:
-  // - field is not disabled,
-  // - presence validator requires presence
-  // - presence validator is enabled
-  required: and('notDisabled', '_attrValidations.options.presence.presence', '_presenceEnabled'),
+  @not('isValidating')
+  notValidating;
+
+  @and('_attrValidations.isInvalid', 'notValidating')
+  hasErrors;
+
+  @readOnly('_attrValidations.isValidating')
+  isValidating;
+
+  @readOnly('_attrValidations.messages')
+  errors;
+
+  @readOnly('_attrValidations.warningMessages')
+  warnings;
 
   setupValidations() {
     defineProperty(this, '_attrValidations', readOnly(`model.validations.attrs.${this.property}`));
-    defineProperty(this, 'errors', readOnly('_attrValidations.messages'));
-    defineProperty(this, 'warnings', readOnly('_attrValidations.warningMessages'));
   }
-});
+}

ember-cli-build.js

@@ -4,7 +4,10 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {
-    // Add options here
+    'ember-bootstrap': {
+      bootstrapVersion: 4,
+      importBootstrapCSS: true
+    }
   });
 
   /*

package.json

@@ -39,16 +39,16 @@
     "@glimmer/component": "^1.0.1",
     "@glimmer/tracking": "^1.0.1",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.3.1",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.6.0",
-    "ember-bootstrap": "^3.1.4",
+    "ember-bootstrap": "^4.1.0",
     "ember-cli": "~3.21.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-uglify": "^3.0.0",
-    "ember-cp-validations": "^3.5.6",
+    "ember-cp-validations": "^4.0.0-beta.10",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-getowner-polyfill": "^2.2.0",

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

@@ -3,7 +3,7 @@ import ObjectProxy from '@ember/object/proxy';
 import { setOwner } from '@ember/application';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, triggerEvent } from '@ember/test-helpers';
+import { render, triggerEvent, blur, fillIn, focus } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { buildValidations, validator } from 'ember-cp-validations';
 
@@ -71,6 +71,29 @@ module('Integration | Component | bs form element', function(hooks) {
     assert.dom('input').hasClass('is-invalid', 'input has error class');
   });
 
+  test('validations are reactive', async function(assert) {
+    let model = Model.create({
+    });
+    setOwner(model, this.owner);
+
+    this.set('model', model);
+
+    await render(hbs`
+      <BsForm @model={{this.model}} as |form|>
+        <form.element @label="test" @property="test" />
+      </BsForm>
+    `);
+
+    await focus('input');
+    await blur('input');
+    assert.dom('input').hasClass('is-invalid', 'input has error class');
+
+    await fillIn('input', 'xxx');
+    await blur('input');
+
+    assert.dom('input').hasNoClass('is-invalid', 'input has no error class');
+  });
+
   test('valid validation is supported as expected when working with an ember-buffered-proxy model', async function(assert) {
     let proxiedModel = EmberObject.create();
     setOwner(proxiedModel, this.owner);