319 lines
10 KiB
TypeScript
319 lines
10 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {renderHook} from '@testing-library/react-native';
|
|
|
|
import useThrottled from '@hooks/throttled';
|
|
import {advanceTimers, enableFakeTimers} from '@test/timer_helpers';
|
|
|
|
describe('useThrottled', () => {
|
|
beforeEach(() => {
|
|
enableFakeTimers();
|
|
jest.clearAllMocks();
|
|
jest.clearAllTimers();
|
|
});
|
|
|
|
afterEach(() => {
|
|
jest.runOnlyPendingTimers();
|
|
jest.useRealTimers();
|
|
});
|
|
|
|
it('should return a throttled function', () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 1000));
|
|
|
|
expect(typeof result.current).toBe('function');
|
|
});
|
|
|
|
it('should call callback immediately on first invocation', () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 1000));
|
|
|
|
result.current('arg1', 'arg2');
|
|
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
expect(callback).toHaveBeenCalledWith('arg1', 'arg2');
|
|
});
|
|
|
|
it('should throttle subsequent calls within the time window', () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 1000));
|
|
|
|
// First call - should execute immediately
|
|
result.current('call1');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
expect(callback).toHaveBeenCalledWith('call1');
|
|
|
|
// Second call - should be throttled
|
|
result.current('call2');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Third call - still throttled
|
|
result.current('call3');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should execute throttled call after time window expires', async () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 1000));
|
|
|
|
// First call
|
|
result.current('call1');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Second call within window
|
|
result.current('call2');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Advance time past the throttle window
|
|
await advanceTimers(1000);
|
|
|
|
// Third call after window - should execute with most recent args
|
|
expect(callback).toHaveBeenCalledTimes(2);
|
|
expect(callback).toHaveBeenCalledWith('call2');
|
|
});
|
|
|
|
it('should handle multiple arguments', () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 500));
|
|
|
|
result.current('arg1', 'arg2', 'arg3', {key: 'value'});
|
|
|
|
expect(callback).toHaveBeenCalledWith('arg1', 'arg2', 'arg3', {key: 'value'});
|
|
});
|
|
|
|
it('should handle no arguments', () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 500));
|
|
|
|
result.current();
|
|
|
|
expect(callback).toHaveBeenCalledWith();
|
|
});
|
|
|
|
it('should use the latest callback reference', async () => {
|
|
const callback1 = jest.fn();
|
|
const callback2 = jest.fn();
|
|
|
|
const {result, rerender} = renderHook(
|
|
({cb, time}) => useThrottled(cb, time),
|
|
{initialProps: {cb: callback1, time: 1000}},
|
|
);
|
|
|
|
// First call with callback1
|
|
result.current('test1');
|
|
expect(callback1).toHaveBeenCalledWith('test1');
|
|
expect(callback2).not.toHaveBeenCalled();
|
|
|
|
// Update to callback2
|
|
rerender({cb: callback2, time: 1000});
|
|
|
|
// Advance time to allow next call
|
|
await advanceTimers(1000);
|
|
|
|
// Call with updated callback
|
|
result.current('test2');
|
|
expect(callback2).toHaveBeenCalledWith('test2');
|
|
});
|
|
|
|
it('should return the same throttled function when time does not change', () => {
|
|
const callback1 = jest.fn();
|
|
const callback2 = jest.fn();
|
|
|
|
const {result, rerender} = renderHook(
|
|
({cb, time}) => useThrottled(cb, time),
|
|
{initialProps: {cb: callback1, time: 1000}},
|
|
);
|
|
|
|
const throttledFn1 = result.current;
|
|
|
|
// Change callback but keep time the same
|
|
rerender({cb: callback2, time: 1000});
|
|
|
|
const throttledFn2 = result.current;
|
|
|
|
// Should be the same function reference (memoized)
|
|
expect(throttledFn1).toBe(throttledFn2);
|
|
});
|
|
|
|
it('should return a new throttled function when time changes', () => {
|
|
const callback = jest.fn();
|
|
|
|
const {result, rerender} = renderHook(
|
|
({cb, time}) => useThrottled(cb, time),
|
|
{initialProps: {cb: callback, time: 1000}},
|
|
);
|
|
|
|
const throttledFn1 = result.current;
|
|
|
|
// Change the time value
|
|
rerender({cb: callback, time: 2000});
|
|
|
|
const throttledFn2 = result.current;
|
|
|
|
// Should be a different function reference
|
|
expect(throttledFn1).not.toBe(throttledFn2);
|
|
});
|
|
|
|
it('should respect the new time value after update', async () => {
|
|
const callback = jest.fn();
|
|
|
|
const {result, rerender} = renderHook(
|
|
({time}) => useThrottled(callback, time),
|
|
{initialProps: {time: 1000}},
|
|
);
|
|
|
|
// First call
|
|
result.current('call1');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Second call - should be throttled
|
|
result.current('call2');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Change throttle time to 2000ms - this creates a new throttled function
|
|
rerender({time: 2000});
|
|
|
|
// Advance by 1000ms to clear the old throttled function's timer
|
|
await advanceTimers(1000);
|
|
|
|
// The trailing call from the old throttled function executes
|
|
expect(callback).toHaveBeenCalledTimes(2);
|
|
expect(callback).toHaveBeenLastCalledWith('call2');
|
|
|
|
// Now use the new throttled function with 2000ms throttle
|
|
result.current('call3');
|
|
expect(callback).toHaveBeenCalledTimes(3);
|
|
|
|
// Call again - should be throttled with new 2000ms time
|
|
result.current('call4');
|
|
expect(callback).toHaveBeenCalledTimes(3);
|
|
|
|
// Advance by 2000ms
|
|
await advanceTimers(2000);
|
|
|
|
// Should execute the trailing call
|
|
expect(callback).toHaveBeenCalledTimes(4);
|
|
expect(callback).toHaveBeenLastCalledWith('call4');
|
|
});
|
|
|
|
it('should handle rapid successive calls', async () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 1000));
|
|
|
|
// Make 10 rapid calls
|
|
for (let i = 0; i < 10; i++) {
|
|
result.current(`call${i}`);
|
|
}
|
|
|
|
// Only the first call should execute
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
expect(callback).toHaveBeenCalledWith('call0');
|
|
|
|
// Advance time
|
|
await advanceTimers(1000);
|
|
|
|
// The last call should execute (trailing edge)
|
|
expect(callback).toHaveBeenCalledTimes(2);
|
|
expect(callback).toHaveBeenCalledWith('call9');
|
|
});
|
|
|
|
it('should handle zero throttle time', () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 0));
|
|
|
|
result.current('call1');
|
|
result.current('call2');
|
|
result.current('call3');
|
|
|
|
// With 0ms throttle, all calls should execute
|
|
expect(callback).toHaveBeenCalledTimes(3);
|
|
});
|
|
|
|
it('should handle very short throttle time', async () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 10));
|
|
|
|
result.current('call1');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
result.current('call2');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
await advanceTimers(10);
|
|
|
|
expect(callback).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it('should handle very long throttle time', async () => {
|
|
const callback = jest.fn();
|
|
const {result} = renderHook(() => useThrottled(callback, 60000)); // 1 minute
|
|
|
|
result.current('call1');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
result.current('call2');
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Advance by 59 seconds - should still be throttled
|
|
await advanceTimers(59000);
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Advance by 1 more second
|
|
await advanceTimers(1000);
|
|
expect(callback).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it('should handle callback that returns a value', () => {
|
|
const callback = jest.fn((x: number, y: number) => x + y);
|
|
const {result} = renderHook(() => useThrottled(callback, 1000));
|
|
|
|
const returnValue = result.current(5, 3);
|
|
|
|
expect(returnValue).toBe(8);
|
|
expect(callback).toHaveBeenCalledWith(5, 3);
|
|
});
|
|
|
|
it('should handle callback that throws an error', () => {
|
|
const error = new Error('Test error');
|
|
const callback = jest.fn(() => {
|
|
throw error;
|
|
});
|
|
const {result} = renderHook(() => useThrottled(callback, 1000));
|
|
|
|
expect(() => result.current()).toThrow(error);
|
|
});
|
|
|
|
it('should handle callback being called through the ref', async () => {
|
|
let callCount = 0;
|
|
const callback = jest.fn(() => {
|
|
callCount++;
|
|
return callCount;
|
|
});
|
|
|
|
const {result, rerender} = renderHook(
|
|
({cb}) => useThrottled(cb, 1000),
|
|
{initialProps: {cb: callback}},
|
|
);
|
|
|
|
// First call
|
|
const result1 = result.current();
|
|
expect(result1).toBe(1);
|
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
|
|
// Update callback
|
|
const callback2 = jest.fn(() => {
|
|
callCount++;
|
|
return callCount;
|
|
});
|
|
rerender({cb: callback2});
|
|
|
|
// Advance time to allow next call
|
|
await advanceTimers(1000);
|
|
|
|
// Call with updated callback - should use callback2 through the ref
|
|
result.current();
|
|
expect(callback2).toHaveBeenCalledTimes(1);
|
|
expect(callback).toHaveBeenCalledTimes(1); // Original callback not called again
|
|
});
|
|
});
|