Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.28k stars 335 forks source link

testing with jest + vue-test-utils / vitest #954

Open petitkriket opened 1 year ago

petitkriket commented 1 year ago

Hello,

Would someone have an idea on how to properly test floating-vue implementation using jest/vue-test-utils ?

I was using v-tooltip and testing the tooltip content text with the following assertion as advised here.

  it('displays an explanation tooltip when a book cannot be rent', async () => {
    const wrapper = renderedComponent({ isAvailableForRent: false });

    const button = wrapper.get('[data-testid="rent-button"]');
    await button.trigger('mouseenter');

    await new Promise((resolve) => {
      requestAnimationFrame(() => {
        expect(wrapper.text()).toContain('the book is currently taken');
        resolve();
      });
    });
  });

It worked.

I am upgrading to floating-vue, while using it as a directive the test no longer pass, reading from the source is that nextFrame() requestAnimationFrame is used in Popper.vue component which is itself used by the directive, so I dont get why it does not work.

I'd love to add a "how to test" section to the docs if anyone has a clue?

jjaramillom commented 8 months ago

@petitkriket Could you make this work?