KABBOUCHI / vue-tippy

VueJS Tooltip powered by Tippy.js
https://vue-tippy.netlify.app
MIT License
731 stars 89 forks source link

Tippy tooltip not appearing during unit tests with default `onShow` prop #295

Open balazser opened 1 year ago

balazser commented 1 year ago

Issue: When conducting unit tests using with vitest, testing-library and vue-tippy, I've encountered an unexpected behavior related to the tooltip's appearance.

Description: We're utilizing vue-tippy in our project, where we pass the tooltip content using the <slot name="content">. In our unit tests, which employ the testing-library, we observed that the tooltip does not display. I've tracked the issue to this specific line of code.

Our Code:

<template>
  <tippy
    v-if="$slots.content"
    :placement="position"
    :duration="0"
    :theme="light ? 'light' : ''"
    data-testid="tooltip"
  >
    <slot></slot>
    <template #content>
      <div class="popper" :class="{ 'pointer-event': canPointer, light }">
        <slot name="content"></slot>
      </div>
    </template>
  </tippy>
  <div v-else>
    <slot></slot>
  </div>
</template>

Temporary Fix: As a workaround in our unit tests, overwriting the onShow prop as shown below makes the tooltip appear:

setDefaultProps({
  // Overriding the default `onShow` makes the tooltip appear
  // Reference: https://github.com/KABBOUCHI/vue-tippy/blob/b1f4f447b5da60f391b8550c52cd5f959f21551d/src/composables/useTippy.ts#L23
  onShow: () => {},
});

Could you provide some insights into this behavior? Is there something I might be overlooking or is this a potential issue with the library?

Thank you in advance!