Merge pull request emberjs-addons#97 from jelhan/yield-validation

feat(FormElement): yield validation state
rtablada · May 30, 2016 · 00bfde3 · 00bfde3
2 parents f9dd787 + 5f28d1e
commit 00bfde3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 11 deletions.
diff --git a/addon/components/bs-form-element.js b/addon/components/bs-form-element.js
@@ -96,7 +96,7 @@ const nonTextFieldControlTypes = Ember.A([
 
  ```hbs
  {{#bs-form formLayout="horizontal" model=this action="submit"}}
-   {{#bs-form-element label="Select-2" property="gender" as |value id|}}
+   {{#bs-form-element label="Select-2" property="gender" as |value id validationState|}}
      {{select-2 id=id content=genderChoices optionLabelPath="label" value=value searchEnabled=false}}
    {{/bs-form-element}}
  {{/bs-form}}

diff --git a/app/templates/components/form-element/horizontal/default.hbs b/app/templates/components/form-element/horizontal/default.hbs
@@ -2,7 +2,7 @@
     <label class="control-label {{horizontalLabelGridClass}}" for="{{formElementId}}">{{label}}</label>
     <div class="{{horizontalInputGridClass}}">
         {{#if hasBlock}}
-            {{yield value formElementId}}
+            {{yield value formElementId validation}}
         {{else}}
             {{bs-input id=formElementId name=name type=controlType value=value placeholder=placeholder autofocus=autofocus disabled=disabled required=required}}
         {{/if}}
@@ -12,7 +12,7 @@
 {{else}}
     <div class="{{horizontalInputGridClass}} {{horizontalInputOffsetGridClass}}">
         {{#if hasBlock}}
-            {{yield value}}
+            {{yield value formElementId validation}}
         {{else}}
             {{bs-input name=name type=controlType value=value placeholder=placeholder autofocus=autofocus disabled=disabled required=required}}
         {{/if}}

diff --git a/app/templates/components/form-element/inline/default.hbs b/app/templates/components/form-element/inline/default.hbs
@@ -2,7 +2,7 @@
     <label class="control-label" for="{{formElementId}}">{{label}}</label>
 {{/if}}
 {{#if hasBlock}}
-    {{yield value formElementId}}
+    {{yield value formElementId validation}}
 {{else}}
     {{bs-input id=formElementId name=name type=controlType value=value placeholder=placeholder autofocus=autofocus disabled=disabled required=required}}
 {{/if}}

diff --git a/app/templates/components/form-element/vertical/default.hbs b/app/templates/components/form-element/vertical/default.hbs
@@ -2,9 +2,9 @@
     <label class="control-label" for="{{formElementId}}">{{label}}</label>
 {{/if}}
 {{#if hasBlock}}
-    {{yield value formElementId}}
+    {{yield value formElementId validation}}
 {{else}}
     {{bs-input id=formElementId name=name type=controlType value=value placeholder=placeholder autofocus=autofocus disabled=disabled required=required}}
 {{/if}}
 {{partial "components/form-element/feedback-icon"}}
-{{partial "components/form-element/errors"}}
+{{partial "components/form-element/errors"}}
diff --git a/tests/integration/components/bs-form-element-test.js b/tests/integration/components/bs-form-element-test.js
@@ -1,6 +1,7 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import Ember from 'ember';
+import EmberValidations from 'ember-validations';
 
 moduleForComponent('bs-form-element', 'Integration | Component | bs-form-element', {
   integration: true
@@ -117,18 +118,36 @@ test('Changing formLayout changes markup', function(assert) {
 });
 
 test('Custom controls are supported', function(assert) {
-  this.set('gender', 'male');
+  this.set('model',
+    Ember.Object.extend(EmberValidations, {
+      gender: 'male',
+      validations: {
+        name: {
+          presence: true
+        }
+      }
+    }).create({
+      container: this.get('container')
+    })
+  );
   this.render(hbs`
-    {{#bs-form formLayout=formLayout model=this}}
-    {{#bs-form-element label="Gender" property="gender" as |value|}}
-      <div id="value">{{value}}</div>
-    {{/bs-form-element}}
+    {{#bs-form formLayout=formLayout model=model}}
+      {{#bs-form-element label="Gender" property="gender" as |value id validation|}}
+        <div id="value">{{value}}</div>
+        <div id="id">{{id}}</div>
+        <div id="validation">{{validation}}</div>
+      {{/bs-form-element}}
     {{/bs-form}}
   `);
 
   assert.equal(this.$('#value').length, 1, 'block template is rendered');
   assert.equal(this.$('#value').text().trim(), 'male', 'value is yielded to block template');
+  assert.equal(this.$('#id').text().trim(), `${$('.form-group').attr('id')}-field`, 'id is yielded to block template');
+  assert.equal(this.$('#validation').text().trim(), '');
 
+  this.$('form').submit();
+  assert.ok(this.$('.form-group').hasClass('has-success'), 'assumption');
+  assert.equal(this.$('#validation').text().trim(), 'success');
 });
 
 test('required property propagates', function(assert) {