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)
    })
})