正文 

当前位置： 首页 > 问答 >

如何测试在悬停/鼠标悬停时调用了 Vue 指令？

     2023-02-22     74

关键词：

【中文标题】如何测试在悬停/鼠标悬停时调用了 Vue 指令？【英文标题】：How to test that a Vue directives is called on hover/mouseover? 【发布时间】：2020-01-19 02:25:34 【问题描述】：

我尝试测试来自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'
    );
  );
);

【问题讨论】：

这应该是和already is tested by bootstrap-vue。相反，您应该专注于测试您自己的组件的行为。 【参考方案1】：

更新

来自下面的cmets：

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

【讨论】：

不幸的是，这不起作用，因为工具提示的渲染 DOM 不是包装器的一部分。而是附加到页面底部的 DOM 如果您通过浏览器 api 检查会怎样，例如document.querySelector('.b-tooltip') != null。我已经检查了文档中的示例，我看到当您将鼠标悬停在元素上时，将添加具有 b-tooltip 类的元素。可能你必须使用attachToDocument 选项 您可以查看 BootstrapVue 如何测试工具提示指令：github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/directives/… @TroyMorehouse 谢谢你，它实际上回答了我的问题

在表格行悬停时调用函数

】在表格行悬停时调用函数【英文标题】：CallFunctiononTabelRowHover【发布时间】：2021-05-2418:06:43【问题描述】：我想调用一个函数，每次我将鼠标悬停在表格中时，它都会打印一行的内容。到目前为止，我有这个：functiontablemouseove... 查看详情

Prolog 鼠标悬停识别器

