Методы модульного тестирования, которые отправляют действия в Vue. js - PullRequest
Новая
       25

Методы модульного тестирования, которые отправляют действия в Vue. js

0 голосов
/ 01 мая 2020

У меня проблемы с методами модульного тестирования в компоненте, я хочу протестировать методы validations(), clear() и registerUser(), но не могу увеличить покрытие кода. Ниже приведен Компонент: 

<template>

    <v-col class="pa-lg-10">
        <v-card class=" mx-auto">
            <form class="pa-10">
                <p class="reg-text">Registration</p>
                <v-text-field v-model="name" label="Name" required></v-text-field>
                <v-text-field v-model="email" label="E-mail" required></v-text-field>
                <v-text-field v-model="address" label="Address" required></v-text-field>
                <v-text-field v-model="phoneNumber" label="Phone Number"></v-text-field>
                <v-text-field v-model="password" label="Password" :type="'password'" required></v-text-field>
                <v-btn class="mr-4" color="primary" @click="registerUser">Register</v-btn>
                <v-btn @click="clear">clear</v-btn>
            </form>
        </v-card>
        <SnackBar/>
    </v-col>


</template>

<script>
    import {mapActions, mapGetters} from "vuex";
    import SnackBar from "./SnackBar";

    export default {
        name: "RegisterUsers",
        components: {
            SnackBar
        },
        data() {
            return {
                name: '',
                email: '',
                address: '',
                phoneNumber: '',
                password: '',
                formHasErrors: false,
            }
        },
        methods: {
            registerUser() {
                const formData = {
                    name: this.name,
                    email: this.email,
                    address: this.address,
                    number: this.phoneNumber,
                    password: this.password,
                };

                if (!this.validations()) {
                    this.register(formData);
                }
            },
            clear() {
                this.name = "";
                this.email = "";
                this.address = "";
                this.phoneNumber = "";
                this.password = "";
            },
            validations() {
                // eslint-disable-next-line no-useless-escape
                const mailFormat = /\S+@\S+\.\S+/;
                const vm = this;
                setTimeout(() => {
                    vm.reset_snackbar();
                }, 2000);
                if (this.email === '') {
                    this.toast_snackbar_on_error('Email is required');
                    return true;
                }

                if (mailFormat.test(this.email.toString()) !== true) {
                    this.toast_snackbar_on_error('Please enter a valid mail');
                    return true;
                }

                if (this.name === '') {
                    this.toast_snackbar_on_error('Name is required');
                    return true;
                }
                if (this.address === '') {
                    this.toast_snackbar_on_error('Address is required');
                    return true;
                }
                if (this.password === '') {
                    this.toast_snackbar_on_error('Password  is required');
                    return true;
                }
                return this.formHasErrors;
            },
            ...mapActions({
                register: 'register/registerUsers',
                reset_snackbar: 'register/reset_snackbar',
                toast_snackbar_on_error: 'register/toast_snackbar_on_error',

            }),
            computed: {
                ...mapGetters('register', ['snackbar_status']),
            },

        },
    };
</script>

<style scoped>
    div{
        color: inherit;
    }
    .reg-text {
        color: black;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
</style>

Я пытался смоделировать некоторые данные во время вставки, однако я не могу получить удар по этим методам. Во-вторых, я хотел также ожидать сообщения от SnackBar, но, похоже, я не мог нацелить его также.

Как я могу проверить методы этого компонента.

Ниже приведены мои тесты : 

it("should expect to have input fields", () => {

        const wrapper = shallowMount(RegisterUsers);

        wrapper.setData({ name: '',
          email: 'ab@gmail.com',
          address: 'Buziga, Kampala',
          phoneNumber: '0704594180',
          password: '9393939',
          formHasErrors: false,});

        const button = wrapper.find({name: 'v-btn'})
        button.trigger('click');

        expect(wrapper.classes('s-text')).toBe(false);
    })

css класс s-text, который вы видите в тесте, это тот, который оборачивает сообщение SnackBar.

Мне нужно руководство здесь.

1 Ответ

1 голос
/ 01 мая 2020

Вы используете shallowMount. Это заглушит все компоненты - не будет button, чтобы найти.

Альтернативный способ написать это будет 

it("should expect to have input fields", () => {
  const wrapper = mount(RegisterUsers, {
    name: '',
    email: 'ab@gmail.com',
    address: 'Buziga, Kampala',
    phoneNumber: '0704594180',
    password: '9393939',
    formHasErrors: false,
  });

  const button = wrapper.find({name: 'v-btn'})
  button.trigger('click');

  expect(wrapper.classes('s-text')).toBe(false);
})

По всей вероятности, это все равно приведет к проблемам. Вы используете Vuetify и некоторые другие плагины, которые не установлены. Вам необходимо установить те, которые используют local Vue.

После того, как вы запустите все без ошибок, вы можете сделать что-то вроде wrapper.find('button').trigger('click'), которое должно вызвать registerUsers. Если вы не хотите использовать настоящий магазин Vuex, сделайте что-то вроде этого: 


const store = {
  dispatch: jest.fn()
}

mount(Component, {
  mocks: {
    $store
  }
}
...