tracker/frontend/src/utilities/__tests__/useDebouncedFunction.test.js at master · bankystack/tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { useCallback, useState } from 'react'
import { act, fireEvent, render } from '@testing-library/react'

import { useDebouncedFunction } from '../useDebouncedFunction'

const UseDebouncedFunctionExample = () => {
  const [count, setCount] = useState(0)
  const [debouncedCount, setDebouncedCount] = useState(0)

  const memoizedSetDebouncedCountCallback = useCallback(
    () =>
      act(() => {
        if (count > 0) setDebouncedCount((c) => c + 1)
      }),
    [count],
  )

  useDebouncedFunction(memoizedSetDebouncedCountCallback, 500)

  return (
    <div>
      <label htmlFor="count">Count</label>
      <input type="text" id="count" value={count} readOnly />

      <label htmlFor="debouncedCount">Debounced count</label>
      <input type="text" id="debouncedCount" value={debouncedCount} readOnly />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

describe('userDebouncedFunction', () => {
  beforeEach(() => {
    jest.useFakeTimers()
  })
  describe('is given a valid function', () => {
    it('successfully debounces the function', async () => {
      const { getByText, getByLabelText } = render(
        <UseDebouncedFunctionExample />,
      )

      const count = getByLabelText(/^Count$/i)
      const debouncedCount = getByLabelText(/^Debounced count$/i)
      const incrementButton = getByText(/Increment/i)

      // default values
      expect(count).toHaveValue('0')
      expect(debouncedCount).toHaveValue('0')

      // ensure no increments on first render
      jest.advanceTimersByTime(1000)
      expect(debouncedCount).toHaveValue('0')

      fireEvent.click(incrementButton)

      // immediate increment
      expect(count).toHaveValue('1')
      expect(debouncedCount).toHaveValue('0')

      jest.advanceTimersByTime(250)

      // part-way timeout
      expect(count).toHaveValue('1')
      expect(debouncedCount).toHaveValue('0')

      jest.advanceTimersByTime(250)

      // full timeout
      expect(count).toHaveValue('1')
      expect(debouncedCount).toHaveValue('1')

      // fire multiple events, should only count as 1 for debounced value
      fireEvent.click(incrementButton)
      fireEvent.click(incrementButton)
      fireEvent.click(incrementButton)
      fireEvent.click(incrementButton)
      fireEvent.click(incrementButton)

      // immediate increment
      expect(count).toHaveValue('6')
      expect(debouncedCount).toHaveValue('1')

      jest.advanceTimersByTime(250)

      // part-way timeout
      expect(count).toHaveValue('6')
      expect(debouncedCount).toHaveValue('1')

      jest.advanceTimersByTime(250)

      // full timeout
      expect(count).toHaveValue('6')
      expect(debouncedCount).toHaveValue('2')

      // ensure no more increments
      jest.advanceTimersByTime(1000)
      expect(debouncedCount).toHaveValue('2')
    })
  })
})