test next router pagination

Author: mmalfertheiner

package.json

@@ -56,6 +56,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "jest": "^26.6.3",
     "next": "^11.0.1",
+    "next-router-mock": "^0.1.4",
     "prettier": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/__test__/nextRouterPagination.test.tsx

@@ -0,0 +1,92 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+import { act, renderHook } from '@testing-library/react-hooks'
+import router from 'next/router'
+
+import { useSearchAndPaginationQueryUrlParameters } from '../nextRouterPagination'
+
+jest.mock('next/router', () => require('next-router-mock'))
+
+test('should initialize pagination', () => {
+  const { result } = renderHook(() =>
+    useSearchAndPaginationQueryUrlParameters()
+  )
+
+  expect(result.current.page).toBe(0)
+  expect(result.current.search).toBe('')
+  expect(result.current.size).toBe(15)
+})
+
+test('should change page', () => {
+  const { result } = renderHook(() =>
+    useSearchAndPaginationQueryUrlParameters()
+  )
+
+  act(() => {
+    result.current.paginationActions.setPage(2)
+  })
+
+  expect(result.current.page).toBe(2)
+  expect(router.query.page).toBe('2')
+})
+
+test('should change search', () => {
+  const { result } = renderHook(() =>
+    useSearchAndPaginationQueryUrlParameters()
+  )
+
+  act(() => {
+    result.current.searchActions.search('Max')
+  })
+
+  expect(result.current.search).toBe('Max')
+  expect(router.query.search).toBe('Max')
+})
+
+test('on search change -> page should be reset', () => {
+  const { result } = renderHook(() =>
+    useSearchAndPaginationQueryUrlParameters()
+  )
+
+  act(() => {
+    result.current.paginationActions.setPage(2)
+  })
+
+  expect(result.current.page).toBe(2)
+  expect(router.query.page).toBe('2')
+
+  act(() => {
+    result.current.searchActions.search('Max')
+  })
+
+  expect(result.current.search).toBe('Max')
+  expect(result.current.page).toBe(0)
+  expect(router.query.search).toBe('Max')
+  expect(router.query.page).toBeUndefined()
+})
+
+test('clear pagination should reset search and page', () => {
+  const { result } = renderHook(() =>
+    useSearchAndPaginationQueryUrlParameters()
+  )
+
+  act(() => {
+    result.current.searchActions.search('Max')
+  })
+
+  act(() => {
+    result.current.paginationActions.setPage(2)
+  })
+
+  expect(router.query.search).toBe('Max')
+  expect(router.query.page).toBe('2')
+
+  act(() => {
+    result.current.searchActions.clear()
+  })
+
+  expect(result.current.search).toBe('')
+  expect(result.current.page).toBe(0)
+  expect(router.query.search).toBeUndefined()
+  expect(router.query.page).toBeUndefined()
+})