Question

我需要对以下组件（登录表单）进行以下测试：

同时输入登录名和密码，检查登录是否成功
在未同时输入登录名和密码时检查输入错误
输入登录名时检查输入错误，但不输入密码
输入密码时检查输入错误，但不输入登录名。

<template>
    <main>
    <div class="main-logo">
        <img src="../../assets/login-img/main_logo.svg" alt="главный логотип" />
    </div>
    <div class="main-form">
        <div class="main-from__title">
        <p class="main-from__title-text">Вход</p>
        </div>
        <form @submit.prevent="login" class="main-form__login">
        <p class="main-form__login-status">{{ this.loginStatus }}</p>
        <input
            class="main-form__login-input main-form__login-input_name"
            id="login"
            v-model="loginForm.username"
            required
            placeholder="Имя"
            type="text"
        />
        <input
            class="main-form__login-input main-form__login-input_password"
            id="password"
            v-model="loginForm.password"
            required
            placeholder="Пароль"
            type="password"
        />
        <input class="main-form__login-submit" v-if="this.loginBtn" type="submit" @click="handleLogin" value="Войти" />

        <input class="main-form__login-submit main-form__login-session" v-if="this.showLogoutEverywhereBtn" type="button" @click="websocketAuth" value="Выйти из других окон" />
        </form>
    </div>
    </main>
</template>
<script>
import { mapState } from 'vuex'
import { socketUrl } from '../../config/url'


export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                username: 'user1',
                password: '123',
            },
        };
    },
    computed: {
        ...mapState({
            loginBtn: state => state.user.loginBtn,
            loginStatus: state => state.user.loginStatus,
            showLogoutEverywhereBtn: state => state.user.showLogoutEverywhereBtn,
        })
    },
    mounted: function () {
        console.log('login showLogoutEverywhereBtn', this.showLogoutEverywhereBtn)
        socketUrl.on('toLogin', () => {
            this.$router.push('/login')
        })
    },
    methods: {
        handleLogin(e) { 
            e.preventDefault() 
            this.$store.dispatch('login', this.loginForm) 
                .then((response) => { 
                    console.log('login page response: ', response)
                    if (response.id_user !== undefined) {
                        this.$router.push({ path: '/' })
                    }
                })
                .catch((e) => { // Если ошибка
                    console.log('ты внутри ошибки: ', e);
                });
        },
        websocketAuth(e) {
            e.preventDefault()
            console.log('login:  ', this.loginForm.username, this.loginForm.password)
            this.$store.dispatch("logoutEverywhere", {
                user_login: this.loginForm.username,
                user_password: this.loginForm.password
            })
                .then((resp) => {
                    let data = { userId: resp, page: 'login' }
                    socketUrl.emit('logoutEverywhere', data, (flag) => {
                    if(flag) {
                        this.$store.dispatch('duplicateLoginClear')
                    }
                    console.log(flag)
                    })

                    console.log('1 ', resp)
                })
        }
    },
};

</script>

现在我的测试文件如下：

import Vue from 'vue'
import { mount } from '@vue/test-utils'
import Login from '../views/login/index'

// Describe создает блок, который группирует несколько связанных тестов. Например, если объект должен быть вкусным, но не кислым.
describe('Проверяем 4 возможных сценария входа в систему!', () => {
    test('Проверка на успешный вход в систему при вводе и логина и пароля.', () => {
        expect(true).toBe(true)
    });

    test('Проверка на ошибку входа при не вводе и логина и пароля', () => {
        expect(true).toBe(true)
    });

    test('Проверка на ошибку входа при вводе логина, но не вводе пароля', () => {
        expect(true).toBe(true)
    });

    test('Проверка на ошибку входа при вводе пароля, но не вводе логина', () => {
        expect(true).toBe(true)
    });
});

Answer 1

尝试测试库（仍然可以使用jest）。他们有很多不错的例子（https://testing-library.com/docs/vue-testing-library/examples）。

我应该如何使用Jest为我的Vue组件编写测试？

1 个答案: