Как валидация может быть «require: true» и «model: null» с Vuelidate? - PullRequest
Новая
       33

Как валидация может быть «require: true» и «model: null» с Vuelidate?

0 голосов
/ 19 марта 2019

Моя проверка работоспособности, если я пытаюсь встроить, но когда я проверяю эту проверку, у меня возникает проблема.
Я настроил эту проверку со следующими параметрами: 

export default {
  name: 'gdt_creation_form',
  mixins: [validationMixin],
  components: {VCard, VCardActions, VBtn, VIcon, VSelect, VTextField},
  props: {
    activity: Object
  },
  data () {
    return {
      stagePoint: this.activity.stage_point,
      activityType: null,
      days: this.activity.days
    }
  },
  computed: {
    ...mapGetters('activityType', [
      'activityTypes'
    ]),
    ...mapGetters('resource', [
      'resourceSelected'
    ]),
    ...mapGetters('stagePoint', [
      'stagePoints'
    ]),
    stagePointErrors () {
      const errors = []
      if (!this.$v.stagePoint.$dirty) return errors
      if (!this.$v.stagePoint.required) errors.push('Le point d\'étape doit être renseigné.')
      return errors
    },
    activityTypeErrors () {
      const errors = []
      if (!this.$v.activityType.$dirty) return errors
      if (!this.$v.activityType.required || this.$v.activityType.$model === null) {
        errors.push('Le type d\'activité doit être renseigné.')
      }
      return errors
    },
    daysErrors () {
      const errors = []
      if (!this.$v.days.$dirty) return errors
      if (!this.$v.days.required) errors.push('Le nombre de jour doit être renseigné.')
      if (!this.$v.days.between) errors.push('Le nombre de jour doit être compris entre 0 et 5.')
      return errors
    }
  },
  watch: {
    days () {
      this.$v.days.$touch()

      if (this.$v.days.$dirty && !this.$v.days.$anyError) this.activity.days = this.days
    },
    stagePoint () {
      this.$v.stagePoint.$touch()

      if (this.$v.stagePoint.$dirty && !this.$v.stagePoint.$anyError) this.activity.stage_point = this.stagePoint
    },
    activityType () {
      this.$v.activityType.$touch()

      if (this.$v.activityType.$dirty && !this.$v.activityType.$anyError && this.$v.activityType.$model !== null) {
        this.activity.activity_type = this.activityType
      }
    }
  },
  validations: {
    stagePoint: {
      required
    },
    activityType: {
      required
    },
    days: {
      required,
      between: between(0, 5)
    }
  },
  mounted () {
    this.activityType = this.activity.activity_type
      ? this.activity.activity_type
      : this.resourceSelected.main_activity
        ? this.resourceSelected.main_activity
        : null
  },
  methods: {
    updateComponent (fieldName) {
      this.$v[fieldName].$touch()
    },
    deleteComponent () {
      this.$emit('delete-activity', this.$el.id)
    }
  }
}

Когда я отлаживаю,У меня есть этот объект для моего поля, с этим кодом: 

[...]

   beforeEach(() => {
      store.state.activity.activities = [
        {
          'id': 'new-1',
          'days': 0.5,
          'period_start': (new Date()).toISOString().split('T')[0],
          'resource': 1,
          'stage_point': 1,
          'activity_type': 1
        }
      ]

      store.state.resource.resourceSelected = {
        id: 1,
        name: 'John Snow',
        is_active: true,
        structure: 2,
        main_activity: null
      }

      wrapper = shallowMount(Form, {
        localVue,
        propsData:
          {
            activity: store.state.activity.activities[0]
          },
        mocks: {
          $store: store
        }
      })
    })

[...]

    it('should return errors if the form values for activity type is null', () => {
      wrapper.setData(
        {
          activityType: null
        }
      )

      expect(wrapper.vm.activityTypeErrors).to.be.eql(['Le type d\'activité doit être renseigné.'])
    })

[...]

У меня есть такой результат:
LOG LOG: Object{required: true, $model: null, $invalid: false, $dirty: true, $anyDirty: true, $error: false, $anyError: false, $pending: false, $params: Object{required: Object{type: ...}}}

Как проверка может быть «require: true»и "model: null"?
Если значение = null, require должно быть false.

Все остальные тесты работают (для дней и stagePoint)

...