Merge af2ec48 into ee520a8

addon/templates/components/frost-bunsen-input-autocomplete.hbs

@@ -36,6 +36,7 @@
       hook=hook
       onChange=(action 'handleChange')
       onBlur=(action 'showErrorMessage')
+      onFocus=(action 'hideErrorMessage')
       options=selectSpreadProperties
       placeholder=placeholder
       width=width

addon/templates/components/frost-bunsen-input-multi-select.hbs

@@ -14,6 +14,8 @@
     error=(if renderErrorMessage true false)
     hook=hook
     onChange=(action 'handleChange')
+    onBlur=(action 'showErrorMessage')
+    onFocus=(action 'hideErrorMessage')
     options=selectSpreadProperties
     placeholder=placeholder
     selectedValue=mutableValue

addon/templates/components/frost-bunsen-input-select.hbs

@@ -35,7 +35,8 @@
       error=(if renderErrorMessage true false)
       hook=hook
       onChange=(action 'handleChange')
-      onFocusOut=(action 'showErrorMessage')
+      onBlur=(action 'showErrorMessage')
+      onFocus=(action 'hideErrorMessage')
       options=selectSpreadProperties
       placeholder=placeholder
       width=width

tests/integration/components/frost-bunsen-form/renderers/autocomplete-test.js

@@ -1,111 +1,158 @@
 import {expect} from 'chai'
 import {$hook} from 'ember-hook'
-import {setupComponentTest} from 'ember-mocha'
 import wait from 'ember-test-helpers/wait'
