@agorize/gommette/tests/unit/GoFormGenerator/GoFormGroup.spec.js

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