test: added test cases for useFetchMore hook

Author: yaswanth-deriv

package.json

@@ -53,6 +53,7 @@
         "@tanstack/react-table": "^8.15.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.2",
+        "@testing-library/react-hooks": "^7.0.2",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/node": "^20.11.30",

src/hooks/__test__/useFetchMore.spec.tsx

@@ -0,0 +1,40 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useFetchMore } from '../index';
+
+describe('useFetchMore', () => {
+    it('should call loadMore when scrolled to the bottom of the container', () => {
+        const loadMoreMock = jest.fn();
+        const containerRef = { clientHeight: 500, scrollHeight: 1000, scrollTop: 300 } ;
+        const { result } = renderHook(() =>
+            useFetchMore({ isFetching: false, loadMore: loadMoreMock, ref: containerRef })
+        );
+        const containerRefMock = { current: { clientHeight: 500, scrollHeight: 1000, scrollTop: 800 } };
+        result.current.fetchMoreOnBottomReached(containerRefMock.current);
+
+        expect(loadMoreMock).toHaveBeenCalled();
+    });
+
+    it('should not call loadMore when isFetching is true', () => {
+        const loadMoreMock = jest.fn();
+        const containerRef = { current: { clientHeight: 500, scrollHeight: 1000, scrollTop: 300 } };
+        const { result } = renderHook(() =>
+            useFetchMore({ isFetching: true, loadMore: loadMoreMock, ref: containerRef })
+        );
+        const containerRefMock = { current: { clientHeight: 500, scrollHeight: 1000, scrollTop: 800 } };
+        result.current.fetchMoreOnBottomReached(containerRefMock.current);
+
+        expect(loadMoreMock).not.toHaveBeenCalled();
+    });
+
+    it('should not call loadMore if scrolled to the bottom but already fetching', () => {
+        const loadMoreMock = jest.fn();
+        const containerRef = { current: { clientHeight: 500, scrollHeight: 1000, scrollTop: 300 } };
+        const { result } = renderHook(() =>
+            useFetchMore({ isFetching: true, loadMore: loadMoreMock, ref: containerRef })
+        );
+        const containerRefMock = { current: { clientHeight: 500, scrollHeight: 1000, scrollTop: 800 } };
+        result.current.fetchMoreOnBottomReached(containerRefMock.current);
+
+        expect(loadMoreMock).not.toHaveBeenCalled();
+    });
+});

src/hooks/index.ts

@@ -1 +1,2 @@
 export {useDevice} from './useDevice'
+export {useFetchMore} from "./useFetchMore"