Vue.js 如何测试在悬停/鼠标悬停时调用Vue指令?
我尝试测试引导vue中的b-tooltip.hover指令是否在hover上调用。 似乎在没有触发hover事件和buttonwrapper的情况下调用了该指令;没有任何效果 如何正确触发悬停事件 我尝试测试的简化Vue组件按钮WithToolTip.Vue:Vue.js 如何测试在悬停/鼠标悬停时调用Vue指令?,vue.js,vuejs2,jestjs,bootstrap-vue,vue-test-utils,Vue.js,Vuejs2,Jestjs,Bootstrap Vue,Vue Test Utils,我尝试测试引导vue中的b-tooltip.hover指令是否在hover上调用。 似乎在没有触发hover事件和buttonwrapper的情况下调用了该指令;没有任何效果 如何正确触发悬停事件 我尝试测试的简化Vue组件按钮WithToolTip.Vue: <template> <b-btn v-b-tooltip.hover="{ title: 'someText'}">Button with Tooltip</b-btn> </templat
<template>
<b-btn v-b-tooltip.hover="{ title: 'someText'}">Button with Tooltip</b-btn>
</template>
尽管该行被注释,但成功通过的单元测试触发了悬停事件:
import { createLocalVue, mount } from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import ButtonWithTooltip from '@/components/ButtonWithTooltip.vue';
const localVue = createLocalVue();
localVue.use(BootstrapVue);
localVue.use(ButtonWithTooltip);
describe('ButtonWithTooltip.vue', () => {
it('shows tooltip on hover over the button', () => {
const BTooltipDirective = jest.fn();
const wrapper = mount(ButtonWithTooltip, {
localVue,
directives: { 'b-tooltip': BTooltipDirective }
});
const buttonWrapper = wrapper.find('button');
expect(buttonWrapper.exists()).toBe(true);
// buttonWrapper.trigger('mouseover'); <--- test is passed successfully even without this line
expect(BTooltipDirective).toHaveBeenCalled();
expect(BTooltipDirective.mock.calls[0][1].value).toEqual({
title: 'someText'
});
});
});
更新
根据以下评论:
expect(buttonWrapper.attributes('aria-describedby')).toBeDefined()
const adb = buttonWrapper.attributes('aria-describedby')
const tip = document.querySelector(`#${adb}`)
expect(tip).not.toBe(null)
expect(tip.classList.contains('tooltip')).toBe(true)
古老的
尝试通过检查html内容进行测试,例如:
buttonWrapper.trigger('mouseover');
expect(wrapper.contains("someText')).toEqual(true);
或者可能不确定:
expect(wrapper.find("BTooltip').isVisible()).toEqual(true);
不要忘记移除任何模拟,例如:
directives: { 'b-tooltip': BTooltipDirective }
这应该是和。相反,您应该专注于测试自己组件的行为。不幸的是,这不起作用,因为工具提示的呈现DOM不是包装器的一部分。而是附加到页面底部。如果您通过浏览器api检查,例如document.querySelector.b-tooltip!=无效的我查看了文档中的示例,我看到当您将鼠标悬停在元素上时,将添加具有类b-tooltip的元素。可能您必须使用attachToDocument选项您可以查看BootstrapVue如何测试工具提示指令:@TroyMorehouse谢谢,它实际上回答了我的问题