more tests

.vscode/launch.json

+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Jest: watch current file",
+            "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+            "args": [
+                "${fileBasename}",
+                "--runInBand",
+                "--verbose",
+                "-i",
+                "--no-cache",
+                "--watchAll",
+                "--testTimeout=1000000000",
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen"
+        }
+    ]
+}
\ No newline at end of file

jest/mocks/next-router.ts

@@ -2,7 +2,7 @@ import type { NextRouter } from 'next/router';
 
 export const router = {
   query: {},
-  push: jest.fn(),
+  push: jest.fn(() => Promise.resolve()),
 };
 
 export const useRouter = jest.fn<unknown, Array<Partial<NextRouter>>>(() => (router));

ui/shared/pagination/useQueryWithPages.test.tsx

+import { animateScroll } from 'react-scroll';
+
 import fetch from 'jest-fetch-mock';
 import { renderHook, wrapper, act } from 'jest/lib';
 import { useRouter, router } from 'jest/mocks/next-router';
@@ -5,25 +7,53 @@ import flushPromises from 'jest/utils/flushPromises';
 import * as addressMock from 'mocks/address/address';
 
 jest.mock('next/router', () => ({ useRouter }));
+jest.mock('react-scroll', () => ({ animateScroll: { scrollToTop: jest.fn() } }));
 
-import type { Params } from './useQueryWithPages';
+import type { Params, QueryWithPagesResult } from './useQueryWithPages';
 import useQueryWithPages from './useQueryWithPages';
 
