在bootstrap-vue mode(b-mode)int测试中找不到按钮 [英] Cannot find button in bootstrap-vue modal (b-modal) int test
本文介绍了在bootstrap-vue mode(b-mode)int测试中找不到按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要在我的测试用例中测试模式行为。
- 打开页面上的模式依据按钮(isVisible false=>true)
- 关闭MODEL上的MODEL BY按钮(isVisible trye=>false)
第一步可以，但第二步失败。我可以通过引用找到MODEL，但找不到MODEL上的按钮。
Home.vue
<template>
<div class="home">
<b-button id='button-open' @click="open">open</b-button>
<b-modal
ref="modal-ref"
hide-footer
>
<b-button id='button-close' @click="close">close</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
open() {
console.log('open');
this.$refs['modal-ref'].show();
},
close() {
console.log('ok');
this.$refs['modal-ref'].hide();
},
},
};
</script>
home.spec.js
import { expect } from 'chai';
import { createLocalVue, mount } from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import Home from '@/views/Home.vue';
describe('Boostrap Modal', () => {
it('open and close modal', async () => {
const localVue = createLocalVue();
localVue.use(BootstrapVue);
const wrapper = mount(Home, {
localVue,
attachToDocument: true,
});
const open = wrapper.find('#button-open');
const modal = wrapper.find({ ref: 'modal-ref' });
expect(modal.vm.isVisible).to.equal(false);
open.trigger('click');
await wrapper.vm.$nextTick();
console.log(modal.exists());
expect(modal.vm.isVisible).to.equal(true);
// find it from modal
const close = modal.find('#button-close');
expect(close.exists()).to.equal(true);
close.trigger('click');
await wrapper.vm.$nextTick();
expect(modal.vm.isVisible).to.equal(false);
wrapper.destroy();
});
});
我弄不明白为什么找不到关闭按钮。
(close.exists()=>false)
推荐答案
默认情况下导入模态以附加到<body>元素。并且在显示时不会在您的包装内。
您需要查询document才能找到您的按钮：
import { expect } from 'chai';
import { createLocalVue, mount, createWrapper } from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import Home from '@/views/Home.vue';
describe('Boostrap Modal', () => {
it('open and close modal', async () => {
const localVue = createLocalVue();
localVue.use(BootstrapVue);
const wrapper = mount(Home, {
localVue,
attachToDocument: true,
});
const open = wrapper.find('#button-open');
const modal = wrapper.find({ ref: 'modal-ref' });
expect(modal.vm.isVisible).to.equal(false);
open.trigger('click');
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
console.log(modal.exists());
expect(modal.vm.isVisible).to.equal(true);
// find it from modal close button in the document
const closeElement = document.getElementById('button-close');
expect(closeElement).toBeDefined();
const closeWrapper = createWrapper(closeElement);
expect(closeWrapper.exists()).to.equal(true);
expect(closeWrapper.is('button')).toBe(true);
closeWrapper.trigger('click');
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
expect(modal.vm.isVisible).to.equal(false);
wrapper.destroy();
});
});
这篇关于在bootstrap-vue mode(b-mode)int测试中找不到按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
