95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
import Vue from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import flushPromises from 'flush-promises'
|
|
import Formulario from '@/index.ts'
|
|
import FormularioForm from '@/FormularioForm.vue'
|
|
import FormularioGrouping from '@/FormularioGrouping.vue'
|
|
|
|
Vue.use(Formulario)
|
|
|
|
describe('FormularioGrouping', () => {
|
|
it('Grouped fields to be set', async () => {
|
|
const wrapper = mount(FormularioForm, {
|
|
propsData: { name: 'form' },
|
|
slots: {
|
|
default: `
|
|
<FormularioGrouping name="group">
|
|
<FormularioInput name="text" v-slot="{ context }">
|
|
<input type="text" v-model="context.model">
|
|
</FormularioInput>
|
|
</FormularioGrouping>
|
|
`
|
|
}
|
|
})
|
|
expect(wrapper.findAll('input[type="text"]').length).toBe(1)
|
|
wrapper.find('input[type="text"]').setValue('test')
|
|
|
|
const submission = await wrapper.vm.formSubmitted()
|
|
expect(submission).toEqual({ group: { text: 'test' } })
|
|
})
|
|
|
|
it('Grouped fields to be got', async () => {
|
|
const wrapper = mount(FormularioForm, {
|
|
propsData: {
|
|
name: 'form',
|
|
formularioValue: {
|
|
group: { text: 'Group text' },
|
|
text: 'Text',
|
|
}
|
|
},
|
|
slots: {
|
|
default: `
|
|
<FormularioGrouping name="group">
|
|
<FormularioInput name="text" v-slot="{ context }">
|
|
<input type="text" v-model="context.model">
|
|
</FormularioInput>
|
|
</FormularioGrouping>
|
|
`
|
|
}
|
|
})
|
|
expect(wrapper.find('input[type="text"]').element.value).toBe('Group text')
|
|
})
|
|
|
|
it('Data reactive with grouped fields', async () => {
|
|
const wrapper = mount({
|
|
data: () => ({ values: {} }),
|
|
template: `
|
|
<FormularioForm name="form" v-model="values">
|
|
<FormularioGrouping name="group">
|
|
<FormularioInput name="text" v-slot="{ context }">
|
|
<input type="text" v-model="context.model">
|
|
<span>{{ values.group.text }}</span>
|
|
</FormularioInput>
|
|
</FormularioGrouping>
|
|
</FormularioForm>
|
|
`
|
|
})
|
|
expect(wrapper.find('span').text()).toBe('')
|
|
wrapper.find('input[type="text"]').setValue('test')
|
|
await flushPromises()
|
|
expect(wrapper.find('span').text()).toBe('test')
|
|
})
|
|
|
|
it('Errors are set for grouped fields', async () => {
|
|
const wrapper = mount({
|
|
data: () => ({ values: {} }),
|
|
template: `
|
|
<FormularioForm
|
|
v-model="values"
|
|
:errors="{'group.text': 'Test error'}"
|
|
name="form"
|
|
>
|
|
<FormularioGrouping name="group">
|
|
<FormularioInput name="text" v-slot="{ context }">
|
|
<span v-for="error in context.allErrors">
|
|
{{ error }}
|
|
</span>
|
|
</FormularioInput>
|
|
</FormularioGrouping>
|
|
</FormularioForm>
|
|
`
|
|
})
|
|
expect(wrapper.findAll('span').length).toBe(1)
|
|
})
|
|
})
|