Question

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

我正在使用Laravel，bootstrap-vue，vue-test-utils，mocha和mocha-webpack随附的基础知识。

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

我正在按照Troy的建议（https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js）在github上进行boots-vue测试

在那里您可以看到他们正在使用道具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 2

就我而言，这很完美，

这里，我的模板中有一个 b-modal ，带有id="modal-1"，单击按钮时，使用showModal()方法打开bootstrap-vue modal。

尝试一下：

<template>

    <b-button v-on:click="showModal()">
    <b-modal id="modal-1"></b-modal>

</template>

<script>
    methods: {
        showModal() {
              this.$root.$emit("bv::show::modal", 'modal-1', "#btnShow");
          },
    }

</script>

Answer 3

使用xmlns:design="clr-namespace:MoneyFox.Presentation;assembly=MoneyFox.Presentation" BindingContext="{x:Static design:DesignTimeViewModelLocator.AboutVm}"挂载选项，因为模态需要在文档中才能打开。

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

Answer 4

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

Answer 5

我正在使用 jest 来测试单击按钮时是否出现模态并最终出现相关问题。将我的答案留在这里供以后的读者使用。

我正在尝试执行以下操作：

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: this.$refs.confirmDialogue[0].show is not a function"

导致：

shallowMount

问题是我使用了 // not good describe("some test", () => { let wrapper; beforeEach(() => { wrapper = shallowMount(MyComponent, {...}); });：

MyComponent

在 ... methods: { openModal() { await this.$refs.confirmDialogue[0].show(); ... }, 的某个时刻，它需要执行以下操作：

this.$ref

因此 undefined 以 mount 的形式出现。

改用 // good describe("some test", () => { let wrapper; beforeEach(() => { wrapper = mount(MyComponent, {...}); });：

wrapper.html()

允许我点击该按钮并在 stubs 中找到存根。

因此，如果您需要从中访问 {{1}}，请确保安装您的组件。

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

5 个答案: