RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-25 06:46:02 +03:00
Code Issues Projects Releases Wiki Activity

test: Imporved test for plugin install, fixed outdated components names

Browse Source
This commit is contained in:
Zaytsev Kirill 2021-05-22 22:34:17 +03:00
parent 735fa3f126
commit c4a16c6fdf
3 changed files with 65 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
test/unit/Formulario.test.js
View File

@ -3,60 +3,54 @@ import Formulario from '@/Formulario.ts'
import plugin from '@/index.ts' import plugin from '@/index.ts'
describe('Formulario', () => { describe('Formulario', () => {
it('Installs on vue instance', () => { it('installs on vue instance', () => {
const localVue = createLocalVue() const localVue = createLocalVue()
localVue.use(plugin) localVue.use(plugin)
expect(localVue.component('FormularioField')).toBeTruthy()
expect(localVue.component('FormularioFieldGroup')).toBeTruthy()
expect(localVue.component('FormularioForm')).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) 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() const localVue = createLocalVue()
localVue.use(plugin) localVue.use(plugin)
localVue.component('TestComponent', {
render (h) { const ChildComponent = localVue.component('ChildComponent', {
return h('div') render: h => h('div'),
}
}) })
const wrapper = mount({ const parent = mount({
render (h) { render: h => h('div', [h('ChildComponent')]),
return h('div', [h('TestComponent', { ref: 'test' })])
},
}, { localVue }) }, { 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() const localVue = createLocalVue()
localVue.use(plugin) localVue.use(plugin)
// noinspection JSCheckFunctionSignatures // noinspection JSCheckFunctionSignatures
localVue.component('TestComponent', { const ChildComponent = localVue.component('ChildComponent', {
formulario () { formulario: () => new Formulario(),
return new Formulario() render: h => h('div'),
},
render (h) {
return h('div')
},
}) })
const wrapper = mount({ const parent = mount({
render (h) { render: h => h('div', [h('ChildComponent')]),
return h('div', [h('TestComponent', { ref: 'test' })])
},
}, { localVue }) }, { 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)
}) })
}) })

4
test/unit/FormularioFieldGroup.test.js
View File

@ -85,11 +85,11 @@ describe('FormularioFieldGroup', () => {
}, },
slots: { slots: {
default: ` default: `
<FormularioGrouping name="group"> <FormularioFieldGroup name="group">
<FormularioField ref="input" name="text" v-slot="{ context }"> <FormularioField ref="input" name="text" v-slot="{ context }">
<span v-for="error in context.errors">{{ error }}</span> <span v-for="error in context.errors">{{ error }}</span>
</FormularioField> </FormularioField>
</FormularioGrouping> </FormularioFieldGroup>
`, `,
}, },
}) })

82
test/unit/FormularioForm.test.js
View File

