From 1e403a7fe9ebd3674ab6e5aa28324b56500395c8 Mon Sep 17 00:00:00 2001
From: Justin Schroeder <justin@wearebraid.com>
Date: Sun, 10 May 2020 15:23:18 -0400
Subject: [PATCH] Adds slot component tests

---
 src/Formulate.js                 |  4 +--
 test/unit/FormulateInput.test.js | 46 +++++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/Formulate.js b/src/Formulate.js
index 3cb016d..dbed1a8 100644
--- a/src/Formulate.js
+++ b/src/Formulate.js
@@ -55,7 +55,7 @@ class Formulate {
         FormulateInputTextArea,
         FormulateRepeatableProvider
       },
-      slotDefaults: {
+      slotComponents: {
         label: 'FormulateLabel',
         help: 'FormulateHelp',
         errors: 'FormulateErrors',
@@ -169,7 +169,7 @@ class Formulate {
     if (def.slotComponents && def.slotComponents[slot]) {
       return def.slotComponents[slot]
     }
-    return this.options.slotDefaults[slot]
+    return this.options.slotComponents[slot]
   }
 
   /**
diff --git a/test/unit/FormulateInput.test.js b/test/unit/FormulateInput.test.js
index 2478817..d091cc4 100644
--- a/test/unit/FormulateInput.test.js
+++ b/test/unit/FormulateInput.test.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import flushPromises from 'flush-promises'
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Formulate from '@/Formulate.js'
 import FormulateInput from '@/FormulateInput.vue'
 import FormulateInputBox from '@/inputs/FormulateInputBox.vue'
@@ -177,4 +177,48 @@ describe('FormulateInput', () => {
     expect(wrapper.emitted('error-visibility').length).toBe(1)
   })
 
+  it('allows overriding the label default slot component', async () => {
+    const localVue = createLocalVue()
+    localVue.component('CustomLabel', {
+      render: function (h) {
+        return h('div', { class: 'custom-label' }, [`custom: ${this.context.label}`])
+      },
+      props: ['context']
+    })
+    localVue.use(Formulate, { slotComponents: { label: 'CustomLabel' } })
+    const wrapper = mount(FormulateInput, { localVue, propsData: { label: 'My label here' } })
+    expect(wrapper.find('.custom-label').html()).toBe('<div class="custom-label">custom: My label here</div>')
+  })
+
+  it('allows overriding the help default slot component', async () => {
+    const localVue = createLocalVue()
+    localVue.component('CustomHelp', {
+      render: function (h) {
+        return h('small', { class: 'custom-help' }, [`custom: ${this.context.help}`])
+      },
+      props: ['context']
+    })
+    localVue.use(Formulate, { slotComponents: { help: 'CustomHelp' } })
+    const wrapper = mount(FormulateInput, { localVue, propsData: { help: 'My help here' } })
+    expect(wrapper.find('.custom-help').html()).toBe('<small class="custom-help">custom: My help here</small>')
+  })
+
+  it('allows overriding the errors component', async () => {
+    const localVue = createLocalVue()
+    localVue.component('CustomErrors', {
+      render: function (h) {
+        return h('ul', { class: 'my-errors' }, this.context.visibleValidationErrors.map(message => h('li', message)))
+      },
+      props: ['context']
+    })
+    localVue.use(Formulate, { slotComponents: { errors: 'CustomErrors' } })
+    const wrapper = mount(FormulateInput, { localVue, propsData: {
+      help: 'My help here',
+      errorBehavior: 'live',
+      validation: 'required'
+    } })
+    await flushPromises()
+    expect(wrapper.find('.my-errors').html())
+      .toBe(`<ul class="my-errors">\n  <li>Text is required.</li>\n</ul>`)
+  })
 })