OnClickOutside Testing

[ariefsn]

Hi guys,
I create some component that uses onClickOutside, its working fine.
But, how to test it?
In my spec.ts, the onClickOutside is not covered even I have clicked on outside of wrapper.

Thanks.

[iKnowMagic]

I have the same problem. I have no idea how to test OnClickOutside. I am using vitest. Any ideas are appreciated.

[marcelobotega]

Struggled with this too. So here is the solution that I found out.
The OnClickOutside attach the event to window, so you can call:

global.dispatchEvent(new Event('click'));
OR
window.dispatchEvent(new Event('click'));

This will trigger the clickOutside, at least the function from @vueuse/core (did not test the directive or component).

[michealroberts]

To echo @marcelobotega, I would tackle it as follows:

• Click anywhere outside of the component
• Check that the component is no longer visible in the DOM / or perhaps has a display: hidden CSS property added etc (what ever you need to achieve it)

[curtgrimes]

If you trust that onClickOutside() is doing what it says it does, you could take a different approach and instead test your component's usage of onClickOutside() by writing tests that:

1. assert that onClickOutside() is being invoked in your component
2. assert that onClickOutside() is passed the expected values when it's called, and
3. assert that when onClickOutside() returns different values (when its refs change), your application has the expected behaviors