I am encountering some challenges testing a Vee-Validate confirmed function on a Vue form that is constructed using Vuetify. The component I am attempting to test has the following structure:
<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>
The validation of error messages works as intended, showing correctly on screen and disappearing when passwords match. However, the following test fails:
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.validate('confirmPassword');
console.log(wrapper.vm.errors.collect('confirmPassword'));
console.log(wrapper.vm.submissionDetails.password === wrapper.vm.confirmPassword);
expect(wrapper.vm.errors.has('confirmPassword')).to.be.false;
});
});
Even though the password and confirmPassword strings are identical, the validator still flags an error for the confirm password field. I'm seeking assistance in understanding why this issue occurs.