test: ✅ unit testing

test: unit testing

Author: inhiblab

.gitignore

@@ -3,6 +3,7 @@ dist
 .DS_Store
 .cache
 .temp
+coverage
 
 
 # lock

package.json

@@ -12,6 +12,7 @@
 		"build:types": "cd packages/hooks && vue-tsc --noEmit && vite build --mode fullTypes",
     "test": "vitest",
 		"test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage",
 		"prepare": "husky install"
 	},
 	"devDependencies": {
@@ -35,6 +36,7 @@
 		"@vue-hooks-plus/vitepress": "1.0.1",
 		"@vue-hooks-plus/vitepress-demo-block": "^1.2.7",
 		"@vue/test-utils": "^2.1.0",
+    "@vitest/coverage-c8":"^0.25.7",
 		"eslint": "^8.20.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.2.1",

packages/hooks/src/useNetwork/__tests__/index.spec.ts

@@ -0,0 +1,9 @@
+import renderHook from 'test-utils/renderHook'
+import useNetwork from '../index'
+
+describe('useNetwork', () => {
+  it('toggle network state', () => {
+    const [hook] = renderHook(() => useNetwork())
+    expect(hook.online).toBeTruthy()
+  })
+})

packages/hooks/src/useNetwork/index.ts

@@ -1,88 +1,86 @@
+/* eslint-disable no-unused-vars */
 import { watchEffect, ref } from 'vue'
 
 export interface NetworkState {
-	since?: Date
-	online?: boolean
-	rtt?: number
-	type?: string
-	downlink?: number
-	saveData?: boolean
-	downlinkMax?: number
-	effectiveType?: string
+  since?: Date
+  online?: boolean
+  rtt?: number
+  type?: string
+  downlink?: number
+  saveData?: boolean
+  downlinkMax?: number
+  effectiveType?: string
 }
 
 enum NetworkEventType {
-	ONLINE = 'online',
-	OFFLINE = 'offline',
-	CHANGE = 'change',
+  ONLINE = 'online',
+  OFFLINE = 'offline',
+  CHANGE = 'change',
 }
 
 function getConnection() {
-	const nav = navigator as any
-	if (typeof nav !== 'object') return null
-	return nav.connection || nav.mozConnection || nav.webkitConnection
+  const nav = navigator as any
+  if (typeof nav !== 'object') return null
+  return nav.connection || nav.mozConnection || nav.webkitConnection
 }
 
 function getConnectionProperty(): NetworkState {
-	const c = getConnection()
-	if (!c) return {}
-	return {
-		rtt: c.rtt,
-		type: c.type,
-		saveData: c.saveData,
-		downlink: c.downlink,
-		downlinkMax: c.downlinkMax,
-		effectiveType: c.effectiveType,
-	}
+  const c = getConnection()
+  if (!c) return {}
+  return {
+    rtt: c.rtt,
+    type: c.type,
+    saveData: c.saveData,
+    downlink: c.downlink,
+    downlinkMax: c.downlinkMax,
+    effectiveType: c.effectiveType,
+  }
 }
 
 function useNetwork(): NetworkState {
-	const state = ref({
-		since: undefined,
-		online: navigator?.onLine,
-		...getConnectionProperty(),
-	})
-	watchEffect((onInvalidate) => {
-		const onOnline = () => {
-			state.value = {
-				...state.value,
-				online: true,
-				since: new Date(),
-			}
-		}
+  const state = ref({
+    since: undefined,
+    online: navigator?.onLine,
+    ...getConnectionProperty(),
+  })
+  watchEffect(onInvalidate => {
+    const onOnline = () => {
+      state.value = {
+        ...state.value,
+        online: true,
+        since: new Date(),
+      }
+    }
 
-		const onOffline = () => {
-			state.value = {
-				...state.value,
-				online: false,
-				since: new Date(),
-			}
-		}
+    const onOffline = () => {
+      state.value = {
+        ...state.value,
+        online: false,
+        since: new Date(),
+      }
+    }
 
-		const onConnectionChange = () => {
-			state.value = {
-				...state.value,
-				...getConnectionProperty(),
-			}
-		}
+    const onConnectionChange = () => {
+      state.value = {
+        ...state.value,
+        ...getConnectionProperty(),
+      }
+    }
 
-		window.addEventListener(NetworkEventType.ONLINE, onOnline)
-		window.addEventListener(NetworkEventType.OFFLINE, onOffline)
+    window.addEventListener(NetworkEventType.ONLINE, onOnline)
+    window.addEventListener(NetworkEventType.OFFLINE, onOffline)
 
-		const connection = getConnection()
-		connection?.addEventListener(NetworkEventType.CHANGE, onConnectionChange)
+    const connection = getConnection()
+    connection?.addEventListener(NetworkEventType.CHANGE, onConnectionChange)
 
-		onInvalidate(() => {
-			window.removeEventListener(NetworkEventType.ONLINE, onOnline)
-			window.removeEventListener(NetworkEventType.OFFLINE, onOffline)
-			connection?.removeEventListener(
-				NetworkEventType.CHANGE,
-				onConnectionChange
-			)
-		})
-	})
+    onInvalidate(() => {
+      window.removeEventListener(NetworkEventType.ONLINE, onOnline)
+      window.removeEventListener(NetworkEventType.OFFLINE, onOffline)
+      connection?.removeEventListener(NetworkEventType.CHANGE, onConnectionChange)
+    })
+  })
 
-	return state.value
+  return state.value
 }
 
 export default useNetwork

packages/hooks/src/useRequest/docs/throttle/index.zh-CN.md

@@ -29,5 +29,7 @@ throttle 所有参数用法和效果同 [lodash.throttle](https://www.lodashjs.c
 
 ## 注意
 
-- `options.throttleWait`、`options.throttleLeading`、`options.throttleTrailing` 支持动态变化。
+- `options.throttleWait` 支持动态变化。
+- `options.throttleLeading` 支持动态变化。
+- `options.throttleTrailing` 支持动态变化。
 - `runAsync` 在真正执行时，会返回 `Promise`。在未被执行时，不会有任何返回。

packages/hooks/src/useSetState/__tests__/index.spec.ts

@@ -0,0 +1,36 @@
+import renderHook from 'test-utils/renderHook'
+import useSetState from '../index'
+
+describe('useSetState', () => {
+  const setUp = <T extends object>(initialValue: T) =>
+    renderHook(() => {
+      const [state, setState] = useSetState<T>(initialValue)
+      return {
+        state,
+        setState,
+      } as const
+    })
+
+  it('should support initialValue', () => {
+    const [hook] = setUp({
+      hello: 'world',
+    })
+    expect(hook.state.value).toEqual({ hello: 'world' })
+  })
+
+  it('should support object', () => {
+    const [hook] = setUp<any>({
+      hello: 'world',
+    })
+    hook.setState({ foo: 'bar' })
+    expect(hook.state.value).toEqual({ hello: 'world', foo: 'bar' })
+  })
+
+  it('should support function update', () => {
+    const [hook] = setUp({
+      count: 0,
+    })
+    hook.setState({ count: hook.state.value.count + 1 })
+    expect(hook.state.value).toEqual({ count: 1 })
+  })
+})

packages/hooks/src/useSetState/index.ts

@@ -1,5 +1,5 @@
 import { ref, Ref, unref, UnwrapRef, readonly, DeepReadonly, UnwrapNestedRefs } from 'vue'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 type StateType<S> = S | (() => S) | Ref<S> | (() => Ref<S>)
 

packages/hooks/src/useSize/__tests__/index.spec.ts

@@ -0,0 +1,19 @@
+import renderHook from 'test-utils/renderHook'
+import useSize from '../index'
+
+// let callback: (arg0: { target: { clientWidth: number; clientHeight: number } }[]) => void
+// vitest.mock('resize-observer-polyfill', () => {
+//   return vitest.fn().mockImplementation(cb => {
+//     callback = cb
+//     return {
+//       observe: () => {},
+//       disconnect: () => {},
+//     }
+//   })
+// })
+
+describe('useSize', () => {
+  it('should not work when target is null', () => {
+    renderHook(() => useSize(null))
+  })
+})

packages/hooks/src/useThrottleFn/__tests__/index.spec.ts

@@ -0,0 +1,48 @@
+import renderHook from 'test-utils/renderHook'
+import { sleep } from 'test-utils/sleep'
+import useThrottleFn from '../index'
+
+describe('useThrottleFn', () => {
+  it('run.value, cancel and flush should work', async () => {
+    let count = 0
+    const throttleFn = () => {
+      count++
+    }
+    const [hook] = renderHook(() => useThrottleFn(throttleFn, { wait: 500 }))
+    hook.run.value()
+    expect(count).toBe(1)
+    hook.run.value()
+    hook.run.value()
+    hook.run.value()
+    expect(count).toBe(1)
+    await sleep(450) // t: 450
+    hook.run.value()
+    expect(count).toBe(1)
+    await sleep(100) // t: 550
+    hook.run.value()
+    expect(count).toBe(2)
+    hook.run.value()
+    hook.run.value()
+    await sleep(500) // t: 1050
+    expect(count).toBe(3)
+    hook.run.value()
+    hook.run.value()
+    hook.cancel()
+    await sleep(500) // t: 1550
+    expect(count).toBe(4)
+    hook.run.value()
+    hook.run.value()
+    expect(count).toBe(5)
+    hook.flush()
+    expect(count).toBe(6)
+    await sleep(550) // t: 2100
+    expect(count).toBe(6)
+  })
+
+  // it('should output error when fn is not a function', () => {
+  //   const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  //   renderHook(() => useThrottleFn(1 as any));
+  //   expect(errSpy).toBeCalledWith('useThrottleFn expected parameter is a function, got number');
+  //   errSpy.mockRestore();
+  // });
+})

packages/hooks/src/useTimeout/__tests__/index.spec.ts

@@ -0,0 +1,46 @@
+import renderHook from 'test-utils/renderHook'
+import useTimeout from '../index'
+
+interface ParamsObj {
+  fn: (...arg: any) => any
+  delay: number | undefined
+}
+
+const setUp = ({ fn, delay }: ParamsObj) => renderHook(() => useTimeout(fn, delay))
+
+describe('useTimeout', () => {
+  vitest.useFakeTimers()
+  vitest.spyOn(global, 'clearTimeout')
+
+  it('timeout should work', () => {
+    const callback = vitest.fn()
+
+    setUp({ fn: callback, delay: 20 })
+
+    expect(callback).not.toBeCalled()
+    vitest.advanceTimersByTime(70)
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  it('timeout should stop', () => {
+    const callback = vitest.fn()
+
+    setUp({ fn: callback, delay: undefined })
+    vitest.advanceTimersByTime(50)
+    expect(callback).toHaveBeenCalledTimes(0)
+
+    setUp({ fn: callback, delay: -2 })
+    vitest.advanceTimersByTime(50)
+    expect(callback).toHaveBeenCalledTimes(0)
+  })
+
+  it('timeout should be clear', () => {
+    const callback = vitest.fn()
+
+    setUp({ fn: callback, delay: 20 })
+    expect(callback).not.toBeCalled()
+    vitest.advanceTimersByTime(30)
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(clearTimeout).toHaveBeenCalledTimes(0)
+  })
+})