chore: added timeout tests

Author: jsbroks

README.md

@@ -26,6 +26,7 @@
 - **Well-documented** and typed interfaces.
 - **Zero-config** server-side rendering capability.
 - **Self-contained** with no dependencies.
+- **Backed by a team** using VueHooks in production.
 - **Additional addons** such as vue-router, timeago, etc.
 
 <br />

packages/core/src/__test__/useCounter.spec.ts

@@ -1,4 +1,3 @@
-import { renderHook } from '../../../testing/src'
 import { useCounter } from '../useCounter'
 
 describe('useCounter', () => {
@@ -12,76 +11,60 @@ describe('useCounter', () => {
   })
 
   it('increments', () => {
-    renderHook(() => {
-      const { count, inc } = useCounter()
-      expect(count.value).toEqual(0)
-      inc(10)
-      expect(count.value).toEqual(10)
-    })
+    const { count, inc } = useCounter()
+    expect(count.value).toEqual(0)
+    inc(10)
+    expect(count.value).toEqual(10)
   })
 
   it('increments defaults 1', () => {
-    renderHook(() => {
-      const { count, inc } = useCounter()
-      expect(count.value).toEqual(0)
-      inc()
-      expect(count.value).toEqual(1)
-    })
+    const { count, inc } = useCounter()
+    expect(count.value).toEqual(0)
+    inc()
+    expect(count.value).toEqual(1)
   })
 
   it('decrements', () => {
-    renderHook(() => {
-      const { count, dec } = useCounter(10)
-      expect(count.value).toEqual(10)
-      dec(10)
-      expect(count.value).toEqual(0)
-    })
+    const { count, dec } = useCounter(10)
+    expect(count.value).toEqual(10)
+    dec(10)
+    expect(count.value).toEqual(0)
   })
 
   it('increments defaults -1', () => {
-    renderHook(() => {
-      const { count, dec } = useCounter()
-      expect(count.value).toEqual(0)
-      dec()
-      expect(count.value).toEqual(-1)
-    })
+    const { count, dec } = useCounter()
+    expect(count.value).toEqual(0)
+    dec()
+    expect(count.value).toEqual(-1)
   })
 
   it('resets', () => {
-    renderHook(() => {
-      const { count, inc, reset } = useCounter(10)
-      expect(count.value).toEqual(10)
-      inc(10)
-      reset()
-      expect(count.value).toEqual(10)
-    })
+    const { count, inc, reset } = useCounter(10)
+    expect(count.value).toEqual(10)
+    inc(10)
+    reset()
+    expect(count.value).toEqual(10)
   })
 
   it('resets and with new initial value', () => {
-    renderHook(() => {
-      const { count, inc, reset } = useCounter(10)
-      expect(count.value).toEqual(10)
-      inc(10)
-      reset(5)
-      expect(count.value).toEqual(5)
-      inc(10)
-      reset()
-      expect(count.value).toEqual(5)
-    })
+    const { count, inc, reset } = useCounter(10)
+    expect(count.value).toEqual(10)
+    inc(10)
+    reset(5)
+    expect(count.value).toEqual(5)
+    inc(10)
+    reset()
+    expect(count.value).toEqual(5)
   })
 
   it('sets value', () => {
-    renderHook(() => {
-      const { count, set } = useCounter(5)
-      set(2)
-      expect(count.value).toEqual(2)
-    })
+    const { count, set } = useCounter(5)
+    set(2)
+    expect(count.value).toEqual(2)
   })
 
   it('returns count on get', () => {
-    renderHook(() => {
-      const { count, get } = useCounter(5, 0, 20)
-      expect(count.value).toEqual(get())
-    })
+    const { count, get } = useCounter(5, 0, 20)
+    expect(count.value).toEqual(get())
   })
 })

packages/core/src/__test__/useTimeout.spec.ts

@@ -0,0 +1,53 @@
+import { useTimeout } from '../useTimeout'
+
+describe('useTimeout', () => {
+  beforeAll(() => jest.useFakeTimers())
+
+  it('does not start without start()', () => {
+    const { ready } = useTimeout(10)
+    expect(ready.value).toBeFalsy()
+  })
+
+  it('sets value after period', () => {
+    const { ready, start } = useTimeout(10)
+    start()
+    expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 10)
+    jest.advanceTimersByTime(1)
+    expect(ready.value).toBeFalsy()
+    jest.runOnlyPendingTimers()
+    expect(ready.value).toBeTruthy()
+  })
+
+  it('can stop a timeout', () => {
+    const { ready, stop, start } = useTimeout(10)
+    start()
+
+    jest.advanceTimersByTime(1)
+
+    expect(ready.value).toBeFalsy()
+    stop()
+
+    jest.runOnlyPendingTimers()
+    expect(ready.value).toBeFalsy()
+  })
+
+  it('can start when created', () => {
+    const { ready } = useTimeout(10, true)
+    jest.runOnlyPendingTimers()
+    expect(ready.value).toBeTruthy()
+  })
+
+  it('clears timer on complete', () => {
+    const { ready } = useTimeout(10, true)
+    jest.runOnlyPendingTimers()
+    expect(ready.value).toBeTruthy()
+    expect(clearTimeout).toBeCalled()
+  })
+
+  it('clears timer on stop', () => {
+    const { stop } = useTimeout(10, true)
+    jest.advanceTimersByTime(5)
+    stop()
+    expect(clearTimeout).toBeCalled()
+  })
+})

