web-client-ui/packages/react-hooks/src/useThrottledCallback.test.ts at 1739edb5affd9c6a5c57afabcabf3c52fea7a01f · mofojed/web-client-ui · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { renderHook } from '@testing-library/react-hooks';
import useThrottledCallback from './useThrottledCallback';

const callback = jest.fn((text: string) => undefined);
const arg = 'mock.arg';
const arg2 = 'mock.arg2';
const throttleMs = 400;

beforeEach(() => {
  jest.clearAllMocks();
  jest.useFakeTimers();
});

afterEach(() => {
  jest.useRealTimers();
});

it('should throttle a given callback', () => {
  const { result } = renderHook(() =>
    useThrottledCallback(callback, throttleMs)
  );

  result.current(arg);
  result.current(arg);

  jest.advanceTimersByTime(5);

  result.current(arg);

  result.current(arg2);

  expect(callback).toHaveBeenCalledTimes(1);
  expect(callback).toHaveBeenCalledWith(arg);

  jest.clearAllMocks();

  jest.advanceTimersByTime(throttleMs);
  expect(callback).toHaveBeenCalledTimes(1);
  expect(callback).toHaveBeenCalledWith(arg2);
});

it('should cancel throttle if component unmounts', () => {
  const { result, unmount } = renderHook(() =>
    useThrottledCallback(callback, throttleMs)
  );

  result.current(arg);
  result.current(arg2);

  jest.advanceTimersByTime(throttleMs - 1);

  expect(callback).toHaveBeenCalledTimes(1);
  expect(callback).toHaveBeenCalledWith(arg);
  callback.mockClear();

  jest.spyOn(result.current, 'cancel');

  unmount();

  expect(result.current.cancel).toHaveBeenCalled();

  jest.advanceTimersByTime(5);

  expect(callback).not.toHaveBeenCalled();
});

it('should call the updated callback if the ref changes', () => {
  const { rerender, result } = renderHook(
    fn => useThrottledCallback(fn, throttleMs),
    {
      initialProps: callback,
    }
  );

  result.current(arg);
  result.current(arg2);

  // Leading is always called
  expect(callback).toHaveBeenCalledTimes(1);
  expect(callback).toHaveBeenCalledWith(arg);
  callback.mockClear();

  jest.advanceTimersByTime(throttleMs - 1);

  const newCallback = jest.fn();
  rerender(newCallback);

  jest.advanceTimersByTime(1);

  expect(callback).not.toHaveBeenCalled();
  expect(newCallback).toHaveBeenCalledTimes(1);
  expect(newCallback).toHaveBeenCalledWith(arg2);
});

it('should flush on unmount if that option is set', () => {
  const { result, unmount } = renderHook(() =>
    useThrottledCallback(callback, throttleMs, { flushOnUnmount: true })
  );

  result.current(arg);
  result.current(arg2);

  jest.advanceTimersByTime(throttleMs - 1);

  expect(callback).toHaveBeenCalledTimes(1);
  expect(callback).toHaveBeenCalledWith(arg);
  callback.mockClear();

  jest.spyOn(result.current, 'flush');

  unmount();

  expect(result.current.flush).toHaveBeenCalled();

  jest.advanceTimersByTime(1);

  expect(callback).toHaveBeenCalledTimes(1);
  expect(callback).toHaveBeenCalledWith(arg2);
});