How to test useClickOut?

[kimmy-wang]

How to test useClickOut?

export const useClickOut = (listenForClickOut: Ref<boolean>, clickOutHandler?: (event: any) => void) => {
  const elRef = useContext<HTMLElement | undefined>('$el')

  let clickOutElement: any = null
  let clickOutEventName: any = null
  watch(listenForClickOut, (newValue, oldValue) => {
    if (newValue !== oldValue) {
      eventOff(
        clickOutElement,
        clickOutEventName,
        _clickOutHandler,
        EVENT_OPTIONS_NO_CAPTURE
      )
      if (newValue) {
        eventOn(
          clickOutElement,
          clickOutEventName,
          _clickOutHandler,
          EVENT_OPTIONS_NO_CAPTURE
        )
      }
    }
  })

  onMounted(() => {
    if (!clickOutElement) {
      clickOutElement = document
    }
    if (!clickOutEventName) {
      clickOutEventName = 'click'
    }
    if (listenForClickOut.value) {
      eventOn(
        clickOutElement,
        clickOutEventName,
        _clickOutHandler,
        EVENT_OPTIONS_NO_CAPTURE
      )
    }
  })

  onBeforeUnmount(() => {
    eventOff(clickOutElement, clickOutEventName, _clickOutHandler, EVENT_OPTIONS_NO_CAPTURE)
  })

  const isClickOut = (event: any) => {
    return !contains(elRef.value, event.target)
  }

  const _clickOutHandler = (event: any) => {
    if (clickOutHandler && isClickOut(event)) {
      clickOutHandler(event)
    }
  }
}

// Attach an event listener to an element
export const eventOn = (el: HTMLElement, eventName: string, handler: EventListenerOrEventListenerObject, options: Record<string, any>) => {
  if (el && el.addEventListener) {
    el.addEventListener(eventName, handler, parseEventOptions(options))
  }
}

// Remove an event listener from an element
export const eventOff = (el: HTMLElement, eventName: string, handler: EventListenerOrEventListenerObject, options: Record<string, any>) => {
  if (el && el.removeEventListener) {
    el.removeEventListener(eventName, handler, parseEventOptions(options))
  }
}

export const useContext = <T>(name: string): ComputedRef<T | undefined> => {
  const vm = getCurrentInstance()!
  return computed(() => (vm.proxy as any)[name] ?? undefined)
}

test.ts

import { ref, nextTick } from 'vue'
import { describe, test, expect } from 'vitest'
import { useClickOut } from '../use-click-out'

describe('utils/click-out', () => {
  test('works', async () => {
    let count = 0
    let listenForClickOut= ref(false)
    const clickOutHandler = () => {
      count++
    }

    useClickOut(listenForClickOut, clickOutHandler)

    const clickEvent = new MouseEvent('click')

    expect(count).toBe(0)
    // expect(wrapper.vm.listenForClickOut).toBe(true)

    // When `this.listenForClickOut` is `true`
    listenForClickOut.value = true
    await nextTick()
    expect(count).toBe(0)
    document.dispatchEvent(clickEvent)
    expect(count).toBe(1)

    // When `this.listenForClickOut` is `false`
    listenForClickOut.value = false
    await nextTick()
    document.dispatchEvent(clickEvent)
    expect(count).toBe(1)
  })
})