如何测试在 hover/mouseover 上调用了 Vue 指令?
How to test that a Vue directives is called on hover/mouseover?
我尝试测试 bootstrap-vue
中的 b-tooltip.hover
指令在悬停时被调用。
似乎即使没有触发悬停事件也调用了指令并且buttonWrapper.trigger('mouseover');
没有显示任何效果。
如何正确触发悬停事件?
我尝试测试的简化 Vue 组件ButtonWithTooltip.vue
:
<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);
https://vue-test-utils.vuejs.org/api/wrapper/contains.html
或者可能(不确定):
expect(wrapper.find("BTooltip').isVisible()).toEqual(true);
不要忘记删除任何模拟,例如:
directives: { 'b-tooltip': BTooltipDirective }
我尝试测试 bootstrap-vue
中的 b-tooltip.hover
指令在悬停时被调用。
似乎即使没有触发悬停事件也调用了指令并且buttonWrapper.trigger('mouseover');
没有显示任何效果。
如何正确触发悬停事件?
我尝试测试的简化 Vue 组件ButtonWithTooltip.vue
:
<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);
https://vue-test-utils.vuejs.org/api/wrapper/contains.html
或者可能(不确定):
expect(wrapper.find("BTooltip').isVisible()).toEqual(true);
不要忘记删除任何模拟,例如:
directives: { 'b-tooltip': BTooltipDirective }