Как проверить, правильно ли отображаются данные, возвращенные при вызове ajax в смонтированном виде? - PullRequest
Новая
       21

Как проверить, правильно ли отображаются данные, возвращенные при вызове ajax в смонтированном виде?

0 голосов
/ 02 апреля 2019

У меня есть компонент (упрощенно) 

<template>
    <div v-if="account">
        <h1 v-text="accountName"></h1>
    </div>
</template>
<script>
    import repo from '../../repo';

    export default {
        data() {
            return {
                account: {}
            }
        },
        mounted() {
            return this.load();
        },
        computed: {
            accountName: function () {
                return this.account.forename + ' ' + this.account.surname;
            }
        },
        methods: {
            load() {
                return repo
                    .get(repo.accounts, {
                        params: {
                            id: this.$route.params.id
                        }
                    })
                    .then((response) => {
                        console.log(response.data);
                        this.account = response.data;
                        this.validateObj = this.account;
                    }, (error) => {

                        switch (error.response.status) {
                            case 403:
                                this.$router.push({name: '403'});
                                break;
                            default:
                                this.$refs['generic_modal'].open(error.message);
                        }

                    });
            }
        }
    }
</script>

, который при монтировании вызывает API, получает возвращенные данные и отображает имя и фамилию.

Я пытаюсьнаписать тест мокко, чтобы проверить, что это работает.Я могу сделать это, используя тайм-аут. 

it('mounts', done => {

    const $route = {
        params: {
            id: 1
        }
    };

    mock.onGet('/api/accounts/1').reply(200, {
        forename: 'Tom',
        surname: 'Hart'
    });

    const wrapper = shallowMount(AccountsEdit, {
        i18n,
        mocks: {
            $route
        }
    });

    setTimeout(a => {
        expect(wrapper.html()).toContain('Tom Hart');
        done();
    }, 1900);
});

Но я подумал, есть ли лучший способ?Я надеялся подключиться к вызову axios.get и выполнить проверку после ее завершения, однако я не могу понять, как это сделать.

РЕДАКТИРОВАТЬ: я пытался использовать $ nextTick, однако, это тоже не сработало 

wrapper.vm.$nextTick(() => {
    expect(wrapper.html()).toContain('Tom Hart');
    done();
});

{ Error: expect(received).toContain(expected) // indexOf

Expected substring: "Tom Hart"
Received string:    "<div><h1>undefined undefined</h1></div>"
    at VueComponent.<anonymous> (/home/tom/Dev/V6/Admin/.tmp/mocha-webpack/1554202885644/tests/Javascript/Components/Pages/account-edit.spec.js:37:1)
    at Array.<anonymous> (/home/tom/Dev/V6/Admin/node_modules/vue/dist/vue.runtime.common.dev.js:1976:12)
    at flushCallbacks (/home/tom/Dev/V6/Admin/node_modules/vue/dist/vue.runtime.common.dev.js:1902:14)
  matcherResult: { message: [Function: message], pass: false } }
{ forename: 'Tom', surname: 'Hart' }
    1) mounts


  0 passing (2s)
  1 failing

  1) Accounts Edit Page
       mounts:
     Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (/home/tom/Dev/V6/Admin/.tmp/mocha-webpack/1554202885644/bundle.js)

РЕДАКТИРОВАТЬ 2: Кажется, просто как тест, цепочка $ nextTick в конечном итоге работает, так что я предполагаю, что что-то еще вызывает тики, прежде чем мой вызов вернется?Можно ли как-нибудь сказать, что вызвало тик? 

wrapper.vm.$nextTick(() => {
        wrapper.vm.$nextTick(() => {
            wrapper.vm.$nextTick(() => {
                wrapper.vm.$nextTick(() => {
                    wrapper.vm.$nextTick(() => {
                        wrapper.vm.$nextTick(() => {
                            expect(wrapper.find('h1').html()).toContain('Tom Hart');
                            done();
                        });
                    });
                });
            });
        });
    });

1 Ответ

0 голосов
/ 02 апреля 2019

Эй, у нас была похожая проблема и мы нашли эту библиотеку: https://www.npmjs.com/package/flush-promises

, которая позволяет нам дождаться всех обещаний, прежде чем продолжить тестирование.Попробуйте сделать что-то вроде этого: 

  const flushPromises = require('flush-promises');

  it('mounts', (done) => {
    const $route = {
        params: {
            id: 1
        }
    };

    mock.onGet('/api/accounts/1').reply(200, {
        forename: 'Tom',
        surname: 'Hart'
    });

    const wrapper = shallowMount(AccountsEdit, {
        i18n,
        mocks: {
            $route
        }
    });

    flushPromises().then(() => {
        expect(wrapper.html()).toContain('Tom Hart');
        done();
    });
});
...