+const responses = {
+  page_empty: {
+    items: [],
+    next_page_params: null,
+  },
+  page_1: {
+    items: [ { hash: '11' }, { hash: '12' } ],
+    next_page_params: {
+      block_number: 11,
+      index: 12,
+      items_count: 13,
+    },
+  },
+  page_2: {
+    items: [ { hash: '21' }, { hash: '22' } ],
+    next_page_params: {
+      block_number: 21,
+      index: 22,
+      items_count: 23,
+    },
+  },
+  page_3: {
+    items: [ { hash: '31' }, { hash: '32' } ],
+    next_page_params: null,
+  },
+};
+
+beforeEach(() => {
+  fetch.resetMocks();
+});
+
 it('returns correct data if there is only one page', async() => {
   const params: Params<'address_txs'> = {
     resourceName: 'address_txs',
     pathParams: { hash: addressMock.hash },
   };
-  const response = {
-    items: [],
-    next_page_params: null,
-  };
-  fetch.mockResponse(JSON.stringify(response));
+  fetch.mockResponse(JSON.stringify(responses.page_empty));
 
   const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
   await waitForApiResponse();
 
-  expect(result.current.data).toEqual(response);
+  expect(result.current.data).toEqual(responses.page_empty);
   expect(result.current.pagination).toMatchObject({
     page: 1,
     canGoBackwards: true,
@@ -34,25 +64,233 @@ it('returns correct data if there is only one page', async() => {
 });
 
 describe('if there are multiple pages', () => {
-  it('return correct data for the first page', async() => {
   const params: Params<'address_txs'> = {
     resourceName: 'address_txs',
     pathParams: { hash: addressMock.hash },
   };
-    const response = {
-      items: [ { hash: '11' }, { hash: '12' } ],
-      next_page_params: {
-        block_number: 11,
-        index: 12,
-        items_count: 13,
-      },
+
+  it('return correct data for the first page', async() => {
+    fetch.mockResponse(JSON.stringify(responses.page_1));
+
+    const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
+    await waitForApiResponse();
+
+    expect(result.current.data).toEqual(responses.page_1);
+    expect(result.current.pagination).toMatchObject({
+      page: 1,
+      canGoBackwards: true,
+      hasNextPage: true,
+      isLoading: false,
+      isVisible: true,
+    });
+  });
+
+  describe('correctly navigates forward and backward', () => {
+    const routerPush = jest.fn(() => Promise.resolve());
+    let result: {
+      current: QueryWithPagesResult<'address_txs'>;
     };
-    fetch.mockResponse(JSON.stringify(response));
+
+    beforeEach(async() => {
+      routerPush.mockClear();
+      useRouter.mockReturnValue({ ...router, pathname: '/current-route', push: routerPush });
+
+      fetch.once(JSON.stringify(responses.page_1));
+      fetch.once(JSON.stringify(responses.page_2));
+      fetch.once(JSON.stringify(responses.page_3));
+      fetch.once(JSON.stringify(responses.page_1));
+
+      // INITIAL LOAD
+      const { result: r } = renderHook(() => useQueryWithPages(params), { wrapper });
+      result = r;
+      await waitForApiResponse();
+    });
+
+    it('from page 1 to page 2', async() => {
+      await act(() => {
+        result.current.pagination.onNextPageClick();
+      });
+      await waitForApiResponse();
+
+      expect(result.current.data).toEqual(responses.page_2);
+      expect(result.current.pagination).toMatchObject({
+        page: 2,
+        canGoBackwards: true,
+        hasNextPage: true,
+        isLoading: false,
+        isVisible: true,
+      });
+
+      expect(routerPush).toHaveBeenCalledTimes(1);
+      expect(routerPush).toHaveBeenLastCalledWith(
+        {
+          pathname: '/current-route',
+          query: {
+            next_page_params: encodeURIComponent(JSON.stringify(responses.page_1.next_page_params)),
+            page: '2',
+          },
+        },
+        undefined,
+        { shallow: true },
+      );
+
+      expect(animateScroll.scrollToTop).toHaveBeenCalledTimes(1);
+      expect(animateScroll.scrollToTop).toHaveBeenLastCalledWith({ duration: 0 });
+    });
+
+    it('from page 2 to page 3', async() => {
+      await act(async() => {
+        result.current.pagination.onNextPageClick();
+      });
+      await waitForApiResponse();
+
+      await act(async() => {
+        result.current.pagination.onNextPageClick();
+      });
+      await waitForApiResponse();
+
+      expect(result.current.data).toEqual(responses.page_3);
+      expect(result.current.pagination).toMatchObject({
+        page: 3,
+        canGoBackwards: true,
+        hasNextPage: false,
+        isLoading: false,
+        isVisible: true,
+      });
+
+      expect(routerPush).toHaveBeenCalledTimes(2);
+      expect(routerPush).toHaveBeenLastCalledWith(
+        {
+          pathname: '/current-route',
+          query: {
+            next_page_params: encodeURIComponent(JSON.stringify(responses.page_2.next_page_params)),
+            page: '3',
+          },
+        },
+        undefined,
+        { shallow: true },
+      );
+
+      expect(animateScroll.scrollToTop).toHaveBeenCalledTimes(2);
+      expect(animateScroll.scrollToTop).toHaveBeenLastCalledWith({ duration: 0 });
+    });
+
+    it('from page 3 to page 2', async() => {
+
+      await act(() => {
+        result.current.pagination.onNextPageClick();
+      });
+      await waitForApiResponse();
+
+      await act(() => {
+        result.current.pagination.onNextPageClick();
+      });
+      await waitForApiResponse();
+
+      await act(() => {
+        result.current.pagination.onPrevPageClick();
+      });
+      await waitForApiResponse();
+
+      expect(result.current.data).toEqual(responses.page_2);
+      expect(result.current.pagination).toMatchObject({
+        page: 2,
+        canGoBackwards: true,
+        hasNextPage: true,
+        isLoading: false,
+        isVisible: true,
+      });
+
+      expect(routerPush).toHaveBeenCalledTimes(3);
+      expect(routerPush).toHaveBeenLastCalledWith(
+        {
+          pathname: '/current-route',
+          query: {
+            next_page_params: encodeURIComponent(JSON.stringify(responses.page_1.next_page_params)),
+            page: '2',
+          },
+        },
+        undefined,
+        { shallow: true },
+      );
+
+      expect(animateScroll.scrollToTop).toHaveBeenCalledTimes(3);
+      expect(animateScroll.scrollToTop).toHaveBeenLastCalledWith({ duration: 0 });
+    });
+
+    it('from page 2 to page 1', async() => {
+      await act(() => {
+        result.current.pagination.onNextPageClick();
+      });
+      await waitForApiResponse();
+
+      await act(() => {
+        result.current.pagination.onNextPageClick();
+      });
+      await waitForApiResponse();
+
+      await act(() => {
+        result.current.pagination.onPrevPageClick();
+      });
+      await waitForApiResponse();
+
+      await act(() => {
+        result.current.pagination.onPrevPageClick();
+      });
+      await waitForApiResponse();
+
+      expect(result.current.data).toEqual(responses.page_1);
+      expect(result.current.pagination).toMatchObject({
+        page: 1,
+        canGoBackwards: true,
+        hasNextPage: true,
+        isLoading: false,
+        isVisible: true,
+      });
+
+      expect(routerPush).toHaveBeenCalledTimes(4);
+      expect(routerPush).toHaveBeenLastCalledWith(
+        {
+          pathname: '/current-route',
+          query: {},
+        },
+        undefined,
+        { shallow: true },
+      );
+
+      expect(animateScroll.scrollToTop).toHaveBeenCalledTimes(4);
+      expect(animateScroll.scrollToTop).toHaveBeenLastCalledWith({ duration: 0 });
+    });
+  });
+
+  it('correctly resets the page', async() => {
+    const routerPush = jest.fn(() => Promise.resolve());
+    useRouter.mockReturnValue({ ...router, pathname: '/current-route', push: routerPush });
+
+    fetch.once(JSON.stringify(responses.page_1));
+    fetch.once(JSON.stringify(responses.page_2));
+    fetch.once(JSON.stringify(responses.page_3));
+    fetch.once(JSON.stringify(responses.page_1));
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
 
-    expect(result.current.data).toEqual(response);
+    await act(async() => {
+      result.current.pagination.onNextPageClick();
+    });
+    await waitForApiResponse();
+
+    await act(async() => {
+      result.current.pagination.onNextPageClick();
+    });
+    await waitForApiResponse();
+
+    await act(async() => {
+      result.current.pagination.resetPage();
+    });
+    await waitForApiResponse();
+
+    expect(result.current.data).toEqual(responses.page_1);
     expect(result.current.pagination).toMatchObject({
       page: 1,
       canGoBackwards: true,
@@ -60,6 +298,45 @@ describe('if there are multiple pages', () => {
       isLoading: false,
       isVisible: true,
     });
+
+    expect(routerPush).toHaveBeenCalledTimes(3);
+    expect(routerPush).toHaveBeenLastCalledWith(
+      {
+        pathname: '/current-route',
+        query: {},
+      },
+      undefined,
+      { shallow: true },
+    );
+
+    expect(animateScroll.scrollToTop).toHaveBeenCalledTimes(3);
+    expect(animateScroll.scrollToTop).toHaveBeenLastCalledWith({ duration: 0 });
+  });
+
+  it('when navigates between pages can scroll to custom element', async() => {
+    const scrollRef = {
+      current: {
+        scrollIntoView: jest.fn(),
+      },
+    };
+    const params: Params<'address_txs'> = {
+      resourceName: 'address_txs',
+      pathParams: { hash: addressMock.hash },
+      scrollRef: scrollRef as unknown as React.RefObject<HTMLDivElement>,
+    };
+    fetch.once(JSON.stringify(responses.page_1));
+    fetch.once(JSON.stringify(responses.page_2));
+
+    const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
+    await waitForApiResponse();
+
+    await act(async() => {
+      result.current.pagination.onNextPageClick();
+    });
+    await waitForApiResponse();
+
+    expect(scrollRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
+    expect(scrollRef.current.scrollIntoView).toHaveBeenCalledWith(true);
   });
 });
 
@@ -71,16 +348,12 @@ describe('if there is page query param in URL', () => {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
     };
-    const response = {
-      items: [],
-      next_page_params: null,
-    };
-    fetch.mockResponse(JSON.stringify(response));
+    fetch.mockResponse(JSON.stringify(responses.page_empty));
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
 
-    expect(result.current.data).toEqual(response);
+    expect(result.current.data).toEqual(responses.page_empty);
     expect(result.current.pagination).toMatchObject({
       page: 3,
       canGoBackwards: false,
@@ -89,8 +362,12 @@ describe('if there is page query param in URL', () => {
       isVisible: true,
     });
   });
+
+  it('correctly navigates to the following pages', async() => {});
 });
 
+describe('queries with filters', () => {});
+
 async function waitForApiResponse() {
   await flushPromises();
   await act(flushPromises);