@ -43,8 +43,8 @@ describe('FormularioForm', () => {
propsData: { formularioValue: {} }, propsData: { formularioValue: {} },
slots: { slots: {
default: ` default: `
<FormularioInput name="sub1" /> <FormularioField name="sub1" />
<FormularioInput name="sub2" /> <FormularioField name="sub2" />
` `
} }
}) })
@ -56,8 +56,8 @@ describe('FormularioForm', () => {
data: () => ({ active: true }), data: () => ({ active: true }),
template: ` template: `
<FormularioForm> <FormularioForm>
<FormularioInput v-if="active" name="sub1" /> <FormularioField v-if="active" name="sub1" />
<FormularioInput name="sub2" /> <FormularioField name="sub2" />
</FormularioForm> </FormularioForm>
` `
}) })
@ -73,14 +73,14 @@ describe('FormularioForm', () => {
data: () => ({ active: true, nested: { groups: { value: 'value' } }, groups: [{ name: 'group1' }, { name: 'group2' }] }), data: () => ({ active: true, nested: { groups: { value: 'value' } }, groups: [{ name: 'group1' }, { name: 'group2' }] }),
template: ` template: `
<FormularioForm> <FormularioForm>
<FormularioInput name="sub1" /> <FormularioField name="sub1" />
<FormularioInput name="sub2" /> <FormularioField name="sub2" />
<FormularioInput name="nested.groups.value" /> <FormularioField name="nested.groups.value" />
<FormularioInput name="groups"> <FormularioField name="groups">
<FormularioGrouping :name="'groups[' + index + ']'" v-for="(item, index) in groups" :key="index"> <FormularioFieldGroup :name="'groups[' + index + ']'" v-for="(_, index) in groups" :key="index">
<FormularioInput name="name" /> <FormularioField name="name" />
</FormularioGrouping> </FormularioFieldGroup>
</FormularioInput> </FormularioField>
</FormularioForm> </FormularioForm>
` `
}) })
@ -100,9 +100,9 @@ describe('FormularioForm', () => {
propsData: { formularioValue: { test: 'Has initial value' } }, propsData: { formularioValue: { test: 'Has initial value' } },
slots: { slots: {
default: ` 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"> <input v-model="context.model" type="text">
</FormularioInput> </FormularioField>
` `
} }
}) })
@ -115,9 +115,9 @@ describe('FormularioForm', () => {
propsData: { formularioValue: { test: 'has initial value' } }, propsData: { formularioValue: { test: 'has initial value' } },
slots: { slots: {
default: ` default: `
<FormularioInput v-slot="{ context }" name="test" value="123"> <FormularioField v-slot="{ context }" name="test" value="123">
<input v-model="context.model" type="text"> <input v-model="context.model" type="text">
</FormularioInput> </FormularioField>
` `
} }
}) })
@ -129,7 +129,7 @@ describe('FormularioForm', () => {
data: () => ({ values: {} }), data: () => ({ values: {} }),
template: ` template: `
<FormularioForm v-model="values"> <FormularioForm v-model="values">
<FormularioInput name="test" value="123" /> <FormularioField name="test" value="123" />
</FormularioForm> </FormularioForm>
` `
}) })
@ -141,9 +141,9 @@ describe('FormularioForm', () => {
data: () => ({ values: { test: '' } }), data: () => ({ values: { test: '' } }),
template: ` template: `
<FormularioForm v-model="values"> <FormularioForm v-model="values">
<FormularioInput v-slot="{ context }" name="test" > <FormularioField v-slot="{ context }" name="test" >
<input v-model="context.model" type="text"> <input v-model="context.model" type="text">
</FormularioInput> </FormularioField>
</FormularioForm> </FormularioForm>
` `
}) })
@ -156,9 +156,9 @@ describe('FormularioForm', () => {
data: () => ({ formValues: { date: new Date(123) } }), data: () => ({ formValues: { date: new Date(123) } }),
template: ` template: `
<FormularioForm v-model="formValues" ref="form"> <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> <span v-if="context.model">{{ context.model.getTime() }}</span>
</FormularioInput> </FormularioField>
</FormularioForm> </FormularioForm>
` `
}) })
@ -179,7 +179,7 @@ describe('FormularioForm', () => {
}), }),
template: ` template: `
<FormularioForm v-model="formValues"> <FormularioForm v-model="formValues">
<FormularioInput name="test" v-model="fieldValue" /> <FormularioField name="test" v-model="fieldValue" />
</FormularioForm> </FormularioForm>
` `
}) })
@ -194,7 +194,7 @@ describe('FormularioForm', () => {
formularioValue: { test: 'Initial' } formularioValue: { test: 'Initial' }
}, },
slots: { slots: {
default: '<FormularioInput name="test" value="Overrides" />' default: '<FormularioField name="test" value="Overrides" />'
}, },
}) })
@ -209,9 +209,9 @@ describe('FormularioForm', () => {
data: () => ({ values: { test: 'abcd' } }), data: () => ({ values: { test: 'abcd' } }),
template: ` template: `
<FormularioForm v-model="values"> <FormularioForm v-model="values">
<FormularioInput v-slot="{ context }" name="test" > <FormularioField v-slot="{ context }" name="test" >
<input v-model="context.model" type="text"> <input v-model="context.model" type="text">
</FormularioInput> </FormularioField>
</FormularioForm> </FormularioForm>
` `
}) })
@ -228,7 +228,7 @@ describe('FormularioForm', () => {
it('Resolves hasValidationErrors to true', async () => { it('Resolves hasValidationErrors to true', async () => {
const wrapper = mount(FormularioForm, { const wrapper = mount(FormularioForm, {
slots: { default: '<FormularioInput name="fieldName" validation="required" />' } slots: { default: '<FormularioField name="fieldName" validation="required" />' }
}) })
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
await flushPromises() await flushPromises()
@ -241,7 +241,7 @@ describe('FormularioForm', () => {
it('Resolves submitted form values to an object', async () => { it('Resolves submitted form values to an object', async () => {
const wrapper = mount(FormularioForm, { 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') wrapper.find('form').trigger('submit')
await flushPromises() await flushPromises()
@ -277,9 +277,9 @@ describe('FormularioForm', () => {
propsData: { errors: { fieldWithErrors: ['This field has an error'] }}, propsData: { errors: { fieldWithErrors: ['This field has an error'] }},
slots: { slots: {
default: ` default: `
<FormularioInput v-slot="{ context }" name="fieldWithErrors"> <FormularioField v-slot="{ context }" name="fieldWithErrors">
<span v-for="error in context.errors">{{ error }}</span> <span v-for="error in context.errors">{{ error }}</span>
</FormularioInput> </FormularioField>
` `
} }
}) })
@ -324,10 +324,10 @@ describe('FormularioForm', () => {
const wrapper = mount(FormularioForm, { const wrapper = mount(FormularioForm, {
slots: { slots: {
default: ` 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()"> <input v-model="context.model" type="text" @blur="context.runValidation()">
</FormularioInput> </FormularioField>
<FormularioInput name="bar" validation="required" /> <FormularioField name="bar" validation="required" />
`, `,
} }
}) })
@ -346,7 +346,7 @@ describe('FormularioForm', () => {
it('Emits correct validation event on entry', async () => { it('Emits correct validation event on entry', async () => {
const wrapper = mount(FormularioForm, { const wrapper = mount(FormularioForm, {
slots: { default: ` slots: { default: `
<FormularioInput <FormularioField
v-slot="{ context }" v-slot="{ context }"
name="firstField" name="firstField"
validation="required|in:foo" validation="required|in:foo"
@ -356,8 +356,8 @@ describe('FormularioForm', () => {
type="text" type="text"
@blur="context.runValidation()" @blur="context.runValidation()"
> >
</FormularioInput> </FormularioField>
<FormularioInput <FormularioField
name="secondField" name="secondField"
validation="required" validation="required"
/> />
@ -394,12 +394,12 @@ describe('FormularioForm', () => {
name="login" name="login"
ref="form" 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"> <input v-model="context.model" type="text">
</FormularioInput> </FormularioField>
<FormularioInput v-slot="{ context }" name="password" validation="required|min:4,length"> <FormularioField v-slot="{ context }" name="password" validation="required|min:4,length">
<input v-model="context.model" type="password"> <input v-model="context.model" type="password">
</FormularioInput> </FormularioField>
</FormularioForm> </FormularioForm>
`, `,
}) })
@ -432,13 +432,13 @@ describe('FormularioForm', () => {
:errors="errors" :errors="errors"
ref="form" ref="form"
> >
<FormularioInput <FormularioField
v-slot="{ context }" v-slot="{ context }"
name="input" name="input"
ref="form" ref="form"
> >
<span v-for="error in context.allErrors">{{ error.message }}</span> <span v-for="error in context.allErrors">{{ error.message }}</span>
</FormularioInput> </FormularioField>
</FormularioForm> </FormularioForm>
` `
}) })