Merge pull request #51 from 14nrv/dev

Author: 14nrv

README.md

@@ -1,5 +1,5 @@
 [![NPM Version](https://img.shields.io/npm/v/vue-form-json.svg)](https://www.npmjs.com/package/vue-form-json)
-[![Build Status](https://travis-ci.org/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.org/14nrv/vue-form-json)
+[![Build Status](https://travis-ci.com/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.com/14nrv/vue-form-json)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/test_coverage)](https://codeclimate.com/github/14nrv/vue-form-json/test_coverage)
 [![Maintainability](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/maintainability)](https://codeclimate.com/github/14nrv/vue-form-json/maintainability)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
@@ -38,11 +38,15 @@ Once submitted, an event 'formSubmitted' is emitted on $root with the formName a
     label: 'the label'
   }]
   ```
-- [x] Scoped slot everywhere inside form
+- [x] Scoped slot everywhere inside the form
   ```js
   const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]
   ```
-- [x] Html directly inside json (formFields props)
+- [x] Custom fields support inside scoped slot
+  ```html
+  <template #nameOfTheSlot="{ foo, updateFormValues, isFormReseted }">
+  ```
+- [x] Html support
   ```js
   const formFields = [{ html: '<p>Your html content</p>' }]
   ```
@@ -83,6 +87,10 @@ Object.keys(rules).forEach(rule => {
 </template>
 
 <script>
+  // import 'bulma/css/bulma.min.css'
+  // import '@fortawesome/fontawesome-free/css/all.min.css'
+  // import 'vue-form-json/dist/vue-form-json.css'
+
   import formJson from 'vue-form-json'
   import jsonFields from './../assets/fields'
 
@@ -92,19 +100,13 @@ Object.keys(rules).forEach(rule => {
       formJson
     },
     mounted () {
-      this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
+      this.$root.$on('formSubmitted', values => console.log(values))
     },
     computed: {
       jsonFields: () => jsonFields
     }
   }
 </script>
-
-<style lang="stylus">
-  @require '../node_modules/bulma/css/bulma.min.css'
-  @require '../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
-  @require '../node_modules/vue-form-json/dist/vue-form-json.css'
-</style>
 ```
 
 ## Props available on formJson component

package.json

@@ -65,7 +65,7 @@
     "humps": "^2.0.1",
     "ramda": "^0.27.0",
     "slugify": "^1.4.4",
-    "vee-validate": "^3.4.2",
+    "vee-validate": "^3.4.5",
     "vue": "^2.6.12"
   },
   "devDependencies": {

src/components/Fields/Control.vue

@@ -23,25 +23,30 @@
 
 <script>
 import { slug } from '@/helpers'
+import Checkbox from '@/components/Fields/Checkbox'
 import Input from '@/components/Fields/Input'
+import Radio from '@/components/Fields/Radio'
 import Select from '@/components/Fields/Select'
 import Textarea from '@/components/Fields/Textarea'
-import Checkbox from '@/components/Fields/Checkbox'
-import Radio from '@/components/Fields/Radio'
 
-const NOT_NORMAL_INPUT = ['textarea', 'select', 'checkbox', 'radio']
+const NOT_NORMAL_INPUT = [
+  'checkbox',
+  'radio',
+  'select',
+  'textarea'
+]
 
 export default {
   name: 'Control',
   filters: {
     slugify: value => slug(value)
   },
   components: {
+    appCheckbox: Checkbox,
     appInput: Input,
+    appRadio: Radio,
     appSelect: Select,
-    appTextarea: Textarea,
-    appCheckbox: Checkbox,
-    appRadio: Radio
+    appTextarea: Textarea
   },
   data: () => ({
     value: undefined

src/components/Fields/Select.spec.js

@@ -0,0 +1,96 @@
+import matchers from 'jest-vue-matcher'
+import { mount, createLocalVue } from '@vue/test-utils'
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import { extendRules, slug } from '@/helpers'
+import Form from '@/components/Form'
+
+extendRules()
+
+const localVue = createLocalVue()
+localVue.component('ValidationProvider', ValidationProvider)
+localVue.component('ValidationObserver', ValidationObserver)
+localVue.filter('slugify', str => slug(str))
+
+let wrapper
+
+const selectFormField = [{
+  label: 'Country',
+  type: 'select',
+  iconLeft: 'globe-americas',
+  placeholder: 'Select your option',
+  options: [
+    'Afghanistan',
+    'Åland Islands'
+  ]
+}]
+
+const setup = ({
+  formFields = selectFormField
+} = {}) => {
+  wrapper = mount(Form, {
+    localVue,
+    propsData: {
+      formName: 'testSelect',
+      formFields
+    }
+  })
+  expect.extend(matchers(wrapper))
+  return {
+    wrapper,
+    getAllOptions: () => wrapper.find('select').findAll('option')
+  }
+}
+
+describe('Select', () => {
+  it('has multiple options', () => {
+    const { wrapper } = setup()
+    const options = wrapper.findAll('select > option')
+    expect(options).toHaveLength(3)
+  })
+
+  it('has a first option disabled & selected as placeholder', () => {
+    const { wrapper } = setup()
+
+    const firstOption = wrapper.findAll('select > option').at(0)
+    const { disabled, text } = firstOption.element
+
+    expect(firstOption.attributes('selected')).toBe('selected')
+    expect(disabled).toBe(true)
+    expect(text).toBe(selectFormField[0].placeholder)
+  })
+
+  it('has no value by default', () => {
+    setup()
+    expect('select').toHaveValue('')
+  })
+
+  it('changes value', async () => {
+    const { getAllOptions, wrapper } = setup()
+    await getAllOptions().at(1).setSelected()
+
+    const expectedValue = selectFormField[0].options[0]
+    const expectedFormValues = { [selectFormField[0].label]: expectedValue }
+    expect('select').toHaveValue(expectedValue)
+    expect(wrapper.vm.formValues).toStrictEqual(expectedFormValues)
+  })
+
+  it('changes the selected options to the placeholder on reset', async () => {
+    const { getAllOptions, wrapper } = setup()
+    await getAllOptions().at(1).setSelected()
+
+    wrapper.find('input[type=reset]').trigger('reset')
+
+    expect('select').toHaveValue('')
+    expect(wrapper.vm.$el.querySelector('select').selectedIndex).toBe(0)
+  })
+
+  it('removes selected options on reset if no placeholder', async () => {
+    const [{ placeholder, ...rest }] = selectFormField
+    const { getAllOptions, wrapper } = setup({ formFields: [rest] })
+    await getAllOptions().at(1).setSelected()
+
+    wrapper.find('input[type=reset]').trigger('reset')
+
+    expect(wrapper.vm.$el.querySelector('select').selectedIndex).toBe(0)
+  })
+})