Протестируйте валидацию формы Vuetify с помощью Vue тестовых утилит и Jest - PullRequest
Новая
       51

Протестируйте валидацию формы Vuetify с помощью Vue тестовых утилит и Jest

2 голосов
/ 05 августа 2020

Я использую Vue ^ 2.6, Vuetify ^ 2.3, Jest ^ 26.2 и Vue test utils ^ 1.0.

Компонент My Login: 

<template>
    <v-row>
        <v-sheet>
            <v-row>
                <v-form
                        v-model="loginFormIsValid"
                        :lazy-validation="false"
                >
                    <v-text-field
                            id="cr-login-credential"
                            v-model="credential"
                            :rules="[
                (value) => !!value || 'Required.',
                (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
              ]"
                    ></v-text-field>
                    <v-text-field
                            id="cr-login-password"
                            v-model="password"
                            :rules="[(value) => !!value || 'Required.']"
                    ></v-text-field>
                    <v-checkbox
                            v-model="remember_me"
                            id="cr-login-remember_me"
                    ></v-checkbox>
                </v-form>
                <v-btn :disabled="!loginFormIsValid" class="cr-login-submit-btn"/>
            </v-row>
        </v-sheet>
    </v-row>
</template>

<script>
    export default {
        data() {
            return {
                credential: null,
                password: null,
                remember_me: null,
                loginFormIsValid: false,
            };
        },
    };
</script>

Мой тест: 

import { createLocalVue, mount } from '@vue/test-utils';
import Vuetify from 'vuetify';
import Vue from 'vue';
import { Login } from '@/entry';
import '@testing-library/jest-dom';

Vue.use(Vuetify);
const localVue = createLocalVue();

const factory = (vuetify) => mount(Login, {
  localVue,
  vuetify,
});

describe('Login.vue', () => {
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify();
  });
  it('check submit button is disabled if fields are empty', () => {
    const wrapper = factory(vuetify);
    const email = '';
    const password = '';

    wrapper.find('#cr-login-credential').setValue(email);
    wrapper.find('#cr-login-password').setValue(password);

    expect(wrapper.vm.credential).toBe(email);
    expect(wrapper.vm.password).toBe(password);

    expect(wrapper.vm.loginFormIsValid).toBeFalsy();
    expect(wrapper.find('.cr-login-submit-btn').element).toBeDisabled();
  });
});

(я опускаю бесполезный код)

Когда я запускаю тест, он не работает: 

Error: expect(received).toBeFalsy()

Received: true

Данные loginFormIsValid не обновляются, и моя кнопка всегда disabled.

Не могли бы вы объяснить, как правильно проверить мои данные?

1 Ответ

1 голос
/ 06 августа 2020

Я столкнулся именно с этой проблемой. Я смог решить проблему после вызова Vue.nextTick() после любых вызовов метода vue -test-utils setValue(). Примечание: вам нужно будет превратить эти тесты в функции asyn c.

Итак, для вашего теста c я бы попробовал следующее: 

it('check submit button is disabled if fields are empty', async () => {
    const wrapper = factory(vuetify);
    const email = '';
    const password = '';

    wrapper.find('#cr-login-credential').setValue(email);
    wrapper.find('#cr-login-password').setValue(password);

    await Vue.nextTick();

    expect(wrapper.vm.credential).toBe(email);
    expect(wrapper.vm.password).toBe(password);

    expect(wrapper.vm.loginFormIsValid).toBeFalsy();
    expect(wrapper.find('.cr-login-submit-btn').element).toBeDisabled();
});

См. { ссылка } для получения дополнительной информации.

...