Как открыть мод начальной загрузки с помощью vue-test-utils? - PullRequest
Новая
       48

Как открыть мод начальной загрузки с помощью vue-test-utils?

2 голосов
/ 20 мая 2019

Я использую 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-modal <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), и здесь утверждение не выполняется.

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

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

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

0 голосов
/ 21 мая 2019

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

Здесь у меня есть b-модальный в шаблоне с id="modal-1", и когда кнопка нажата, начальная кнопка начальной загрузки открывается с помощью 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>
...