-import hbs from 'htmlbars-inline-precompile'
-import {afterEach, beforeEach, describe, it} from 'mocha'
-import sinon from 'sinon'
+import {beforeEach, describe, it} from 'mocha'
+import {setupFormComponentTest} from 'dummy/tests/helpers/utils'
 
 function getHook (hook, model) {
   return `${hook}-${model}`
 }
 
 describe('Integration: Component / frost-bunsen-form / renderer / autocomplete', function () {
-  setupComponentTest('frost-bunsen-form', {
-    integration: true
-  })
+  const hook = 'autocompleteTest'
 
-  const bunsenModel = {
-    properties: {
-      cookies: {
-        enum: [
-          'Chocolate',
-          'Peanut Butter',
-          'Oatmeal',
-          'Oreo'
-        ],
-        type: 'string'
-      }
-    },
-    type: 'object'
-  }
-
-  const bunsenView = {
-    cells: [
-      {
-        children: [
+  describe('selection', function () {
+    let ctx = setupFormComponentTest({
+      hook,
+      bunsenModel: {
+        properties: {
+          cookies: {
+            enum: [
+              'Chocolate',
+              'Peanut Butter',
+              'Oatmeal',
+              'Oreo'
+            ],
+            type: 'string'
+          }
+        },
+        type: 'object'
+      },
+      bunsenView: {
+        cells: [
           {
-            label: 'Cookie',
-            model: 'cookies',
-            renderer: {
-              name: 'autocomplete'
-            },
-            placeholder: 'Type o'
+            children: [
+              {
+                label: 'Cookie',
+                model: 'cookies',
+                renderer: {
+                  name: 'autocomplete'
+                },
+                placeholder: 'Type o'
+              }
+            ]
           }
-        ]
+        ],
+        type: 'form',
+        version: '2.0'
       }
-    ],
-    type: 'form',
-    version: '2.0'
-  }
-
-  let sandbox, onChange
-  const hook = 'autocompleteTest'
+    })
 
-  beforeEach(function () {
-    sandbox = sinon.sandbox.create()
-    onChange = sandbox.spy()
+    beforeEach(function () {
+      return wait()
+    })
 
-    this.setProperties({
-      bunsenModel,
-      bunsenView,
-      onChange,
-      hook
+    it('should render', function () {
+      expect($hook(getHook(hook, 'cookies') + '-autocompleteText-input').length).to.equal(1)
     })
 
-    this.render(hbs`
-      {{frost-bunsen-form
-        bunsenModel=bunsenModel
-        bunsenView=bunsenView
-        hook=hook
-        onChange=onChange
-      }}
-    `)
-    return wait()
-  })
+    describe('enter input', function () {
+      const testHook = getHook(hook, 'cookies')
+      beforeEach(function () {
+        ctx.props.onChange.reset()
+        $hook(`${testHook}-autocompleteText-input`).val('O').trigger('input').trigger('keypress')
+        return wait()
+      })
 
-  afterEach(function () {
-    sandbox.restore()
-  })
+      describe('select an item', function () {
+        let dropdownValue
 
-  it('should render', function () {
-    expect($hook(getHook(hook, 'cookies') + '-autocompleteText-input').length).to.equal(1)
-  })
+        beforeEach(function () {
+          const element = $hook(`${testHook}-autocompleteDropdown-item`, {index: 1})
+          dropdownValue = element.text().trim()
+          element.trigger('mousedown')
+          return wait()
+        })
 
-  describe('enter input', function () {
-    const testHook = getHook(hook, 'cookies')
-    beforeEach(function () {
-      onChange.reset()
-      $hook(`${testHook}-autocompleteText-input`).val('O').trigger('input').trigger('keypress')
-      return wait()
+        it('should have correct value chosen for input', function () {
+          expect($hook(`${testHook}-autocompleteText-input`)[0].value).to.equal(dropdownValue)
+        })
+        it('should have received onChange', function () {
+          expect(ctx.props.onChange.callCount, 'onChange is not called').to.equal(1)
+          expect(ctx.props.onChange.args[0][0].cookies, 'onChange argument values are wrong').to.equal(dropdownValue)
+        })
+      })
     })
+  })
+
+  describe('error', function () {
+    const schemas = {
+      bunsenModel: {
+        type: 'object',
+        required: ['foo'],
+        properties: {
+          foo: {
+            type: 'string'
+          },
+          bar: {
+            type: 'string'
+          }
+        }
+      },
+      bunsenView: {
+        type: 'form',
+        version: '2.0',
+        cells: [{
+          children: [{
+            model: 'foo',
+            renderer: {
+              name: 'autocomplete'
+            }
+          }, {
+            model: 'bar'
+          }]
+        }]
+      }
+    }
 
-    describe('select an item', function () {
-      let dropdownValue
+    describe('when showAllErrors is false', function () {
+      setupFormComponentTest({
+        ...schemas,
+        showAllErrors: false
+      })
 
       beforeEach(function () {
-        const element = $hook(`${testHook}-autocompleteDropdown-item`, {index: 1})
-        dropdownValue = element.text().trim()
-        element.trigger('mousedown')
         return wait()
       })
 
-      it('should have correct value chosen for input', function () {
-        expect($hook(`${testHook}-autocompleteText-input`)[0].value).to.equal(dropdownValue)
+      describe('when focus is toggled', function () {
+        beforeEach(function () {
+          $hook('bunsenForm-foo').find('.frost-autocomplete input').focus()
+          $hook('bunsenForm-bar-input').focus()
+
+          return wait()
+        })
+
+        it('should show error', function () {
+          const error = $hook('bunsenForm-foo').find('.frost-bunsen-error').text().trim()
+          expect(error).to.equal('Field is required.')
+        })
+      })
+    })
+
+    describe('when showAllErrors is true', function () {
+      setupFormComponentTest({
+        ...schemas,
+        showAllErrors: true
       })
-      it('should have received onChange', function () {
-        expect(onChange.callCount, 'onChange is not called').to.equal(1)
-        expect(onChange.args[0][0].cookies, 'onChange argument values are wrong').to.equal(dropdownValue)
+
+      beforeEach(function () {
+        return wait()
+      })
+
+      it('should show error', function () {
+        const error = $hook('bunsenForm-foo').find('.frost-bunsen-error').text().trim()
+        expect(error).to.equal('Field is required.')
       })
     })
   })

tests/integration/components/frost-bunsen-form/renderers/multi-select/error-test.js

@@ -0,0 +1,81 @@
+import {expect} from 'chai'
+import {$hook} from 'ember-hook'
+import wait from 'ember-test-helpers/wait'
+import {beforeEach, describe, it} from 'mocha'
+
+import {setupFormComponentTest} from 'dummy/tests/helpers/utils'
+
+const schemas = {
+  bunsenModel: {
+    type: 'object',
+    required: ['foo'],
+    properties: {
+      foo: {
+        type: 'array',
+        items: {
+          type: 'string'
+        }
+      },
+      bar: {
+        type: 'string'
+      }
+    }
+  },
+  bunsenView: {
+    type: 'form',
+    version: '2.0',
+    cells: [{
+      children: [{
+        model: 'foo',
+        renderer: {
+          name: 'multi-select'
+        }
+      }, {
+        model: 'bar'
+      }]
+    }]
+  }
+}
+
+describe('Integration: Component / frost-bunsen-form / renderer / multi-select error', function () {
+  describe('when showAllErrors is false', function () {
+    setupFormComponentTest({
+      ...schemas,
+      showAllErrors: false
+    })
+
+    beforeEach(function () {
+      return wait()
+    })
+
+    describe('when focus is toggled', function () {
+      beforeEach(function () {
+        $hook('bunsenForm-foo').find('.frost-select').focus()
+        $hook('bunsenForm-bar-input').focus()
+
+        return wait()
+      })
+
+      it('should show error', function () {
+        const error = $hook('bunsenForm-foo').find('.frost-bunsen-error').text().trim()
+        expect(error).to.equal('Field is required.')
+      })
+    })
+  })
+
+  describe('when showAllErrors is true', function () {
+    setupFormComponentTest({
+      ...schemas,
+      showAllErrors: true
+    })
+
+    beforeEach(function () {
+      return wait()
+    })
+
+    it('should show error', function () {
+      const error = $hook('bunsenForm-foo').find('.frost-bunsen-error').text().trim()
+      expect(error).to.equal('Field is required.')
+    })
+  })
+})

tests/integration/components/frost-bunsen-form/renderers/select/ember-data-model-queryForCurrentValue-test.js

@@ -1,3 +1,5 @@
+/* global mocha */
+
 import {expect} from 'chai'
 import Ember from 'ember'
 const {RSVP, Service, run} = Ember
@@ -18,6 +20,10 @@ import {
 
 import selectors from 'dummy/tests/helpers/selectors'
 
+mocha.setup({
+  timeout: 10000
+})
+
 describe('Integration: Component / frost-bunsen-form / renderer / select model queryForCurrentValue', function () {
   setupComponentTest('frost-bunsen-form', {
     integration: true