test(FieldColor): add tests for extra input option

Author: kevinkosterr

__tests__/components/fields/FieldColor.spec.js

@@ -10,7 +10,8 @@ const form = generateSchemaSingleField(
   'input',
   'color',
   'Pick a color',
-  ''
+  '',
+  {}
 )
 
 const props = generatePropsSingleField(form)
@@ -30,9 +31,21 @@ describe('FieldColor', () => {
     expect(formWrapper.find('input[type=color]').exists()).toBe(true)
   })
 
+  it('Should render correctly, with input', async () => {
+    config.global.components = { FieldColor }
+
+    const schema = { ...form.schema }
+    schema.fields[0].withInput = true
+    const formWrapper = mountFormGenerator(schema, form.model)
+
+    expect(formWrapper.findComponent(FieldColor).exists()).toBe(true)
+    expect(formWrapper.find('input[type=color]').exists()).toBe(true)
+    expect(formWrapper.find('input[type=text]').exists()).toBe(true)
+  })
+
   it('Should emit onInput event', async () => {
     const wrapper = mount(FieldColor, { props })
-    await wrapper.find('input[type=color]').trigger('change')
+    await wrapper.find('input[type=color]').trigger('input')
     expect(wrapper.emitted()).toHaveProperty('onInput')
   })
 
@@ -47,4 +60,30 @@ describe('FieldColor', () => {
     expect(formWrapper.vm.model.colorModel).toBe('#efefef')
   })
 
+  it ('Should update model value and sync values', async () => {
+    config.global.components = { FieldColor }
+
+    const schema = { ...form.schema }
+    schema.fields[0].withInput = true
+    const formWrapper = mountFormGenerator(schema, form.model)
+
+    const wrapper = formWrapper.findComponent(FieldColor)
+    wrapper.find('input[type=text]').setValue('#f00000')
+    expect(wrapper.emitted()).toHaveProperty('onInput', [  [ '#f00000' ] ])
+    expect(formWrapper.vm.model.colorModel).toBe('#f00000')
+    // Wait for the DOM to update.
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input[type=color').attributes().value).toBe('#f00000')
+
+    // Clear emitted events for next interaction test.
+    wrapper.emitted().onInput = []
+
+    wrapper.find('input[type=color]').setValue('#ff0000')
+    expect(wrapper.emitted()).toHaveProperty('onInput', [  [ '#ff0000' ] ])
+    expect(formWrapper.vm.model.colorModel).toBe('#ff0000')
+    // Wait for the DOM to update.
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input[type=text]').attributes().value).toBe('#ff0000')
+  })
+
 })