test: Imporved test for plugin install, fixed outdated components names
This commit is contained in:
Zaytsev Kirill
parent
735fa3f126
commit
c4a16c6fdf
@ -3,60 +3,54 @@ import Formulario from '@/Formulario.ts'
|
||||
import plugin from '@/index.ts'
|
||||
|
||||
describe('Formulario', () => {
|
||||
it('Installs on vue instance', () => {
|
||||
it('installs on vue instance', () => {
|
||||
const localVue = createLocalVue()
|
||||
|
||||
localVue.use(plugin)
|
||||
|
||||
expect(localVue.component('FormularioField')).toBeTruthy()
|
||||
expect(localVue.component('FormularioFieldGroup')).toBeTruthy()
|
||||
expect(localVue.component('FormularioForm')).toBeTruthy()
|
||||
expect(localVue.component('FormularioGrouping')).toBeTruthy()
|
||||
expect(localVue.component('FormularioInput')).toBeTruthy()
|
||||
|
||||
const wrapper = mount({ template: '<div />', }, { localVue })
|
||||
const wrapper = mount({ render: h => h('div'), }, { localVue })
|
||||
|
||||
expect(wrapper.vm.$formulario).toBeInstanceOf(Formulario)
|
||||
})
|
||||
|
||||
it ('Pushes Formulario instance to child a component', () => {
|
||||
it ('pushes Formulario instance to child a component', () => {
|
||||
const localVue = createLocalVue()
|
||||
|
||||
localVue.use(plugin)
|
||||
localVue.component('TestComponent', {
|
||||
render (h) {
|
||||
return h('div')
|
||||
}
|
||||
|
||||
const ChildComponent = localVue.component('ChildComponent', {
|
||||
render: h => h('div'),
|
||||
})
|
||||
|
||||
const wrapper = mount({
|
||||
render (h) {
|
||||
return h('div', [h('TestComponent', { ref: 'test' })])
|
||||
},
|
||||
const parent = mount({
|
||||
render: h => h('div', [h('ChildComponent')]),
|
||||
}, { localVue })
|
||||
|
||||
expect(wrapper.vm.$formulario === wrapper.vm.$refs.test.$formulario).toBe(true)
|
||||
const child = parent.findComponent(ChildComponent)
|
||||
|
||||
expect(parent.vm.$formulario === child.vm.$formulario).toBe(true)
|
||||
})
|
||||
|
||||
it ('Does not pushes Formulario instance to a child component, if it has its own', () => {
|
||||
it ('does not push Formulario instance to a child component, if it has its own', () => {
|
||||
const localVue = createLocalVue()
|
||||
|
||||
localVue.use(plugin)
|
||||
// noinspection JSCheckFunctionSignatures
|
||||
localVue.component('TestComponent', {
|
||||
formulario () {
|
||||
return new Formulario()
|
||||
},
|
||||
|
||||
render (h) {
|
||||
return h('div')
|
||||
},
|
||||
const ChildComponent = localVue.component('ChildComponent', {
|
||||
formulario: () => new Formulario(),
|
||||
render: h => h('div'),
|
||||
})
|
||||
|
||||
const wrapper = mount({
|
||||
render (h) {
|
||||
return h('div', [h('TestComponent', { ref: 'test' })])
|
||||
},
|
||||
const parent = mount({
|
||||
render: h => h('div', [h('ChildComponent')]),
|
||||
}, { localVue })
|
||||
|
||||
expect(wrapper.vm.$formulario === wrapper.vm.$refs.test.$formulario).toBe(false)
|
||||
const child = parent.findComponent(ChildComponent)
|
||||
|
||||
expect(parent.vm.$formulario === child.vm.$formulario).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
@ -85,11 +85,11 @@ describe('FormularioFieldGroup', () => {
|
||||
},
|
||||
slots: {
|
||||
default: `
|
||||
<FormularioGrouping name="group">
|
||||
<FormularioFieldGroup name="group">
|
||||
<FormularioField ref="input" name="text" v-slot="{ context }">
|
||||
<span v-for="error in context.errors">{{ error }}</span>
|
||||
</FormularioField>
|
||||
</FormularioGrouping>
|
||||
</FormularioFieldGroup>
|
||||
`,
|
||||
},
|
||||
})
|
||||
|
||||
@ -43,8 +43,8 @@ describe('FormularioForm', () => {
|
||||
propsData: { formularioValue: {} },
|
||||
slots: {
|
||||
default: `
|
||||
<FormularioInput name="sub1" />
|
||||
<FormularioInput name="sub2" />
|
||||
<FormularioField name="sub1" />
|
||||
<FormularioField name="sub2" />
|
||||
`
|
||||
}
|
||||
})
|
||||
@ -56,8 +56,8 @@ describe('FormularioForm', () => {
|
||||
data: () => ({ active: true }),
|
||||
template: `
|
||||
<FormularioForm>
|
||||
<FormularioInput v-if="active" name="sub1" />
|
||||
<FormularioInput name="sub2" />
|
||||
<FormularioField v-if="active" name="sub1" />
|
||||
<FormularioField name="sub2" />
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
@ -73,14 +73,14 @@ describe('FormularioForm', () => {
|
||||
data: () => ({ active: true, nested: { groups: { value: 'value' } }, groups: [{ name: 'group1' }, { name: 'group2' }] }),
|
||||
template: `
|
||||
<FormularioForm>
|
||||
<FormularioInput name="sub1" />
|
||||
<FormularioInput name="sub2" />
|
||||
<FormularioInput name="nested.groups.value" />
|
||||
<FormularioInput name="groups">
|
||||
<FormularioGrouping :name="'groups[' + index + ']'" v-for="(item, index) in groups" :key="index">
|
||||
<FormularioInput name="name" />
|
||||
</FormularioGrouping>
|
||||
</FormularioInput>
|
||||
<FormularioField name="sub1" />
|
||||
<FormularioField name="sub2" />
|
||||
<FormularioField name="nested.groups.value" />
|
||||
<FormularioField name="groups">
|
||||
<FormularioFieldGroup :name="'groups[' + index + ']'" v-for="(_, index) in groups" :key="index">
|
||||
<FormularioField name="name" />
|
||||
</FormularioFieldGroup>
|
||||
</FormularioField>
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
@ -100,9 +100,9 @@ describe('FormularioForm', () => {
|
||||
propsData: { formularioValue: { test: 'Has initial value' } },
|
||||
slots: {
|
||||
default: `
|
||||
<FormularioInput v-slot="{ context }" validation="required|in:bar" name="test" >
|
||||
<FormularioField v-slot="{ context }" validation="required|in:bar" name="test" >
|
||||
<input v-model="context.model" type="text">
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
`
|
||||
}
|
||||
})
|
||||
@ -115,9 +115,9 @@ describe('FormularioForm', () => {
|
||||
propsData: { formularioValue: { test: 'has initial value' } },
|
||||
slots: {
|
||||
default: `
|
||||
<FormularioInput v-slot="{ context }" name="test" value="123">
|
||||
<FormularioField v-slot="{ context }" name="test" value="123">
|
||||
<input v-model="context.model" type="text">
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
`
|
||||
}
|
||||
})
|
||||
@ -129,7 +129,7 @@ describe('FormularioForm', () => {
|
||||
data: () => ({ values: {} }),
|
||||
template: `
|
||||
<FormularioForm v-model="values">
|
||||
<FormularioInput name="test" value="123" />
|
||||
<FormularioField name="test" value="123" />
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
@ -141,9 +141,9 @@ describe('FormularioForm', () => {
|
||||
data: () => ({ values: { test: '' } }),
|
||||
template: `
|
||||
<FormularioForm v-model="values">
|
||||
<FormularioInput v-slot="{ context }" name="test" >
|
||||
<FormularioField v-slot="{ context }" name="test" >
|
||||
<input v-model="context.model" type="text">
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
@ -156,9 +156,9 @@ describe('FormularioForm', () => {
|
||||
data: () => ({ formValues: { date: new Date(123) } }),
|
||||
template: `
|
||||
<FormularioForm v-model="formValues" ref="form">
|
||||
<FormularioInput v-slot="{ context }" name="date" >
|
||||
<FormularioField v-slot="{ context }" name="date" >
|
||||
<span v-if="context.model">{{ context.model.getTime() }}</span>
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
@ -179,7 +179,7 @@ describe('FormularioForm', () => {
|
||||
}),
|
||||
template: `
|
||||
<FormularioForm v-model="formValues">
|
||||
<FormularioInput name="test" v-model="fieldValue" />
|
||||
<FormularioField name="test" v-model="fieldValue" />
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
@ -194,7 +194,7 @@ describe('FormularioForm', () => {
|
||||
formularioValue: { test: 'Initial' }
|
||||
},
|
||||
slots: {
|
||||
default: '<FormularioInput name="test" value="Overrides" />'
|
||||
default: '<FormularioField name="test" value="Overrides" />'
|
||||
},
|
||||
})
|
||||
|
||||
@ -209,9 +209,9 @@ describe('FormularioForm', () => {
|
||||
data: () => ({ values: { test: 'abcd' } }),
|
||||
template: `
|
||||
<FormularioForm v-model="values">
|
||||
<FormularioInput v-slot="{ context }" name="test" >
|
||||
<FormularioField v-slot="{ context }" name="test" >
|
||||
<input v-model="context.model" type="text">
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
@ -228,7 +228,7 @@ describe('FormularioForm', () => {
|
||||
|
||||
it('Resolves hasValidationErrors to true', async () => {
|
||||
const wrapper = mount(FormularioForm, {
|
||||
slots: { default: '<FormularioInput name="fieldName" validation="required" />' }
|
||||
slots: { default: '<FormularioField name="fieldName" validation="required" />' }
|
||||
})
|
||||
wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
@ -241,7 +241,7 @@ describe('FormularioForm', () => {
|
||||
|
||||
it('Resolves submitted form values to an object', async () => {
|
||||
const wrapper = mount(FormularioForm, {
|
||||
slots: { default: '<FormularioInput name="fieldName" validation="required" value="Justin" />' }
|
||||
slots: { default: '<FormularioField name="fieldName" validation="required" value="Justin" />' }
|
||||
})
|
||||
wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
@ -277,9 +277,9 @@ describe('FormularioForm', () => {
|
||||
propsData: { errors: { fieldWithErrors: ['This field has an error'] }},
|
||||
slots: {
|
||||
default: `
|
||||
<FormularioInput v-slot="{ context }" name="fieldWithErrors">
|
||||
<FormularioField v-slot="{ context }" name="fieldWithErrors">
|
||||
<span v-for="error in context.errors">{{ error }}</span>
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
`
|
||||
}
|
||||
})
|
||||
@ -324,10 +324,10 @@ describe('FormularioForm', () => {
|
||||
const wrapper = mount(FormularioForm, {
|
||||
slots: {
|
||||
default: `
|
||||
<FormularioInput v-slot="{ context }" name="foo" validation="required|in:foo">
|
||||
<FormularioField v-slot="{ context }" name="foo" validation="required|in:foo">
|
||||
<input v-model="context.model" type="text" @blur="context.runValidation()">
|
||||
</FormularioInput>
|
||||
<FormularioInput name="bar" validation="required" />
|
||||
</FormularioField>
|
||||
<FormularioField name="bar" validation="required" />
|
||||
`,
|
||||
}
|
||||
})
|
||||
@ -346,7 +346,7 @@ describe('FormularioForm', () => {
|
||||
it('Emits correct validation event on entry', async () => {
|
||||
const wrapper = mount(FormularioForm, {
|
||||
slots: { default: `
|
||||
<FormularioInput
|
||||
<FormularioField
|
||||
v-slot="{ context }"
|
||||
name="firstField"
|
||||
validation="required|in:foo"
|
||||
@ -356,8 +356,8 @@ describe('FormularioForm', () => {
|
||||
type="text"
|
||||
@blur="context.runValidation()"
|
||||
>
|
||||
</FormularioInput>
|
||||
<FormularioInput
|
||||
</FormularioField>
|
||||
<FormularioField
|
||||
name="secondField"
|
||||
validation="required"
|
||||
/>
|
||||
@ -394,12 +394,12 @@ describe('FormularioForm', () => {
|
||||
name="login"
|
||||
ref="form"
|
||||
>
|
||||
<FormularioInput v-slot="{ context }" name="username" validation="required">
|
||||
<FormularioField v-slot="{ context }" name="username" validation="required">
|
||||
<input v-model="context.model" type="text">
|
||||
</FormularioInput>
|
||||
<FormularioInput v-slot="{ context }" name="password" validation="required|min:4,length">
|
||||
</FormularioField>
|
||||
<FormularioField v-slot="{ context }" name="password" validation="required|min:4,length">
|
||||
<input v-model="context.model" type="password">
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
</FormularioForm>
|
||||
`,
|
||||
})
|
||||
@ -432,13 +432,13 @@ describe('FormularioForm', () => {
|
||||
:errors="errors"
|
||||
ref="form"
|
||||
>
|
||||
<FormularioInput
|
||||
<FormularioField
|
||||
v-slot="{ context }"
|
||||
name="input"
|
||||
ref="form"
|
||||
>
|
||||
<span v-for="error in context.allErrors">{{ error.message }}</span>
|
||||
</FormularioInput>
|
||||
</FormularioField>
|
||||
</FormularioForm>
|
||||
`
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user