How to test that a Vue directives is called on hover/mouseover?

Question

I try to test that theb-tooltip.hover directive from bootstrap-vue is called on hover. It seems that the directive is called even without triggering the hover event andbuttonWrapper.trigger('mouseover'); doesn't show any effect.

How can I trigger the hover event correctly?

The simplified Vue component ButtonWithTooltip.vue which I try to test:

<template>
  <b-btn v-b-tooltip.hover="{ title: 'someText'}">Button with Tooltip</b-btn>
</template>

The unit test which passes successfully although the line is commented which triggers the hover event:

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'
    });
  });
});

This should be and [already is tested by bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue/blob/0b7de2992b42c094541b574b4bf24bcf10abe22e/src/directives/tooltip/tooltip.spec.js). You should instead focus on testing your own component's behavior. — Husam Ibrahim, Sep 18 '19 at 08:40

Alexandr Vysotsky · Accepted Answer · 2019-09-19T07:43:26.920

1

UPDATED

From comments below:

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)

OLD

Try to test it by checking html content, e.g.:

buttonWrapper.trigger('mouseover');
expect(wrapper.contains("someText')).toEqual(true);

https://vue-test-utils.vuejs.org/api/wrapper/contains.html

Or maybe (not sure):

expect(wrapper.find("BTooltip').isVisible()).toEqual(true);

Do not forget to remove any mocks, e.g.:

directives: { 'b-tooltip': BTooltipDirective }

edited Sep 19 '19 at 07:43

answered Sep 18 '19 at 11:23

Alexandr Vysotsky

1,081
13
16

1

Unfortunately this doesn't work as the rendered DOM of the tooltip is not part of the wrapper. Instead is appended to the bottom of the page DOM – Simon Thiel Sep 18 '19 at 11:25
2

what if you check by browser api, e.g. `document.querySelector('.b-tooltip') != null`. i've checked examples in docs and i see that element with class `b-tooltip` will be added when you hover on element. May be you have to use `attachToDocument` option – Alexandr Vysotsky Sep 18 '19 at 11:30
2

You can take a look to see how BootstrapVue tests the tooltip directive at: https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/directives/tooltip/tooltip.spec.js – Troy Morehouse Sep 18 '19 at 16:26
@TroyMorehouse thank you, it actually answers my question – Simon Thiel Sep 19 '19 at 06:36

How to test that a Vue directives is called on hover/mouseover?

1 Answers1

UPDATED

OLD