Как проверить, что директивы Vue вызываются при наведении/наведении курсора мыши?
Я пытаюсь проверить, чтоb-tooltip.hover
директива hover из bootstrap-vue
вызывается при наведении курсора.
Похоже, что директива вызывается даже без запуска события 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'
});
});
});
У вопроса есть решение - Посмотреть?

Это должно быть и уже проверено bootstrap-vue . Вместо этого вы должны сосредоточиться на тестировании поведения вашего собственного компонента.
Источник
Ответы - Как проверить, что директивы Vue вызываются при наведении/наведении курсора мыши? / How to test that a Vue directives is called on hover/mouseover?
Является ответом!

18.09.2019 02:23:22
УСОВЕРШЕНСТВОВАННЫЙ
Из комментариев ниже:
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 проверяет директиву tooltip по адресу: github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/directives/…

@TroyMorehouse спасибо, это на самом деле отвечает на мой вопрос
Помочь в развитии проекта: