Fixes #60 and merges #61.

- Bugfix: Fixes #60, a bug that caused an evaluation loop when selects or box types used an empty array as the options prop. Adds supporting test cases.
- Merges in #61 which passes the form name to the error handler function. Adds supporting test cases.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@braid/vue-formulate",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braid/vue-formulate",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "The easiest way to build forms in Vue.",
   "main": "dist/formulate.umd.js",
   "module": "dist/formulate.esm.js",

src/Formulate.js

@@ -231,7 +231,7 @@ class Formulate {
    * @param {error}
    */
   handle (err, formName, skip = false) {
-    const e = skip ? err : this.options.errorHandler(err)
+    const e = skip ? err : this.options.errorHandler(err, formName)
     if (formName && this.registry.has(formName)) {
       this.registry.get(formName).applyErrors({
         formErrors: arrayify(e.formErrors),

src/libs/context.js

@@ -177,8 +177,6 @@ function createOptionList (options) {
       optionList.push({ value, label: options[value], id: `${that.elementAttributes.id}_${value}` })
     }
     return optionList
-  } else if (Array.isArray(options) && !options.length) {
-    return [{ value: this.value, label: (this.label || this.name), id: this.context.id || nanoid(9) }]
   }
   return options
 }

test/unit/FormulateForm.test.js

@@ -230,6 +230,47 @@ describe('FormulateForm', () => {
     expect(wrapper.vm.$formulate.registry.get('login')).toBe(wrapper.vm)
   })
 
+  it('calls custom error handler with error and name', async () => {
+    const mockHandler = jest.fn((err, name) => err);
+    const wrapper = mount({
+      template: `
+      <div>
+        <FormulateForm
+          name="login"
+        />
+        <FormulateForm
+          name="register"
+        />
+      </div>
+      `
+    })
+    wrapper.vm.$formulate.extend({ errorHandler: mockHandler })
+    wrapper.vm.$formulate.handle({ formErrors: ['This is an error message'] }, 'login')
+    expect(mockHandler.mock.calls.length).toBe(1);
+    expect(mockHandler.mock.calls[0]).toEqual([{ formErrors: ['This is an error message'] }, 'login']);
+  })
+
+  it('errors are displayed on correctly named components', async () => {
+    const wrapper = mount({
+      template: `
+      <div>
+        <FormulateForm
+          name="login"
+        />
+        <FormulateForm
+          name="register"
+        />
+      </div>
+      `
+    })
+    expect(wrapper.vm.$formulate.registry.has('login') && wrapper.vm.$formulate.registry.has('register')).toBe(true)
+    wrapper.vm.$formulate.handle({ formErrors: ['This is an error message'] }, 'login')
+    await flushPromises()
+    expect(wrapper.findAll('.formulate-form').length).toBe(2)
+    expect(wrapper.find('.formulate-form--login .formulate-form-errors').exists()).toBe(true)
+    expect(wrapper.find('.formulate-form--register .formulate-form-errors').exists()).toBe(false)
+  })
+
   it('errors are displayed on correctly named components', async () => {
     const wrapper = mount({
       template: `

test/unit/FormulateInputBox.test.js

@@ -201,4 +201,10 @@ describe('FormulateInputBox', () => {
     await flushPromises()
     expect(wrapper.find('.formulate-input-error').exists()).toBe(true)
   })
+
+  it('renders no boxes when options array is empty', async () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'checkbox', options: [] } })
+    expect(wrapper.contains(FormulateInputGroup)).toBe(true)
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
 })

test/unit/FormulateInputButton.test.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
-import Formulate from '../../src/Formulate.js'
+import Formulate from '@/Formulate.js'
 import FormulateInput from '@/FormulateInput.vue'
 import FormulateInputButton from '@/inputs/FormulateInputButton.vue'
 

test/unit/FormulateInputSelect.test.js

@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import flushPromises from 'flush-promises'
+import Formulate from '@/Formulate.js'
+import FormulateInput from '@/FormulateInput.vue'
+import FormulateInputSelect from '@/inputs/FormulateInputSelect.vue'
+
+Vue.use(Formulate)
+
+describe('FormulateInputSelect', () => {
+  it('renders select input when type is "select"', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select' } })
+    expect(wrapper.contains(FormulateInputSelect)).toBe(true)
+  })
+
+  it('renders select options when options object is passed', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select', options: { first: 'First', second: 'Second' } } })
+    const option = wrapper.find('option[value="second"]')
+    expect(option.exists()).toBe(true)
+    expect(option.text()).toBe('Second')
+  })
+
+  it('renders select options when options array is passed', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select', options: [
+      { value: 13, label: 'Jane' },
+      { value: 22, label: 'Jon' }
+    ]} })
+    const option = wrapper.find('option[value="22"]')
+    expect(option.exists()).toBe(true)
+    expect(option.text()).toBe('Jon')
+  })
+
+  it('renders select list with no options when empty array is passed.', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select', options: []} })
+    const option = wrapper.find('option')
+    expect(option.exists()).toBe(false)
+  })
+
+  it('renders select list placeholder option.', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select', placeholder: 'Select this', options: []} })
+    const options = wrapper.findAll('option')
+    expect(options.length).toBe(1)
+    expect(options.at(0).attributes('disabled')).toBeTruthy()
+  })
+})