packages/core/src/__test__/useTimeoutFn.spec.ts

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import { useTimeoutFn } from '../useTimeoutFn'
+import { renderHook } from '../../../testing/src'
+
+describe('useTimeoutFn', () => {
+  const fn = jest.fn()
+
+  beforeAll(() => jest.useFakeTimers())
+  beforeEach(() => fn.mockReset())
+
+  it('calls function', async () => {
+    renderHook(() => {
+      const { start } = useTimeoutFn(fn, 10)
+      start()
+    })
+    jest.runOnlyPendingTimers()
+    await Vue.nextTick()
+    expect(fn).toHaveBeenCalled()
+  })
+})

packages/core/src/__test__/useToggle.spec.ts

@@ -0,0 +1,39 @@
+import { useToggle } from '../useToggle'
+
+describe('useToggle', () => {
+  it('has correct functions returned', () => {
+    const { on, toggle, set } = useToggle()
+    expect(on.value).toBeFalsy()
+    expect(toggle).toBeDefined()
+    expect(set).toBeDefined()
+  })
+
+  it('sets initial value', () => {
+    const { on } = useToggle(true)
+    expect(on.value).toBeTruthy()
+  })
+
+  it('toggles value', () => {
+    const { on, toggle } = useToggle()
+    toggle()
+    expect(on.value).toBeTruthy()
+    toggle()
+    expect(on.value).toBeFalsy()
+  })
+
+  it('sets value with', () => {
+    const { on, toggle } = useToggle()
+    toggle(false)
+    expect(on.value).toBeFalsy()
+    toggle(true)
+    expect(on.value).toBeTruthy()
+  })
+
+  it('sets value', () => {
+    const { on, set } = useToggle()
+    set(false)
+    expect(on.value).toBeFalsy()
+    set(true)
+    expect(on.value).toBeTruthy()
+  })
+})

packages/core/src/useTimeout.ts

@@ -1,6 +1,6 @@
-import { ref, getCurrentInstance } from '@vue/composition-api'
+import { ref } from '@vue/composition-api'
 
-export function useTimeout(ms: number, now: boolean = false) {
+export function useTimeout(ms: number, immediate: boolean = false) {
   let ready = ref(false)
   let timer: any = null
 
@@ -19,14 +19,15 @@ export function useTimeout(ms: number, now: boolean = false) {
   // Called to stop timer
   const stop = () => {
     ready.value = false
-    if (timer) {
-      clearTimeout(timer)
-      timer = null
-    }
+    clearTimeout(timer)
+    timer = null
   }
 
-  if (now) start()
-  if (getCurrentInstance()) stop()
+  if (immediate) start()
 
-  return { start, stop, ready }
+  return {
+    start,
+    stop,
+    ready
+  }
 }

packages/core/src/useTimeoutFn.ts

@@ -1,12 +1,8 @@
 import { watch } from '@vue/composition-api'
 import { useTimeout } from './useTimeout'
 
-export function useTimeoutFn(
-  fn: (...args: any[]) => any,
-  ms: number,
-  ...args: any[]
-) {
+export function useTimeoutFn(fn: (...args: any[]) => any, ms: number) {
   const { ready, start, stop } = useTimeout(ms)
-  watch(ready, ready => ready && fn(...args))
+  watch(ready, ready => ready && fn())
   return { ready, start, stop }
 }

packages/core/src/useToggle.ts

@@ -2,7 +2,7 @@ import { ref } from '@vue/composition-api'
 
 const isNull = (v: any) => v == null
 
-export default function useToggle(value: boolean = false) {
+export function useToggle(value: boolean = false) {
   const on = ref(value)
   const set = (v: boolean) => (on.value = v)
   const toggle = (v?: boolean) => set(isNull(v) ? !on.value : v!)

tsconfig.json

@@ -34,6 +34,6 @@
       "@vuehooks/jest": ["./packages/testing/src/index.ts"]
     }
   },
-  "include": ["packages"],
+  "include": ["packages", "setupTest.ts"],
   "exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.stories.ts"]
 }