feat: 🎸 add route change example (#11)

* docs: ✏️ add new generator info readme.md

* feat: 🎸 add route change example

* test: 💍 test for redirect button

* docs: ✏️ remove whatwg @types

Author: dfiedlerx

package-lock.json

@@ -38,7 +38,6 @@
     "@types/node": "20.4.5",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
-    "@types/whatwg-fetch": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
     "babel-loader": "^9.1.3",

package.json

@@ -1,9 +1,16 @@
 import userEvent from '@testing-library/user-event'
 
 import Page from '@/app/(redux)/redux-example/page'
+import useRouterMock, { pushMock } from '@/mocks/useRouter.mock'
 import { resetStore } from '@/redux/store/store'
 import { render, screen, waitFor } from '@/utils/test-utils'
 
+jest.mock('next/navigation', () => ({
+  useRouter() {
+    return useRouterMock
+  },
+}))
+
 describe('@/app/(redux)/redux-example/page', () => {
   beforeEach(() => {
     resetStore()
@@ -55,4 +62,16 @@ describe('@/app/(redux)/redux-example/page', () => {
       expect(screen.getByText('0')).toBeInTheDocument()
     })
   })
+
+  it('should redirect when clicked', async () => {
+    render(<Page />)
+    expect(screen.getByText(0)).toBeInTheDocument()
+
+    const decrement = screen.getByText('redirect')
+    await userEvent.click(decrement)
+
+    await waitFor(() => {
+      expect(pushMock).toHaveBeenCalledWith('/redux-persist-example')
+    })
+  })
 })

src/app/(redux)/redux-example/page.test.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { ReactElement } from 'react'
+import { useRouter } from 'next/navigation'
 
 import Lazy from '@/components/Lazy/Lazy.lazy'
 import {
@@ -14,16 +15,27 @@ import useAppSelector from '@/redux/selectors/useAppSelector/useAppSelector'
 export default function Page(): ReactElement {
   const count = useAppSelector((state) => state.counterReducer.value)
   const dispatch = useAppDispatch()
+  const { push } = useRouter()
 
   return (
     <main style={{ maxWidth: 1200, marginInline: 'auto', padding: 20 }}>
       <div style={{ marginBottom: '4rem', textAlign: 'center' }}>
+        <h1>STATE REDUX</h1>
         <h4 style={{ marginBottom: 16 }}>{count}</h4>
         <button onClick={() => dispatch(increment())}>increment</button>
         <button onClick={() => dispatch(decrement())} style={{ marginInline: 16 }}>
           decrement
         </button>
-        <button onClick={() => dispatch(reset())}>reset</button>
+        <button onClick={() => dispatch(reset())} style={{ marginInline: 16 }}>
+          reset
+        </button>
+        <button
+          onClick={() => {
+            push('/redux-persist-example')
+          }}
+        >
+          redirect
+        </button>
         {parseInt(count) === 1 && <Lazy />}
       </div>
     </main>

src/app/(redux)/redux-example/page.tsx

@@ -1,9 +1,16 @@
 import userEvent from '@testing-library/user-event'
 
 import Page from '@/app/(redux)/redux-persist-example/page'
+import useRouterMock, { pushMock } from '@/mocks/useRouter.mock'
 import { resetStore } from '@/redux/store/store'
 import { render, screen, waitFor } from '@/utils/test-utils'
 
+jest.mock('next/navigation', () => ({
+  useRouter() {
+    return useRouterMock
+  },
+}))
+
 describe('@/app/(redux)/redux-persist-example/page', () => {
   beforeEach(() => {
     resetStore()
@@ -54,4 +61,16 @@ describe('@/app/(redux)/redux-persist-example/page', () => {
       expect(screen.getByText('0')).toBeInTheDocument()
     })
   })
+
+  it('should redirect when clicked', async () => {
+    render(<Page />)
+    expect(screen.getByText(0)).toBeInTheDocument()
+
+    const decrement = screen.getByText('redirect')
+    await userEvent.click(decrement)
+
+    await waitFor(() => {
+      expect(pushMock).toHaveBeenCalledWith('/redux-example')
+    })
+  })
 })

src/app/(redux)/redux-persist-example/page.test.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { ReactElement } from 'react'
+import { useRouter } from 'next/navigation'
 
 import {
   decrement,
@@ -13,6 +14,7 @@ import useAppSelector from '@/redux/selectors/useAppSelector/useAppSelector'
 export default function Home(): ReactElement {
   const count = useAppSelector((state) => state.persistSaveReducerPersisted.value)
   const dispatch = useAppDispatch()
+  const { push } = useRouter()
 
   return (
     <main style={{ maxWidth: 1200, marginInline: 'auto', padding: 20 }}>
@@ -23,7 +25,16 @@ export default function Home(): ReactElement {
         <button onClick={() => dispatch(decrement())} style={{ marginInline: 16 }}>
           decrement
         </button>
-        <button onClick={() => dispatch(reset())}>reset</button>
+        <button onClick={() => dispatch(reset())} style={{ marginInline: 16 }}>
+          reset
+        </button>
+        <button
+          onClick={() => {
+            push('/redux-example')
+          }}
+        >
+          redirect
+        </button>
       </div>
     </main>
   )

src/app/(redux)/redux-persist-example/page.tsx

@@ -22,6 +22,7 @@ export default function RootLayout({
 }): ReactElement {
   return (
     <html lang="en">
+      <head></head>
       <body className={inter.className}>
         <ReduxProvider>
           <ThemeProvider>

src/app/layout.tsx

@@ -0,0 +1,12 @@
+export const pushMock = jest.fn()
+
+const useRouterMock = {
+  route: '/',
+  pathname: '',
+  query: '',
+  asPath: '',
+  push: pushMock,
+}
+
+
+export default useRouterMock