UNPKG

@agorize/gommette

Version:
425 lines (365 loc) 11.2 kB
import { createLocalVue, shallowMount } from '@vue/test-utils' import * as AgoUikit from '../../../src' import { GoFormGroup, GoFieldInput } from '../../../src' import { renderCaseHasErrors, renderCaseFieldModelErrors } from './GoFormGroup.render-cases' const localVue = createLocalVue() localVue.use(AgoUikit) describe('GoFormGroup', () => { let wrapper // Must no fill model, because it broken test with vee-validate const baseEntryField = { inputType: 'text', inputName: 'last_name', placeholder: 'Your last name', required: true, validations: 'required' } beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: baseEntryField }, }) }) // Install it('should be installed', () => { expect(localVue.options.components['GoFormGroup']).toBeTruthy() }) ////////// // Data properties ////////// // data isSpecialFieldTypes describe('Data - isSpecialFieldTypes', () => { it('should return if is special input field', () => { expect(wrapper.vm.isSpecialFieldTypes).toBe(false) }) describe('when type is fill', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, type: 'input' } }, }) }) it('should return if is special input field', () => { expect(wrapper.vm.isSpecialFieldTypes).toBe(false) }) }) describe('when type fill is a special field', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, type: 'submit' } }, }) }) it('should return if is special input field', () => { expect(wrapper.vm.isSpecialFieldTypes).toBe(true) }) }) }) ////////// // Computed properties ////////// // data fieldType describe('Computed - fieldType', () => { it('should return default field type', () => { expect(wrapper.vm.fieldType).toBe('GoFieldInput') }) describe('when type fill is "input"', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, type: 'input' } }, }) }) it('should return if is special input field', () => { expect(wrapper.vm.fieldType).toBe('GoFieldInput') }) }) describe('when type fill is "submit"', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, type: 'submit' } }, }) }) it('should return if is special input field', () => { expect(wrapper.vm.fieldType).toBe('GoFieldSubmit') }) }) }) // computed hasErrors describe('Computed - hasErrors', () => { // Render testing renderCaseHasErrors.forEach(renderCase => { const [describeText, options, expectedValue] = renderCase describe(describeText, () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, ...options }) }) it(`should have ${expectedValue} errors`, () => { expect(wrapper.vm.hasErrors).toBe(expectedValue) }) }) }) }) // computed fieldModelErrors describe('Computed - fieldModelErrors', () => { renderCaseFieldModelErrors.forEach(renderCase => { const [describeText, optionsPropsData, expectedValue] = renderCase describe(describeText, () => { beforeEach(() => { localVue.directive('v-validate', () => null) wrapper = shallowMount(GoFormGroup, { localVue, propsData: optionsPropsData, computed: { displayFieldInput: () => false } }) }) it(`should return coresponding errors array`, () => { expect(wrapper.vm.fieldModelErrors).toEqual(expectedValue) }) }) }) }) // computed hasErrorVeeValidate describe('Computed - hasErrorVeeValidate', () => { it('should return no error vee-validate', () => { expect(wrapper.vm.hasErrorVeeValidate).toBe(false) }) describe('when errors are specified', () => { beforeEach(() => { wrapper.vm.$validator.errors.add({ field: wrapper.vm.field.inputName, msg: 'Wrong Credentials' }) }) it('should return errors vee-validate', () => { expect(wrapper.vm.hasErrorVeeValidate).toBe(true) }) }) describe('when specified error are wrong field', () => { beforeEach(() => { wrapper.vm.$validator.errors.add({ field: 'wrong_field', msg: 'Wrong Credentials' }) }) it('should return errors vee-validate', () => { expect(wrapper.vm.hasErrorVeeValidate).toBe(false) }) }) }) // computed hasLabel describe('Computed - hasLabel', () => { it('should have no label by default', () => { expect(wrapper.vm.hasLabel).toBe(false) }) describe('when field has label and type is not specified', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, label: 'my label' } }, }) }) it('should have label', () => { expect(wrapper.vm.hasLabel).toBe(true) }) }) describe('when field has label and type is specified', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, type: 'input', label: 'my label' } }, }) }) it('should have label', () => { expect(wrapper.vm.hasLabel).toBe(true) }) }) describe('when field has label and type is "submit"', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, type: 'submit', label: 'my label' } }, }) }) it('should have not label', () => { expect(wrapper.vm.hasLabel).toBe(false) }) }) }) // computed getFieldRowClasses describe('Computed - getFieldRowClasses', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, }, }, computed: { hasErrors: () => false } }) }) it('should return base class', () => { expect(wrapper.vm.getFieldRowClasses).toBe('form-group') }) describe('when there are errors', () => { beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, }, }, computed: { hasErrors: () => true } }) }) it('should return base class with default error class', () => { expect(wrapper.vm.getFieldRowClasses).toBe('form-group has-error') }) describe('when validation error class is specified in options props', () => { const expectedErrorClass = 'error-class' beforeEach(() => { wrapper = shallowMount(GoFormGroup, { localVue, propsData: { value: 'my name', field: { ...baseEntryField, }, options: { validationErrorClass: expectedErrorClass }, }, computed: { hasErrors: () => true } }) }) it('should return base class with default error class', () => { expect(wrapper.vm.getFieldRowClasses).toBe(`form-group ${expectedErrorClass}`) }) }) }) }) ////////// // Methods properties ////////// // watchs getModelError describe('Method - getModelError', () => { let dictionnary beforeEach(() => { dictionnary = wrapper.vm.$validator.dictionary.container['en'] }) it('should return default message', () => { const expectedValue = dictionnary.messages['required']('') expect(wrapper.vm.getModelError(baseEntryField, 'required')).toBe(expectedValue) }) describe('when field label is specified', () => { const customBaseEntryField = { ...baseEntryField, label: 'first name' } it('should return default message', () => { const expectedValue = dictionnary.messages['required']('first name') expect(wrapper.vm.getModelError(customBaseEntryField, 'required')).toBe(expectedValue) }) }) }) ////////// // Watch properties ////////// // watchs valueInput describe('Watch - valueInput', () => { it('should emit input value when change value', async () => { const expectedValue = 'first name' const newValue = 'name' await wrapper.setData({ valueInput: expectedValue }) expect(wrapper.emitted().input).toBeTruthy() expect(wrapper.emitted().input.length).toBe(1) expect(wrapper.emitted().input[0]).toEqual([expectedValue]) await wrapper.setData({ valueInput: newValue }) expect(wrapper.emitted().input).toBeTruthy() expect(wrapper.emitted().input.length).toBe(2) expect(wrapper.emitted().input[1]).toEqual([newValue]) }) it('should change displayFieldsErrors data to false', async () => { expect(wrapper.vm.displayFieldsErrors).toBe(true) await wrapper.setData({ valueInput: 'change' }) expect(wrapper.vm.displayFieldsErrors).toBe(false) await wrapper.setData({ valueInput: 'change 2' }) expect(wrapper.vm.displayFieldsErrors).toBe(false) }) }) // watchs fieldModelErrors describe('Watch - fieldModelErrors', () => { it('should change displayFieldsErrors data to true when change model errors', async () => { await wrapper.setData({ displayFieldsErrors: false }) expect(wrapper.vm.displayFieldsErrors).toBe(false) await wrapper.setProps({ errorsModel: [ { 'code': 'required', 'source': '/data/attributes/last_name' }, { 'code': 'email', 'source': '/data/attributes/email' }, ]}) expect(wrapper.vm.displayFieldsErrors).toBe(true) }) }) })