From 2a1ad16a29f6e1660c5bed56a4b0953ead2ec46b Mon Sep 17 00:00:00 2001
From: 14nrv <contact@styro.fr>
Date: Wed, 12 Dec 2018 21:06:15 +0100
Subject: [PATCH] feat: allow html inside formFields props

---
 src/components/Form/Form.spec.js     |  2 +-
 src/components/Form/Form.vue         |  6 +++-
 src/components/Form/FormSlot.spec.js | 54 ++++++++++++++++++++++++++++
 src/components/Form/fields.json      |  3 ++
 src/components/Form/index.js         |  4 +--
 5 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Form/FormSlot.spec.js

diff --git a/src/components/Form/Form.spec.js b/src/components/Form/Form.spec.js
index 79e9c89..78b0be0 100644
--- a/src/components/Form/Form.spec.js
+++ b/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)
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 066fc3c..86d618b 100644
--- a/src/components/Form/Form.vue
+++ b/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")
diff --git a/src/components/Form/FormSlot.spec.js b/src/components/Form/FormSlot.spec.js
new file mode 100644
index 0000000..a5299b9
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/src/components/Form/fields.json b/src/components/Form/fields.json
index b27b91a..a3bfa80 100644
--- a/src/components/Form/fields.json
+++ b/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",
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
index ce98af0..4c3e1a8 100644
--- a/src/components/Form/index.js
+++ b/src/components/Form/index.js
@@ -1,3 +1 @@
-import Form from './Form'
-
-export default Form
+export { default } from './Form'