Jest Vue Модульный тестовый топор ios. Пост при нажатии возвращает ожидаемый вызов> = 1, Получено = 0 - PullRequest
Новая
       4

Jest Vue Модульный тестовый топор ios. Пост при нажатии возвращает ожидаемый вызов> = 1, Получено = 0

0 голосов
/ 06 марта 2020

Я делаю юнит-тест с использованием Jest в Vue. js.

Мой шаблон : 

<button @click="requestuser" data-test="signInButton">Sign In</button>

Мой скрипт : 

import Api from "@/services/Api.js";
....
data: function() {
            return {
                wrong_password_attempts:0,
                username: "",
                password: "",
           };
        },
 methods: {
requestuser: function() {
                var vm = this;
                Api()
                .post("/user", {
                    username: this.username,
                    password: this.password
                })
                .then(function(response) {
                    if (response.data.success) {
                        vm.$router.push({ path: "/" });
                    } 
                    else{
                        vm.wrong_password_attempts++;
                    } 
                })
                .catch(function(error) {
                    console.log("Some Error Occured!!!", error);
                });
            }
}

Тест signIn.spe c. js

import {
    mount,
    createLocalVue
} from '@vue/test-utils'
import SignIn from '@/signIn.vue'
import VueRouter from 'vue-router'
import router from '@/router.js'
import axios from 'axios'
import AxiosMockAdapter from 'axios-mock-adapter';
import flushPromises from 'flush-promises'

const localVue = createLocalVue()
localVue.use(VueRouter);

describe('Form inputs', () => {

   const axiosMock = new AxiosMockAdapter(axios)

    it('Form inputs working', async() => {

        const wrapper = mount(SignIn, {
            store,
            localVue,
            router,
        })

        const spyrequestuser = jest.spyOn(wrapper.vm, 'requestuser')


        wrapper.setMethods({
            requestuser: spyrequestuser
        })


        expect(wrapper.vm.wrong_password_attempts).toBe(0)


       // wrong case , password counter should update

        wrapper.setData({
            username: 'correcte',
            password: 'validasas',
        })

        expect(wrapper.vm.username).toBe('correcte')
        expect(wrapper.vm.password).toBe('validsasa')
        wrapper.find("[data-test='signInButton']").trigger('click')
        expect(wrapper.vm.requestuser).toBeCalled()
        await flushPromises()
        expect(axiosMock.history.post.length).toEqual(1)
        expect(wrapper.vm.wrong_password_attempts).toBe(1)


        // correct case

        wrapper.setData({
            username: 'correct',
            password: 'valid',
        })

        expect(wrapper.vm.username).toBe('correct')
        expect(wrapper.vm.password).toBe('valid')
        wrapper.find("[data-test='signInButton']").trigger('click')
        expect(wrapper.vm.requestuser).toBeCalled()
        await flushPromises()
        expect(axiosMock.history.post.length).toEqual(1)
        expect(wrapper.vm.$route.path).toBe('/')

    })
})

Вкл., npm Выполнить тест: блок

Результат: ожидаемо (получено) .toEqual (ожидается) // глубокое равенство 

Expected: 1
Received: 0

ожидаемо (axiosMock.history.post.length) .toEqual (1)

Может кто-нибудь помочь решить эту проблему? Извините, если это глупый вопрос и заранее спасибо:)

...