Как проверить, что директивы Vue вызываются при наведении/наведении курсора мыши?

18.09.2019 10:42:39 Просмотров 78 Источник

Я пытаюсь проверить, что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'
    });
  });
});

У вопроса есть решение -

https://stackoverflow.com/questions/57987515/how-to-test-that-a-vue-directives-is-called-on-hover-mouseover#comment102384659_57987515

Это должно быть и уже проверено bootstrap-vue . Вместо этого вы должны сосредоточиться на тестировании поведения вашего собственного компонента.

Источник

Ответы - Как проверить, что директивы Vue вызываются при наведении/наведении курсора мыши? / How to test that a Vue directives is called on hover/mouseover?

Является ответом!

Alexandr Vysotsky

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 }

Источник

https://stackoverflow.com/questions/57987515/how-to-test-that-a-vue-directives-is-called-on-hover-mouseover/57991640#comment102390343_57991640

К сожалению, это не работает, так как визуализированный DOM подсказки не является частью оболочки. Вместо этого добавляется в нижнюю часть страницы DOM

Источник

https://stackoverflow.com/questions/57987515/how-to-test-that-a-vue-directives-is-called-on-hover-mouseover/57991640#comment102390455_57991640

Да, вы правы, просто проверил его

Источник

https://stackoverflow.com/questions/57987515/how-to-test-that-a-vue-directives-is-called-on-hover-mouseover/57991640#comment102390510_57991640

что делать, если вы проверяете с помощью API браузера, например document.querySelector('.b-tooltip') != null. я проверил примеры в документах,и я вижу, что элемент с классом b-tooltipбудет добавлен при наведении на элемент. Может быть, вам придется использовать опцию attachToDocument

Источник