Question

我有一个组件（简体）

<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();
                        });
                    });
                });
            });
        });
    });

Answer 1

嘿，我们遇到了类似的问题，并找到了这个库： https://www.npmjs.com/package/flush-promises

允许我们在继续测试之前等待所有承诺。尝试执行以下操作：

protected override void OnStartup(StartupEventArgs e)
{
    //works for tab into textbox
    EventManager.RegisterClassHandler(typeof(TextBox),
        TextBox.GotFocusEvent,
        new RoutedEventHandler(TextBox_GotFocus));
    //works for click textbox
    EventManager.RegisterClassHandler(typeof(Window),
        Window.GotMouseCaptureEvent,
        new RoutedEventHandler(Window_MouseCapture));

    base.OnStartup(e);
}
private void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
    (sender as TextBox).SelectAll();
}

private void Window_MouseCapture(object sender, RoutedEventArgs e)
{
    var textBox = e.OriginalSource as TextBox;
    if (textBox != null)
         textBox.SelectAll(); 
}

如何测试从Mount中的Ajax调用返回的数据是否正确呈现？

1 个答案: