Question

是否可以等待Vue玩笑测试中的模态动画完成？我的问题是，当我单击按钮（button.add_modal）时，div.my-modal应该获得一个“显示”类，但是在触发我的按钮之后，该类似乎未附加到我的html中（以玩笑测试）），在开发工具中工作正常。

    wrapper.find('button.add_modal').trigger('click');
    //This should return true, but I'm getting false.
    expect(wrapper.contains('div#my-modal.show')).toBe(true);

Answer 1

我们在测试包含BootstrapVue modal的组件时遇到了类似的问题。通过查看BV modal unit tests本身，我发现了一些可行的方法。在其中，您会看到以下内容重复出现：

// take action to open modal and then
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

...其中waitNT和waitRF在tests/utils.js中定义：

export const waitNT = ctx => new Promise(resolve => ctx.$nextTick(resolve))
export const waitRAF = () => new Promise(resolve => requestAnimationFrame(resolve))

这允许DOM更新完成，并且模式可以在测试中“出现”。您可能需要打扰您致电给他们的次数。触发模态打开后，您将在BV unit tests中看到它们重复1-3次。

另一个有用的项目是暂存包装器安装中的过渡，例如：

wrapper.mount(MyModalComponent, {
  stubs: {
    transition: false
  }
}

这可以确保过渡是同步发生的，而不是像detailed in the docs here那样异步发生。

如何在Vue开玩笑的测试中等待引导模态动画完成

1 个答案: