如何使用vue-test-utils打开bootstrap-vue模式？

Question

我使用bootstrap作为我的设计框架，并且一直在使用bootstrap-vue。现在，我想实现一些测试来配合我的组件。我正在编写一个非常简单的测试，以确保模式是打开的。我在vue-test-utils中使用什么来打开bootstrap-vue模式？

我使用的是Laravel、bootstrap-vue、vue-test-utils、mocha和mocha-mocha附带的基础知识。

我正试着用wrapper.find('#modal-1').trigger('click')打开模式。我尝试过使用我尝试使用的事件<b-button @click="$bvModal.show('modal-1')">的指令<b-button v-b-modal.modal-1>。最后，我在b模式的<b-modal v-model="showModal">上尝试了一个普通的按钮<button @click="showModal = true">。我还尝试在触发器和断言之间添加一个$nextTick。

import { createLocalVue, mount } from '@vue/test-utils';
import expect from 'expect';
import BootstrapVue from 'bootstrap-vue';
import MyComponent from '@/components/MyComponent.vue';

const localVue = createLocalVue();

localVue.use(BootstrapVue);

describe ('MyComponent', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(QuotesExceptions, {
            localVue
        });
    });

    it ('opens a modal', () => {
        expect(wrapper.contains('#modal-1')).toBe(false);

        wrapper.find('#btnShow').trigger('click');

        expect(wrapper.contains('#modal-1')).toBe(true);
    });
});

我期望这个模式会在expect(wrapper.contains('#modal-1')).toBe(true)的包装器中，这就是断言失败的地方。

Answer 1

使用attachToDocument: true挂载选项，因为需要在文档中显示模式才能打开。

您可以在https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js上查看BootstrapVue是如何测试其模态的

Answer 2

我按照特洛伊的建议在github上查看了bootstrap-vue测试(https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js)

在那里，您可以看到他们正在使用prop static: true。将这个添加到我的代码中解决了我的问题。

component.vue

<b-modal
    v-model="showModal"
    id="myModal"
    data-qa="importModal"
    :static="true"
>
</b-modal>

component.spec.js

it ('opens a modal', (done) => {
    const button = wrapper.find('[data-qa="button"]');
    const modal = wrapper.find('#myModal');
    expect(button.exists()).toBe(true);
    expect(button.is('button')).toBe(true);
    expect(modal.exists()).toBe(true);
    expect(modal.is('div')).toBe(true);

    expect(modal.isVisible()).toBe(false);
    button.trigger('click');

    Vue.nextTick(() => {
      expect(modal.isVisible()).toBe(true);
      done();
    });
});

我必须选择id的模式，因为内部部分是display: none。当我将data-qa放在模式上时，它附着在外部元素上，该元素本身并不隐藏。另一种解决方案是通过以下方式选择它：const modal = wrapper.find('[data-qa="modal"] .modal');

但是我仍然在我的控制台上收到以下警告：[BootstrapVue warn]: observeDom: Requires MutationObserver support.

Answer 3

it ('opens a modal', (done) => {
    const button = wrapper.find('[data-qa="button"]');
    expect(!!document.querySelector('myModal')).toBe(false)
    button.trigger('click');
    expect(!!document.querySelector('myModal')).toBe(true) 
});