Как открыть модальное окно bootstrap-vue с помощью vue-test-utils?

Я использую 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')">. И напоследок попробовал обычную кнопку <button @click="showModal = true"> с этим на b-модальном <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), и здесь утверждение не работает.


vue.js vue-test-utils bootstrap-vue
person kylerdmoore    schedule 20.05.2019    source источник
comment
Вы нашли решение или обходной путь для этой проблемы?   -  person Chris Camaratta    schedule 11.06.2019

Ответы (4)


arrow_upward
2
arrow_downward

Используйте параметр монтирования attachToDocument: true, так как для открытия в документе должно быть модальное окно.

Вы можете увидеть, как BootstrapVue тестирует свои модальные окна на https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js

person Troy Morehouse    schedule 13.06.2019

arrow_upward
2
arrow_downward

Я смотрел тест bootstrap-vue на github, как предложил Трой (https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js)

Там вы можете увидеть, что они используют опору 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.

person schnetzi    schedule 24.10.2019
comment
После 2 дней, потраченных на попытки нескольких решений, static: true решил это за меня! (Я также получаю Requires MutationObserver support предупреждение.) - person ElectroBuddha; 16.11.2019

arrow_upward
-1
arrow_downward

В моем случае это работает отлично,

Здесь у меня есть b-модальный шаблон с id="modal-1", и при нажатии кнопки открывается модальное окно bootstrap-vue с использованием метода showModal().

Попробуй это:

<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>
person AddWeb Solution Pvt Ltd    schedule 21.05.2019
comment
Спасибо за ваше предложение. Он отлично работает в браузере. Моя проблема не в том, что модальное окно не работает в браузере. Кажется, я не могу заставить vue-test-utils открыть модальное окно в тесте, который я пытаюсь написать. Я обновил свой вопрос тестом, который пытаюсь запустить, в точности с тем кодом, который вы показали. - person kylerdmoore; 21.05.2019

arrow_upward

arrow_downward

person    schedule
comment
словесное объяснение часто бывает полезным - person con; 08.02.2021