我想在测试用例中测试模式行为。
第一步没问题,但是第二步失败。我可以通过ref找到模态,但是找不到模态上的按钮。
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()
=>否)
答案 0 :(得分:1)
默认情况下,模态模块已门户化,以附加到<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();
});
});