Merge branch 'test-useEventRef'

Author: lmhcoding

tests/useDebounce.test.ts

@@ -1,5 +1,5 @@
 import { useDebounce } from '../src/useDebounce'
-import invokeHook from './util/invokeHook'
+import { invokeHook } from './util'
 
 beforeEach(() => {
   jest.useFakeTimers()

tests/useEvent.test.ts

@@ -2,40 +2,7 @@ import { VueWrapper } from '@vue/test-utils'
 import { nextTick, onMounted, Ref, ref } from 'vue'
 import { IEventTarget, useEvent } from '../src/useEvent'
 import { Target } from '../src/util'
-import invokeHook from './util/invokeHook'
-
-function patchEventTarget () {
-  const div: any = document.createElement('div')
-  let proto = Object.getPrototypeOf(div)
-  while (proto) {
-    // eslint-disable-next-line no-prototype-builtins
-    if (proto.hasOwnProperty('addEventListener')) {
-      const originAdd = proto.addEventListener
-      const originRemove = proto.removeEventListener
-      const addEventListener = jest.fn((event, cb, options) => {
-        originAdd.call(
-          addEventListener.mock.instances[0],
-          event,
-          cb,
-          options
-        )
-      })
-      const removeEventListener = jest.fn((event, cb, options) => {
-        originRemove.call(
-          removeEventListener.mock.instances[0],
-          event,
-          cb,
-          options
-        )
-      })
-      proto.addEventListener = addEventListener
-      proto.removeEventListener = removeEventListener
-      return [addEventListener, removeEventListener]
-    }
-    proto = Object.getPrototypeOf(proto)
-  }
-  return []
-}
+import { invokeHook, patchEventTarget } from './util'
 
 const [add, remove] = patchEventTarget()
 const handler = jest.fn()

tests/useEventRef.test.ts

@@ -0,0 +1,52 @@
+import { VueWrapper } from '@vue/test-utils'
+import { useEventRef } from '../src/useEventRef'
+import { invokeHook, patchEventTarget } from './util'
+
+const [add, remove] = patchEventTarget()
+const handler = jest.fn()
+
+describe('test useEventRef', () => {
+  let wrapper: VueWrapper<any>
+  let clear: () => void
+  beforeEach(() => {
+    wrapper = invokeHook(() => {
+      const [target, clearFn] = useEventRef(
+        'click',
+        handler,
+        true
+      )
+      clear = clearFn
+      return {
+        test: target
+      }
+    })
+  })
+  test('addEventListener should be called after mounted', () => {
+    expect(add).toHaveBeenCalledTimes(1)
+    expect(add).toHaveBeenCalledWith('click', handler, true)
+  })
+  test('callback should be called after firing an event', () => {
+    const target = wrapper.find('#test')
+    target.trigger('click')
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+  test('removeEventListener should be called after invoking clear', () => {
+    clear()
+    expect(remove).toHaveBeenCalledTimes(1)
+    expect(remove).toHaveBeenCalledWith('click', handler, true)
+  })
+  test('callback should not be called after invoking clear', () => {
+    const target = wrapper.find('#test')
+    clear()
+    target.trigger('click')
+    expect(handler).not.toBeCalled()
+  })
+  test('event should be removed after unmounted', () => {
+    const targetDiv = wrapper.find('#test')
+    wrapper.unmount()
+    expect(remove).toHaveBeenCalledTimes(1)
+    expect(remove).toHaveBeenCalledWith('click', handler, true)
+    targetDiv.trigger('click')
+    expect(handler).not.toBeCalled()
+  })
+})

tests/useInterval.test.ts

@@ -1,5 +1,5 @@
 import { useInterval } from '../src/useInterval'
-import invokeHook from './util/invokeHook'
+import { invokeHook } from './util'
 
 let callback: Function | undefined
 

tests/useStorage.test.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue'
 import { useStorage } from '../src/useStorage'
-import invokeHook from './util/invokeHook'
+import { invokeHook } from './util'
 
 function testStorageWithSimpleVal (storage: Storage) {
   describe('test useStorage when storage is storage and val is not an Object', () => {

tests/useTimeout.test.ts

@@ -1,5 +1,5 @@
 import { useTimeout } from '../src/useTimeout'
-import invokeHook from './util/invokeHook'
+import { invokeHook } from './util'
 
 beforeEach(() => {
   jest.useFakeTimers()

tests/util/index.ts

@@ -0,0 +1,2 @@
+export * from './invokeHook'
+export * from './patchEventTarget'

tests/util/invokeHook.ts

@@ -1,12 +1,14 @@
 import { shallowMount } from '@vue/test-utils'
 import { defineComponent } from 'vue'
 
-export default function invokeHooks (setup: () => any) {
+const defaultTemplate = '<div ref="test" data-test="test" id="test">test</div>'
+
+export function invokeHook (setup: () => any, template = defaultTemplate) {
   document.body.innerHTML = `
     <div id="app"></div>
   `
   const App = defineComponent({
-    template: '<div ref="test" data-test="test" id="test">test</div>',
+    template,
     setup
   })
   // @ts-ignore

tests/util/patchEventTarget.ts

@@ -0,0 +1,32 @@
+export function patchEventTarget () {
+  const div: any = document.createElement('div')
+  let proto = Object.getPrototypeOf(div)
+  while (proto) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (proto.hasOwnProperty('addEventListener')) {
+      const originAdd = proto.addEventListener
+      const originRemove = proto.removeEventListener
+      const addEventListener = jest.fn((event, cb, options) => {
+        originAdd.call(
+          addEventListener.mock.instances[0],
+          event,
+          cb,
+          options
+        )
+      })
+      const removeEventListener = jest.fn((event, cb, options) => {
+        originRemove.call(
+          removeEventListener.mock.instances[0],
+          event,
+          cb,
+          options
+        )
+      })
+      proto.addEventListener = addEventListener
+      proto.removeEventListener = removeEventListener
+      return [addEventListener, removeEventListener]
+    }
+    proto = Object.getPrototypeOf(proto)
+  }
+  return []
+}