feat: allow html inside formFields props

src/components/Form/Form.spec.js

@@ -39,7 +39,7 @@ const getInitialValue = (label, node, attribute) =>
 const COUNTRY_VALUE = getInitialValue('Country', 'options', 'selected')[0]
 const CHECKBOX_VALUE = getInitialValue('Checkbox', 'items', 'checked')
 
-const allFields = flatten(fields)
+const allFields = flatten(fields).filter(field => Object.keys(field)[0] !== 'html')
 const allNormalInputLabel = allFields
   .filter(x => !x.type || x.type === 'tel')
   .map(x => x.label)

src/components/Form/Form.vue

@@ -4,10 +4,14 @@
 
     div(v-for="(item, index) in formFields", :key="index")
       .field-body(v-if="Array.isArray(item)")
-        .field(v-for="(x, i) in item", :key="x.label")
+        .field(v-for="x in item", :key="x.label")
           app-label(:item="x")
           app-control(:item="x", ref="control")
 
+      .field(v-else-if="Object.keys(item) == 'html'",
+            v-html="Object.values(item)[0]",
+            data-test="htmlContentFromFormFields")
+
       .field(v-else)
         app-label(:item="item")
         app-control(:item="item", ref="control")

src/components/Form/FormSlot.spec.js

@@ -0,0 +1,54 @@
+import Helpers from 'mwangaben-vthelpers'
+import VeeValidate from 'vee-validate'
+import { mount, createLocalVue } from '@vue/test-utils'
+import Form from '@/components/Form'
+import fields from './fields'
+
+const v = new VeeValidate.Validator()
+const localVue = createLocalVue()
+localVue.use(VeeValidate)
+
+let wrapper, b
+
+const FORM_NAME = 'testFormName'
+const fakeSlot = '[data-test=htmlContentFromFormFields]'
+
+describe('Fake slot', () => {
+  beforeEach(() => {
+    wrapper = mount(Form, {
+      localVue,
+      provide: () => ({
+        $validator: v
+      }),
+      propsData: {
+        formFields: fields,
+        formName: FORM_NAME
+      }
+    })
+    b = new Helpers(wrapper)
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('does not have fake slot if no key html in json', async () => {
+    wrapper.setProps({ formFields: [ { label: 'x' }, [{ label: 'y' }, { label: 'z' }] ] })
+    await wrapper.vm.$nextTick()
+
+    b.domHasNot(fakeSlot)
+  })
+
+  it('show fake slot if html key is defined in json', async () => {
+    const fakeSlotContent = 'this is a fake slot'
+
+    wrapper.setProps({ formFields: [{ html: `<p>${fakeSlotContent}</p>` }] })
+    await wrapper.vm.$nextTick()
+
+    b.domHas(fakeSlot)
+    b.see(fakeSlotContent)
+
+    const allParagraphs = wrapper.findAll('form > div p')
+    expect(allParagraphs).toHaveLength(1)
+  })
+})

src/components/Form/fields.json

@@ -12,6 +12,9 @@
       "minLength": 3
     }
   ],
+  {
+    "html": "<div class='box'><article class='media'><div class='media-left'><figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/64x64.png' alt='Image'></figure></div><div class='media-content'><div class='content'><p><strong class='has-text-info'>Info</strong><br>You can also pass html like this box</p></div>"
+  },
   [
     {
       "label": "Email",

src/components/Form/index.js

@@ -1,3 +1 @@
-import Form from './Form'
-
-export default Form
+export { default } from './Form'