代码之家 › 专栏 › 技术社区 › JoeWemyss

测试Vee验证确认规则

vue-test-utils vee-validate mocha.js vue.js

4

JoeWemyss · 技术社区 · 7 年前

我在用Vuetify构建的Vue表单上测试Vee验证确认函数时遇到了一些困难。我尝试测试的组件如下所示:

<template>
    <form novalidate ref="loginForm" v-model="formValid" @submit.stop.prevent="formSubmitted" @keyup.enter="formSubmitted">
      <v-container grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <v-text-field
              name="passwordField"
              label="Enter your Password"
              hint="At least 6 characters"
              v-model="submissionDetails.password"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|min:6'"
              data-vv-name="password"
              :error-messages="errors.collect('password')"
              ref="password"
              @change="inputTriggered"
              @input="inputTriggered"
            />
          </v-flex>
          <v-flex v-show="createAccountTicked">
            <v-text-field
              name="confirmPasswordField"
              label="Confirm your Password"
              hint="At least 6 characters"
              v-model="confirmPassword"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|confirmed:$password'"
              data-vv-name="confirmPassword"
              :error-messages="errors.collect('confirmPassword')"/>
          </v-flex>
        </v-layout>
      </v-container>
    </form>
  </template>
  <script>
  export default {
    name: 'email-password-form',
    data () {
      return {
        submissionDetails: {
          email: '',
          password: ''
        },
        confirmPassword: '',
        passwordShown: false,
        createAccountTicked: false
      };
    }
  };
</script>

上述操作正常,错误消息正确显示在屏幕上,并在密码匹配时删除,但以下测试失败:

 describe.only('validation', () => {
    it('should not attach an error to confirm password when it does match the password', async () => {
      const wrapper = mount(EmailPasswordForm, { localVue });
      wrapper.setData({
        submissionDetails: {
          password: 'wwwwww'
        },
        createAccountTicked: true,
        confirmPassword: 'wwwwww'
      });
      // await wrapper.vm.$validator.validateAll();
      // await wrapper.vm.$validator.validate('password');

      await wrapper.vm.$validator.validate('confirmPassword');

      console.log(wrapper.vm.errors.collect('confirmPassword'));
      // ['The confirmPassword confirmation does not match.']

      console.log(wrapper.vm.submissionDetails.password === wrapper.vm.confirmPassword);
      // true

      expect(wrapper.vm.errors.has('confirmPassword')).to.be.false;
      // AssertionError: expected true to be false
    });
  });

从上面的代码中可以看出,虽然密码和confirmPassword字符串确实匹配,但验证器仍然将确认密码字段标记为存在错误。我不明白为什么会这样,但如果有任何帮助,我将不胜感激。

3 回复 | 直到 7 年前

1

14

JoeWemyss 7 年前

结果表明,这种行为是由于Vee Validate如何比较多字段验证的值,以及这些值是如何传播的。(参见 this issue )

最简单的解决方案是使用新的 is 验证规则,它允许我与模型进行比较,而不是与字段的内容进行比较。我刚换了 v-validate 规则内容来自 'required|confirmed:$password' 到 v-validate="{required: true, is: submissionDetails.password}"

我把这个留在这里,以防其他人有这个问题。

2

1

Gopakumar Gopalan 7 年前

就我而言,这两种方法中的任何一种都适用于我:

<input 
 v-validate="{ required : true,  confirmed: 'password'}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">

<input 
 v-validate="{ required : true,  confirmed: field.password}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">

3

0

Paul Clark 6 年前

下面修复了我在chrome中遇到的问题,即使在使用chrome禁用时也会出现验证错误,这是由于 required 和 confirmed:password 像 v-validate="'required|confirmed:password'"

 <input

 v-validate="{ required : true,  confirmed: field.password}" 

 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">