314 lines
13 KiB
JavaScript
314 lines
13 KiB
JavaScript
import Vue from 'vue'
|
||
import flushPromises from 'flush-promises'
|
||
import { mount } from '@vue/test-utils'
|
||
import Formulate from '../../src/Formulate.js'
|
||
import FormulateInput from '@/FormulateInput.vue'
|
||
import FormulateInputText from '@/inputs/FormulateInputText.vue'
|
||
import { doesNotReject } from 'assert';
|
||
|
||
Vue.use(Formulate)
|
||
|
||
/**
|
||
* Test each type of text element
|
||
*/
|
||
|
||
describe('FormulateInputText', () => {
|
||
it('renders text input when type is "text"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders search input when type is "search"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'search' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders email input when type is "email"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'email' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders number input when type is "number"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'number' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders color input when type is "color"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'color' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders date input when type is "date"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'date' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders month input when type is "month"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'month' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders password input when type is "password"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'password' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders tel input when type is "tel"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'tel' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders time input when type is "time"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'time' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders url input when type is "url"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'url' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
it('renders week input when type is "week"', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'week' } })
|
||
expect(wrapper.findComponent(FormulateInputText).exists()).toBe(true)
|
||
})
|
||
|
||
/**
|
||
* Test rendering functionality to text inputs
|
||
*/
|
||
|
||
it('automatically assigns an id', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
|
||
expect(wrapper.vm.context).toHaveProperty('id')
|
||
expect(wrapper.find(`input[id="${wrapper.vm.context.attributes.id}"]`).exists()).toBe(true)
|
||
})
|
||
|
||
it('passes an explicitly given name prop through to the root text element', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', name: 'foo' } })
|
||
expect(wrapper.find('input[name="foo"]').exists()).toBe(true)
|
||
})
|
||
|
||
it('passes an explicitly given name prop through to the root textarea element', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'textarea', name: 'foo' } })
|
||
expect(wrapper.find('textarea[name="foo"]').exists()).toBe(true)
|
||
})
|
||
|
||
it('additional context does not bleed through to text input attributes', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } } )
|
||
expect(Object.keys(wrapper.find('input[type="text"]').attributes())).toEqual(["type", "id"])
|
||
})
|
||
|
||
it('additional context does not bleed through to textarea input attributes', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'textarea' } } )
|
||
expect(Object.keys(wrapper.find('textarea').attributes())).toEqual(["id"])
|
||
})
|
||
|
||
it('doesn’t automatically add a label', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
|
||
expect(wrapper.find('label').exists()).toBe(false)
|
||
})
|
||
|
||
it('renders labels', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', label: 'Field label' } })
|
||
expect(wrapper.find(`label[for="${wrapper.vm.context.attributes.id}"]`).exists()).toBe(true)
|
||
})
|
||
|
||
it('doesn’t automatically render help text', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
|
||
expect(wrapper.find(`.formulate-input-help`).exists()).toBe(false)
|
||
})
|
||
|
||
it('renders help text', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', help: 'This is some help text' } })
|
||
expect(wrapper.find(`.formulate-input-help`).exists()).toBe(true)
|
||
})
|
||
|
||
/**
|
||
* Test data binding
|
||
*/
|
||
it('emits input (vmodel) event with value when edited', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
|
||
wrapper.find('input').setValue('Updated Value')
|
||
expect(wrapper.emitted().input).toBeTruthy()
|
||
expect(wrapper.emitted().input[0]).toEqual(['Updated Value'])
|
||
})
|
||
|
||
|
||
it('doesn’t re-context itself if there were no changes', async () => {
|
||
const wrapper = mount({
|
||
data () {
|
||
return {
|
||
valueA: 'first value',
|
||
valueB: 'second value'
|
||
}
|
||
},
|
||
template: `
|
||
<div>
|
||
<FormulateInput type="text" ref="first" v-model="valueA" :placeholder="valueA" />
|
||
<FormulateInput type="text" ref="second" v-model="valueB" :placeholder="valueB" />
|
||
</div>
|
||
`
|
||
})
|
||
await flushPromises()
|
||
const firstContext = wrapper.findComponent({ref: "first"}).vm.context
|
||
const secondContext = wrapper.findComponent({ref: "second"}).vm.context
|
||
wrapper.find('input').setValue('new value')
|
||
await flushPromises()
|
||
expect(firstContext).toBeTruthy()
|
||
expect(wrapper.vm.valueA === 'new value').toBe(true)
|
||
expect(wrapper.vm.valueB === 'second value').toBe(true)
|
||
expect(wrapper.findComponent({ref: "first"}).vm.context === firstContext).toBe(false)
|
||
expect(wrapper.findComponent({ref: "second"}).vm.context === secondContext).toBe(true)
|
||
})
|
||
|
||
it('uses the v-model value as the initial value', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', formulateValue: 'initial val' } })
|
||
expect(wrapper.find('input').element.value).toBe('initial val')
|
||
})
|
||
|
||
it('uses the value as the initial value', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', value: 'initial val' } })
|
||
expect(wrapper.find('input').element.value).toBe('initial val')
|
||
})
|
||
|
||
it('uses the value prop as the initial value when v-model provided', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', formulateValue: 'initial val', value: 'initial other val' } })
|
||
expect(wrapper.find('input').element.value).toBe('initial other val')
|
||
})
|
||
|
||
it('uses a proxy model internally if it doesnt have a v-model', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'textarea' } })
|
||
const input = wrapper.find('textarea')
|
||
input.setValue('changed value')
|
||
expect(wrapper.vm.proxy).toBe('changed value')
|
||
})
|
||
|
||
|
||
/**
|
||
* Test error handling
|
||
*/
|
||
it('doesn’t automatically render errors', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
|
||
expect(wrapper.find('.formulate-input-errors').exists()).toBe(false)
|
||
})
|
||
|
||
it('accepts a single string as an error prop', async () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', error: 'This is an error' } })
|
||
expect(wrapper.find('.formulate-input-errors').exists()).toBe(true)
|
||
})
|
||
|
||
it('accepts an array as errors prop', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', errorBehavior: 'live', errors: ['This is an error', 'this is another'] } })
|
||
expect(wrapper.findAll('.formulate-input-error').length).toBe(2)
|
||
})
|
||
|
||
it('removes any duplicate errors', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', errorBehavior: 'live', errors: ['This is an error', 'This is an error'] } })
|
||
expect(wrapper.findAll('.formulate-input-error').length).toBe(1)
|
||
})
|
||
|
||
it('adds data-has-errors when there are errors', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', errorBehavior: 'live', errors: ['This is an error', 'This is an error'] } })
|
||
expect(wrapper.find('[data-has-errors]').exists()).toBe(true)
|
||
})
|
||
|
||
it('Should always show explicitly set errors, but not validation errors', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', validation: 'required', errorBehavior: 'blur', errors: ['Bad input'] } })
|
||
expect(wrapper.find('[data-has-errors]').exists()).toBe(true)
|
||
expect(wrapper.find('[data-is-showing-errors]').exists()).toBe(true)
|
||
expect(wrapper.findAll('.formulate-input-error').length).toBe(1)
|
||
})
|
||
|
||
it('Should show no errors when there are no errors', () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
|
||
expect(wrapper.find('[data-has-errors]').exists()).toBe(false)
|
||
expect(wrapper.find('[data-is-showing-errors]').exists()).toBe(false)
|
||
expect(wrapper.findAll('.formulate-input-error').exists()).toBe(false)
|
||
})
|
||
|
||
it('allows error-behavior blur to be overridden with show-errors', async () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', errorBehavior: 'blur', showErrors: true, validation: 'required' } })
|
||
await flushPromises()
|
||
expect(wrapper.find('[data-has-errors]').exists()).toBe(true)
|
||
expect(wrapper.find('[data-is-showing-errors]').exists()).toBe(true)
|
||
expect(wrapper.findAll('.formulate-input-errors').exists()).toBe(true)
|
||
expect(wrapper.findAll('.formulate-input-error').length).toBe(1)
|
||
})
|
||
|
||
it('shows errors on blur with error-behavior blur', async () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'text', errorBehavior: 'blur', validation: 'required' } })
|
||
await wrapper.vm.$nextTick()
|
||
await flushPromises()
|
||
expect(wrapper.find('[data-has-errors]').exists()).toBe(true)
|
||
expect(wrapper.find('[data-is-showing-errors]').exists()).toBe(false)
|
||
expect(wrapper.findAll('.formulate-input-error').exists()).toBe(false)
|
||
expect(wrapper.vm.showValidationErrors).toBe(false)
|
||
wrapper.find('input').trigger('blur')
|
||
await flushPromises()
|
||
expect(wrapper.vm.showValidationErrors).toBe(true)
|
||
expect(wrapper.find('[data-is-showing-errors]').exists()).toBe(true)
|
||
// expect(wrapper.findAll('.formulate-input-errors').exists()).toBe(true)
|
||
// expect(wrapper.findAll('.formulate-input-error').length).toBe(1)
|
||
})
|
||
|
||
it('continues to show errors if validation fires more than one time', async () => {
|
||
const wrapper = mount(FormulateInput, { propsData: { type: 'date', errorBehavior: 'live', validation: [['after', '01/01/2021']] , value: '01/01/1999' } })
|
||
await wrapper.vm.$nextTick()
|
||
await flushPromises()
|
||
expect(wrapper.find('[data-has-errors]').exists()).toBe(true)
|
||
wrapper.find('input').trigger('input')
|
||
await wrapper.vm.$nextTick()
|
||
await flushPromises()
|
||
expect(wrapper.find('[data-has-errors]').exists()).toBe(true)
|
||
})
|
||
|
||
|
||
it('allows label-before override with scoped slot', async () => {
|
||
const wrapper = mount(FormulateInput, {
|
||
propsData: { type: 'text', label: 'flavor' },
|
||
scopedSlots: {
|
||
label: '<label>{{ props.label }} town</label>'
|
||
}
|
||
})
|
||
expect(wrapper.find('label').text()).toBe('flavor town')
|
||
})
|
||
|
||
it('allows label-after override with scoped slot', async () => {
|
||
const wrapper = mount(FormulateInput, {
|
||
propsData: { type: 'text', label: 'flavor', labelPosition: 'after' },
|
||
scopedSlots: {
|
||
label: '<label>{{ props.label }} town</label>'
|
||
}
|
||
})
|
||
expect(wrapper.find('label').text()).toBe('flavor town')
|
||
})
|
||
|
||
it('allows help-before override', async () => {
|
||
const wrapper = mount(FormulateInput, {
|
||
propsData: { type: 'text', label: 'flavor', help: 'I love this next field...', helpPosition: 'before' },
|
||
})
|
||
expect(wrapper.find('label + *').classes('formulate-input-help')).toBe(true)
|
||
})
|
||
|
||
it('Allow help text override with scoped slot', async () => {
|
||
const wrapper = mount(FormulateInput, {
|
||
propsData: { type: 'text', name: 'soda', help: 'Do you want some'},
|
||
scopedSlots: {
|
||
help: '<small>{{ props.help }} {{ props.name }}?</small>'
|
||
}
|
||
})
|
||
expect(wrapper.find('small').text()).toBe('Do you want some soda?')
|
||
})
|
||
|
||
it('Allow errors override with scoped slot', async () => {
|
||
const wrapper = mount(FormulateInput, {
|
||
propsData: { type: 'text', name: 'soda', validation: 'required|in:foo,bar', errorBehavior: 'live' },
|
||
scopedSlots: {
|
||
errors: '<ul class="my-errors"><li v-for="error in props.visibleValidationErrors">{{ error }}</li></ul>'
|
||
}
|
||
})
|
||
await flushPromises();
|
||
expect(wrapper.findAll('.my-errors li').length).toBe(2)
|
||
})
|
||
})
|