fix(@use-funnel/next): change replace call to avoid adding index valu…

…e and change next/router import to ESM (#3) * feat: change next/router import to ESM * fix: change replace call to avoid adding index value * test: add test code to verify funnel index value
toss · Jul 27, 2024 · a34756a · a34756a
1 parent 2509eaf
commit a34756a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
@@ -1,5 +1,5 @@
 import { createUseFunnel } from '@use-funnel/core';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/router.js';
 import { useMemo } from 'react';
 import { makePath, removeKeys } from './util';
 
@@ -58,12 +58,12 @@ export const useFunnel = createUseFunnel(({ id, initialState }) => {
             query: {
               ...query,
               [`${QS_KEY}${id}.histories`]: JSON.stringify([...(histories ?? []).slice(0, currentIndex), state]),
-              [`${QS_KEY}${id}.index`]: currentIndex + 1,
+              [`${QS_KEY}${id}.index`]: currentIndex,
             },
           },
           {
             pathname,
-            query: { ...removeKeys(query, [checkHasQSKey]), [`${QS_KEY}${id}.index`]: currentIndex + 1 },
+            query: { ...removeKeys(query, [checkHasQSKey]), [`${QS_KEY}${id}.index`]: currentIndex },
           },
           {
             shallow: true,

diff --git a/packages/next/test/index.test.tsx b/packages/next/test/index.test.tsx
@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { describe, expect, test } from 'vitest';
+import mockRouter from 'next-router-mock';
 
 import { useFunnel } from '../src/index.js';
 
@@ -10,6 +11,7 @@ describe('Test useFunnel next router', () => {
       const funnel = useFunnel<{
         A: { id?: string };
         B: { id: string };
+        C: { id: string; password: string };
       }>({
         id: 'vitest',
         initial: {
@@ -34,6 +36,20 @@ describe('Test useFunnel next router', () => {
           return (
             <div>
               <div>{funnel.context.id}</div>
+              <button
+                onClick={() => {
+                  funnel.history.replace('C', { password: 'vitest1234' });
+                }}
+              >
+                Go C
+              </button>
+            </div>
+          );
+        }
+        case 'C': {
+          return (
+            <div>
+              <div>Finished!</div>
             </div>
           );
         }
@@ -51,5 +67,19 @@ describe('Test useFunnel next router', () => {
     await user.click(screen.getByText('Go B'));
 
     expect(screen.queryByText('vitest')).not.toBeNull();
+    expect(mockRouter.query['funnel.vitest.index']).toBe(1);
+    expect(JSON.parse(mockRouter.query['funnel.vitest.histories'] as string)).toEqual([
+      { step: 'A', context: {} },
+      { step: 'B', context: { id: 'vitest' } },
+    ]);
+
+    await user.click(screen.getByText('Go C'));
+
+    expect(screen.queryByText('Finished!')).not.toBeNull();
+    expect(mockRouter.query['funnel.vitest.index']).toBe(1);
+    expect(JSON.parse(mockRouter.query['funnel.vitest.histories'] as string)).toEqual([
+      { step: 'A', context: {} },
+      { step: 'C', context: { id: 'vitest', password: 'vitest1234' } },
+    ]);
   });
 });