Merge pull request #13 from arenoir/ember-changeset-2-update

upgrade ember ember-changeset-validations refactor validate method an…

Author: simonihmig

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 node_js:
   # we recommend testing addons with the same minimum supported node version as Ember CLI
   # so that your addon works for all apps
-  - "4"
+  - "6"
 
 sudo: false
 dist: trusty

addon/components/bs-form.js

@@ -1,28 +1,23 @@
 import { notEmpty } from '@ember/object/computed';
 import { assert } from '@ember/debug';
 import RSVP from 'rsvp';
-import { observer } from '@ember/object';
 import BsForm from 'ember-bootstrap/components/bs-form';
 
 export default BsForm.extend({
-  init() {
-    this._super(...arguments);
-
-    this._initValidation();
-  },
 
   hasValidator: notEmpty('model.validate'),
 
   validate(model) {
     let m = model;
 
     assert('Model must be a Changeset instance', m && typeof m.validate === 'function');
-    return m.get('isValid') ? RSVP.resolve() : RSVP.reject();
-  },
-
-  _initValidation: observer('model', function() {
-    if (this.get('hasValidator')) {
-      this.get('model').validate();
-    }
-  })
+    return new RSVP.Promise( function(resolve, reject) {
+      m.validate().then(
+        () => {
+          model.get('isValid') ? resolve() : reject();
+        },
+        reject
+      );
+    });
+  }
 });

addon/components/bs-form/element.js

@@ -13,4 +13,4 @@ export default BsFormElement.extend({
       return A(this.get(key));
     }));
   }
-});
+});

ember-cli-build.js

@@ -5,6 +5,9 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
     // Add options here
+    'ember-bootstrap': {
+      bootstrapVersion: 3
+    },
   });
 
   /*
@@ -14,5 +17,6 @@ module.exports = function(defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
+
   return app.toTree();
 };

package.json

@@ -25,14 +25,14 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
-    "ember-changeset-validations": "^1.2.5",
+    "ember-changeset-validations": "^2.1.0",
     "ember-cli-babel": "^6.6.0"
   },
   "devDependencies": {
     "bootstrap": "^3.3.7",
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
-    "ember-bootstrap": "^1.2.2",
+    "ember-bootstrap": "^2.5.0",
     "ember-cli": "~3.1.1",
     "ember-cli-dependency-checker": "^2.0.0",
     "ember-cli-eslint": "^4.2.1",
@@ -56,7 +56,7 @@
     "loader.js": "^4.2.3"
   },
   "engines": {
-    "node": "^4.5 || 6.* || >= 7.*"
+    "node": "6.* || 8.* || >= 10.*"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",

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

@@ -1,12 +1,15 @@
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, find, triggerEvent } from '@ember/test-helpers';
+import { render, find, triggerEvent, fillIn, focus, blur } from '@ember/test-helpers';
+
 import hbs from 'htmlbars-inline-precompile';
 
 import {
   validatePresence,
-    validateLength
+  validateLength,
+  validateConfirmation,
+  validateFormat,
 } from 'ember-changeset-validations/validators';
 
 module('Integration | Component | bs form element', function(hooks) {
@@ -24,6 +27,18 @@ 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) {
     let model = EmberObject.create({
       name: '1234'
@@ -79,4 +94,53 @@ module('Integration | Component | bs form element', function(hooks) {
     await triggerEvent('form', 'submit');
     assert.ok(find('.form-group').classList.contains('has-error'), 'form element group has error class');
   });
+
+
+  test('more complicated validations', async function(assert) {
+    let model = EmberObject.create({
+      name: '',
+      password: null,
+      passwordConfirmation: null,
+      email: ''
+    });
+
+    this.set('model', model);
+    this.set('validation', extendedValidation);
+    this.actions.submitAction = function() {
+      assert.ok(false, 'submit action must not been called.');
+    };
+    this.actions.invalidAction = function() {
+      assert.ok(true, 'Invalid action has been called.');
+    };
+
+    this.actions.validate = function() {
+      return 'invalid';
+    };
+
+    await render(hbs`
+      {{#bs-form model=(changeset model validation) onSubmit=(action "submitAction") onInvalid=(action "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"}}
+      {{/bs-form}}
+    `);
+
+    assert.expect(6);
+
+    await fillIn('#password-field', 'bad');
+    assert.notOk( find('#password').classList.contains('has-error'), 'password does not have error while typing.');
+    await blur('#password-field');
+    assert.ok( find('#password').classList.contains('has-error'), 'password does have error when focus out.');
+
+    await fillIn('#password-confirmation-field', 'betterpass');
+    assert.notOk( find('#password-confirmation').classList.contains('has-error'), 'password confirmation does not have error while typing.');
+    await focus('#password-field');
+    assert.ok( find('#password-confirmation').classList.contains('has-error'), 'password confirmation does have error when focus out.');
+
+
+    await triggerEvent('form', 'submit');
+    assert.ok(find('.form-group').classList.contains('has-error'), 'form element group has error class');
+  });
+
 });