improvement: Add tests and documentation to useTimeoutFn

Author: microcipcip

src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue

@@ -46,9 +46,14 @@ export default Vue.extend({
   name: 'UseTimeoutFnDemo',
   setup() {
     const timerFnMsg = ref('Timer not completed')
-    const { isReady, cancelTimer, resetTimer } = useTimeoutFn(() => {
+    const timerDuration = 3000
+    const timerHandler = () => {
       timerFnMsg.value = 'Timer completed!'
-    }, 3000)
+    }
+    const { isReady, cancelTimer, resetTimer } = useTimeoutFn(
+      timerHandler,
+      timerDuration
+    )
 
     const isReadyStatus = computed(() => {
       if (isReady.value === false) return 'Pending...'

src/components/useTimeoutFn/stories/useTimeoutFn.md

@@ -1,6 +1,6 @@
 # useTimeoutFn
 
-Vue function that calls given callback function after specified amount of milliseconds.
+Vue function that calls given callback function after a specified amount of milliseconds.
 
 ## Reference
 
@@ -17,11 +17,14 @@ useTimeoutFn(
 
 ### Parameters
 
-- `value: string` lorem ipsa
+- `callback: Function` the function to call when the timer finishes
+- `ms: number` how many milliseconds to wait before running the callback function
 
 ### Returns
 
-- `value: string` lorem ipsa
+- `isReady: boolean | null` the timer status
+- `cancelTimer: Function` the function used for canceling the timer
+- `resetTimer: Function` the function used for resetting the timer
 
 ## Usage
 
@@ -45,9 +48,15 @@ useTimeoutFn(
     name: 'UseTimeoutFnDemo',
     setup() {
       const timerFnMsg = ref('Timer not completed')
-      const { isReady, cancelTimer, resetTimer } = useTimeoutFn(() => {
+      const timerDuration = 3000
+      const timerHandler = () => {
         timerFnMsg.value = 'Timer completed!'
-      }, 3000)
+      }
+
+      const { isReady, cancelTimer, resetTimer } = useTimeoutFn(
+        timerHandler,
+        timerDuration
+      )
 
       return { timerFnMsg, isReady, cancelTimer, resetTimer }
     }

src/components/useTimeoutFn/useTimeoutFn.spec.ts

@@ -1,5 +1,74 @@
+import { mount } from '../../helpers/test'
+import { ref } from '../../api'
+import { useTimeoutFn } from '../../vue-use-kit'
+
+beforeEach(() => {
+  jest.useFakeTimers()
+})
+
+afterEach(() => {
+  jest.clearAllTimers()
+})
+
+const testComponent = () => ({
+  template: `
+    <div>
+      <div id="isReady" v-if="isReady">
+        <button id="cancelTimer" @click="cancelTimer"></button>
+        <button id="resetTimer" @click="resetTimer"></button>
+        <div id="isCallbackCalled" v-if="isCallbackCalled"></div>
+      </div>
+    </div>
+  `,
+  setup() {
+    const isCallbackCalled = ref(false)
+    const { isReady, cancelTimer, resetTimer } = useTimeoutFn(() => {
+      isCallbackCalled.value = true
+    }, 1000)
+    return { isReady, cancelTimer, resetTimer, isCallbackCalled }
+  }
+})
+
 describe('useTimeoutFn', () => {
-  it('should do something', () => {
-    // Add test here
+  it('should call setTimeout when initialized', () => {
+    expect(setTimeout).toHaveBeenCalledTimes(0)
+    mount(testComponent())
+    expect(setTimeout).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call setTimeout again when resetTimer is called', async () => {
+    expect(setTimeout).toHaveBeenCalledTimes(0)
+    const wrapper = mount(testComponent())
+    expect(setTimeout).toHaveBeenCalledTimes(1)
+    jest.runAllTimers()
+
+    // Vue is inserting #resetTimer in the DOM
+    await wrapper.vm.$nextTick()
+    wrapper.find('#resetTimer').trigger('click')
+    expect(setTimeout).toHaveBeenCalledTimes(2)
+  })
+
+  it('should hide all elements when cancelTimer is called', async () => {
+    const wrapper = mount(testComponent())
+    jest.runAllTimers()
+
+    // Vue is inserting #isReady in the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isReady').exists()).toBe(true)
+    wrapper.find('#cancelTimer').trigger('click')
+    jest.runAllTimers()
+
+    // Vue is removing #isReady from the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isReady').exists()).toBe(false)
+  })
+
+  it('should display #isReady when the timers are called', async () => {
+    const wrapper = mount(testComponent())
+    jest.runAllTimers()
+
+    // Vue is inserting #isReady in the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isReady').exists()).toBe(true)
   })
 })