From 599b70cd2390d08ce26ee44174b3f39c6587110c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 13 Nov 2023 12:37:50 +0100
Subject: refactor(hooks): rewrite usePagination hook

* replace `isLoadingInitialData` with `isLoading` & `isRefreshing`
* rename `fallbackData` prop to `fallback`
* replace `setSize` return with a `loadMore` callback
* add tests
---
 .../hooks/use-pagination/use-pagination.test.ts    | 96 ++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/utils/hooks/use-pagination/use-pagination.test.ts

(limited to 'src/utils/hooks/use-pagination/use-pagination.test.ts')

diff --git a/src/utils/hooks/use-pagination/use-pagination.test.ts b/src/utils/hooks/use-pagination/use-pagination.test.ts
new file mode 100644
index 0000000..20cb37e
--- /dev/null
+++ b/src/utils/hooks/use-pagination/use-pagination.test.ts
@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, jest } from '@jest/globals';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { getConnection } from '../../../../tests/utils/graphql';
+import type { EdgesResponse, GraphQLEdgesInput, Search } from '../../../types';
+import { usePagination } from './use-pagination';
+
+type Data = {
+  id: number;
+  title: string;
+};
+
+describe('usePagination', () => {
+  const data: Data[] = [
+    { id: 1, title: 'illo sequi nihil' },
+    { id: 2, title: 'atque et magni' },
+    { id: 3, title: 'cupiditate ut sit' },
+    { id: 4, title: 'aut rerum quisquam' },
+    { id: 5, title: 'et ea officia' },
+    { id: 6, title: 'ratione eos numquam' },
+    { id: 7, title: 'repellat quos et' },
+  ];
+  const fetcher = jest.fn(
+    async ({
+      after,
+      first,
+      search,
+    }: GraphQLEdgesInput & Search): Promise<EdgesResponse<Data>> => {
+      const filteredData = search
+        ? data.filter((d) => d.title.includes(search))
+        : data;
+
+      return Promise.resolve(
+        getConnection({ after, first, data: filteredData })
+      );
+    }
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('can use a fetcher to retrieve data from a GraphQL API', async () => {
+    /* We should use this statement because of async nature but with waitFor
+     * the number of assertion in inaccurate... */
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    //expect.assertions(6);
+
+    expect(fetcher).not.toHaveBeenCalled();
+
+    const perPage = 10;
+    const { result } = renderHook(() =>
+      usePagination({
+        fetcher,
+        perPage,
+      })
+    );
+
+    await waitFor(() => {
+      // `data.length` is lower than `perPage` so 1 page.
+      expect(result.current.data?.length).toBe(1);
+    });
+    expect(result.current.data?.[0].edges.length).toBe(data.length);
+    expect(result.current.hasNextPage).toBe(false);
+    expect(fetcher).toHaveBeenCalledTimes(1);
+    expect(fetcher).toHaveBeenCalledWith({ first: perPage });
+  });
+
+  it('can retrieve more data from the GraphQL API', async () => {
+    /* We should use this statement because of async nature but with waitFor
+     * the number of assertion in inaccurate... */
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    //expect.assertions(7);
+
+    const perPage = 5;
+    const { result } = renderHook(() =>
+      usePagination({
+        fetcher,
+        perPage,
+      })
+    );
+
+    await waitFor(() => {
+      expect(result.current.data?.length).toBe(1);
+    });
+    expect(result.current.data?.[0].edges.length).toBe(perPage);
+    expect(result.current.hasNextPage).toBe(true);
+    expect(fetcher).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await result.current.loadMore();
+    });
+
+    expect(result.current.data?.length).toBe(2);
+    expect(result.current.data?.[1].edges.length).toBe(data.length - perPage);
+  });
+});
-- 
cgit v1.2.3