如何使用Vuelidate进行“ require:true”和“ model:null”验证?

时间:2019-03-19 14:26:57

标签: vue.js vue-test-utils vuelidate

如果我尝试内联,则我的验证有效,但是当我测试此验证时,出现了问题。
我已经使用以下参数配置了此验证:

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)

0 个答案:

没有答案