...hoverrecognizer【发布时间】：2016-04-1311:19:52【问题描述】：如何在prolog中向对象添加悬停识别器？我希望在用户用鼠标悬停对象时调用规则。类似的东西：send(S,recogniser,click_gesture(left,\'\',single,and(message(@prolog,add,X,Y)))).但对于鼠标悬... 查看详情

Vue JS - 如何更改鼠标悬停时显示的组件的位置

】VueJS-如何更改鼠标悬停时显示的组件的位置【英文标题】：VueJS-Howtochangethepositionofacomponentthatisdisplayedonmousehover【发布时间】：2021-07-2506:34:50【问题描述】：我有一个与组件位置有关的问题。我有四张图片，当你将鼠标悬停在... 查看详情

如何针对鼠标悬停事件中的元素 id 值进行测试？

】如何针对鼠标悬停事件中的元素id值进行测试？【英文标题】：HowdoItestagainstanelementsidvalueonamouseoverevent?【发布时间】：2020-06-2109:54:57【问题描述】：想知道是否有人可以帮助我了解如何在鼠标悬停事件中针对元素的ID值进行测... 查看详情

将鼠标悬停在工具提示区域上的工具提示指令

】将鼠标悬停在工具提示区域上的工具提示指令【英文标题】：TooltipDirectivewithmouseoverontooltiparea【发布时间】：2018-12-0805:58:14【问题描述】：我的要求是当用户将鼠标悬停在图标上时，应该出现工具提示，并且用户可以点击工具... 查看详情

在鼠标悬停时动态添加和删除类 - Vue.js

】在鼠标悬停时动态添加和删除类-Vue.js【英文标题】：Dynamicallyaddandremoveclassesonmouseover-Vue.js【发布时间】：2018-07-3105:22:52【问题描述】：我可以使用Vue在鼠标悬停时成功添加一个类。但是我想在鼠标离开元素时删除该类。在Vue... 查看详情

悬停时调整图像大小使其他图像移动

...预期调整大小，但其他未悬停的图像会向下移动50像素。如何避免其他图片向下移动？我的代码是：HTML：<ahref=""><im 查看详情

如何在鼠标悬停在使用 Vuetify 数据表的表格时显示按钮

】如何在鼠标悬停在使用Vuetify数据表的表格时显示按钮【英文标题】：HowtoShowbuttonsjustwhenthemouseishoveringthetableusingVuetifyDatatable【发布时间】：2020-02-0412:03:20【问题描述】：我是刚开始使用Vuetify开发Vue.js的新手。这里我使用v-data-t... 查看详情

如何使悬停信息气泡出现在 WPF 中的鼠标悬停上？

】如何使悬停信息气泡出现在WPF中的鼠标悬停上？【英文标题】：HowcanImakeahoverinfobubbleappearonmouseoverinWPF?【发布时间】：2010-12-2222:39:48【问题描述】：我想让文本气泡在鼠标悬停在TextBlock上时出现。以下代码是我能得到的最接近... 查看详情

将鼠标悬停在上下文菜单上时如何更改 li 项的颜色

】将鼠标悬停在上下文菜单上时如何更改li项的颜色【英文标题】：Howtochangethecolorofanliitemofthecontextmenu,whenhoveredoverit【发布时间】：2019-07-1915:45:38【问题描述】：我正在使用VueJS和Bootstrap开发一个应用程序。我使用称为vue-contextVue... 查看详情

如何在鼠标悬停在图像上时暂停动画

】如何在鼠标悬停在图像上时暂停动画【英文标题】：Howtopausetheanimationonmousehoveronimage【发布时间】：2018-05-1822:13:46【问题描述】：我需要帮助来停止鼠标悬停动画并继续鼠标悬停。请参阅下面的url以查看代码。谢谢http://jsfiddle.... 查看详情

如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上？

】如何将鼠标悬停在子元素上而不悬停在CSS中的父元素上？【英文标题】：HowdoIhoveroverachildelementwithouthoveringovertheparentinCSS?【发布时间】：2017-04-1909:59:51【问题描述】：是否可以将鼠标悬停在嵌套的子元素上而不触发父元素上的... 查看详情

如何在悬停时暂停引导轮播并在鼠标悬停时恢复它？

】如何在悬停时暂停引导轮播并在鼠标悬停时恢复它？【英文标题】：HowcanIpauseaBootstrapCarouselonhoverandresumeitonmouse-out?【发布时间】：2017-04-2423:56:10【问题描述】：我的网站上有一个引导轮播。当用户将鼠标悬停在元素#formcontainer... 查看详情

如何仅在鼠标悬停时在树节点的右端显示一个小图标

】如何仅在鼠标悬停时在树节点的右端显示一个小图标【英文标题】：Howtoshowasmallicononrightendofthetreenodeonlyonmouseover【发布时间】：2019-04-0707:59:46【问题描述】：我试图在同一树节点的鼠标悬停时在树节点上显示一个图标。Vue.compo... 查看详情

角度：在悬停时更新范围

】角度：在悬停时更新范围【英文标题】：angular:updatingscopeonhover【发布时间】：2013-03-2405:50:09【问题描述】：我希望默认情况下隐藏主div的某些子div，当您将鼠标悬停在主div上时可见。我正在尝试使用Angular中的本机并忘记jquery... 查看详情

如何在 matplotlib 中控制鼠标悬停文本

】如何在matplotlib中控制鼠标悬停文本【英文标题】：Howtocontrolmouseovertextinmatplotlib【发布时间】：2018-03-1320:42:27【问题描述】：当您将鼠标悬停在使用imshow显示的图像上时，您可以将鼠标悬停在图像上以检查其RGB值。matplotlib窗口... 查看详情

QTableView：如何将鼠标悬停在整行上？

】QTableView：如何将鼠标悬停在整行上？【英文标题】：QTableView:howtohoveranentirerowonmouseover?【发布时间】：2013-01-0919:56:09【问题描述】：我对QTableView、QAbstractTableModel和QItemDelegate进行了子类化。我可以将鼠标悬停在单个单元格上：... 查看详情

将鼠标悬停在图像上时如何更改 SVG 的颜色？

】将鼠标悬停在图像上时如何更改SVG的颜色？【英文标题】：HowtochangethecoloroftheSVGwhenhoveringovertheimage?【发布时间】：2021-12-1807:48:27【问题描述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube... 查看详情