Creditra-Frontend/src/hooks/usePullToRefresh.test.ts at main · Creditra/Creditra-Frontend · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import { renderHook, act } from '@testing-library/react';
import { usePullToRefresh } from './usePullToRefresh';
import { describe, it, expect, vi } from 'vitest';

describe('usePullToRefresh', () => {
  it('should initialize with default values', () => {
    const onRefresh = vi.fn().mockResolvedValue(undefined);
    const { result } = renderHook(() => usePullToRefresh({ onRefresh }));

    expect(result.current.pullDistance).toBe(0);
    expect(result.current.isRefreshing).toBe(false);
    expect(typeof result.current.handlers.onTouchStart).toBe('function');
    expect(typeof result.current.handlers.onTouchMove).toBe('function');
    expect(typeof result.current.handlers.onTouchEnd).toBe('function');
  });

  it('should not allow pulling if disabled is true', () => {
    const onRefresh = vi.fn().mockResolvedValue(undefined);
    const { result } = renderHook(() =>
      usePullToRefresh({ onRefresh, disabled: true })
    );

    const mockEventStart = {
      touches: [{ clientY: 100 }],
      currentTarget: { scrollTop: 0 }
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchStart(mockEventStart);
    });

    const mockEventMove = {
      touches: [{ clientY: 200 }],
      cancelable: true,
      preventDefault: vi.fn(),
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchMove(mockEventMove);
    });

    expect(result.current.pullDistance).toBe(0);
  });

  it('should calculate pull distance correctly', () => {
    const onRefresh = vi.fn().mockResolvedValue(undefined);
    const { result } = renderHook(() => usePullToRefresh({ onRefresh }));

    const mockEventStart = {
      touches: [{ clientY: 100 }],
      currentTarget: { scrollTop: 0 }
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchStart(mockEventStart);
    });

    const preventDefault = vi.fn();
    const mockEventMove = {
      touches: [{ clientY: 200 }], // 100px pull
      cancelable: true,
      preventDefault,
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchMove(mockEventMove);
    });

    // Distance is diff * 0.5 = 100 * 0.5 = 50
    expect(result.current.pullDistance).toBe(50);
    expect(preventDefault).toHaveBeenCalled();
  });

  it('should trigger refresh if pulled past threshold', async () => {
    const onRefresh = vi.fn().mockResolvedValue(undefined);
    const { result } = renderHook(() =>
      usePullToRefresh({ onRefresh, pullThreshold: 50 })
    );

    const mockEventStart = {
      touches: [{ clientY: 100 }],
      currentTarget: { scrollTop: 0 }
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchStart(mockEventStart);
    });

    const mockEventMove = {
      touches: [{ clientY: 300 }], // 200px pull -> 100 resistance
      cancelable: true,
      preventDefault: vi.fn(),
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchMove(mockEventMove);
    });

    expect(result.current.pullDistance).toBe(100);

    await act(async () => {
      await result.current.handlers.onTouchEnd();
    });

    expect(onRefresh).toHaveBeenCalledTimes(1);
    expect(result.current.isRefreshing).toBe(false);
    expect(result.current.pullDistance).toBe(0);
  });

  it('should not trigger refresh if not pulled past threshold', async () => {
    const onRefresh = vi.fn().mockResolvedValue(undefined);
    const { result } = renderHook(() =>
      usePullToRefresh({ onRefresh, pullThreshold: 80 })
    );

    const mockEventStart = {
      touches: [{ clientY: 100 }],
      currentTarget: { scrollTop: 0 }
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchStart(mockEventStart);
    });

    const mockEventMove = {
      touches: [{ clientY: 150 }], // 50px pull -> 25 resistance
      cancelable: true,
      preventDefault: vi.fn(),
    } as unknown as React.TouchEvent;

    act(() => {
      result.current.handlers.onTouchMove(mockEventMove);
    });

    expect(result.current.pullDistance).toBe(25);

    await act(async () => {
      await result.current.handlers.onTouchEnd();
    });

    expect(onRefresh).not.toHaveBeenCalled();
    expect(result.current.isRefreshing).toBe(false);
    expect(result.current.pullDistance).toBe(0);
  });
});