From 33511f5291bce309708a07d0363c6a9a098e3365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Best?= <github@francoisbest.com>
Date: Tue, 14 Jan 2025 05:29:06 +0100
Subject: [PATCH] test: Add dynamic keys test

---
 packages/nuqs/src/useQueryStates.test.ts | 68 +++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/packages/nuqs/src/useQueryStates.test.ts b/packages/nuqs/src/useQueryStates.test.ts
index 18ee3847f..ba228d5a8 100644
--- a/packages/nuqs/src/useQueryStates.test.ts
+++ b/packages/nuqs/src/useQueryStates.test.ts
@@ -4,7 +4,12 @@ import {
   withNuqsTestingAdapter,
   type OnUrlUpdateFunction
 } from './adapters/testing'
-import { parseAsArrayOf, parseAsJson, parseAsString } from './parsers'
+import {
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsJson,
+  parseAsString
+} from './parsers'
 import { useQueryStates } from './useQueryStates'
 
 describe('useQueryStates', () => {
@@ -316,3 +321,64 @@ describe('useQueryStates: clearOnDefault', () => {
     expect(onUrlUpdate.mock.calls[0]![0].queryString).toEqual('')
   })
 })
+
+describe('useQueryStates: dynamic keys', () => {
+  it('supports dynamic keys', () => {
+    const useTestHook = (keys: string[] = ['a', 'b']) =>
+      useQueryStates({
+        [keys[0]!]: parseAsInteger,
+        [keys[1]!]: parseAsInteger
+      })
+    const { result, rerender } = renderHook(useTestHook, {
+      wrapper: withNuqsTestingAdapter({
+        searchParams: '?a=1&b=2&c=3&d=4'
+      })
+    })
+    expect(result.current[0].a).toEqual(1)
+    expect(result.current[0].b).toEqual(2)
+    expect(result.current[0].c).toBeUndefined()
+    expect(result.current[0].d).toBeUndefined()
+    rerender(['c', 'd'])
+    expect(result.current[0].a).toBeUndefined()
+    expect(result.current[0].b).toBeUndefined()
+    expect(result.current[0].c).toEqual(3)
+    expect(result.current[0].d).toEqual(4)
+  })
+
+  it('supports dynamic keys with remapping', () => {
+    const useTestHook = (keys: string[] = ['a', 'b']) =>
+      useQueryStates(
+        {
+          [keys[0]!]: parseAsInteger,
+          [keys[1]!]: parseAsInteger
+        },
+        {
+          urlKeys: {
+            a: 'x',
+            b: 'y',
+            c: 'z'
+          }
+        }
+      )
+    const { result, rerender } = renderHook(useTestHook, {
+      wrapper: withNuqsTestingAdapter({
+        searchParams: '?x=1&y=2&z=3'
+      })
+    })
+    expect(result.current[0].a).toEqual(1)
+    expect(result.current[0].b).toEqual(2)
+    expect(result.current[0].c).toBeUndefined()
+    expect(result.current[0].d).toBeUndefined()
+    expect(result.current[0].x).toBeUndefined()
+    expect(result.current[0].y).toBeUndefined()
+    expect(result.current[0].z).toBeUndefined()
+    rerender(['c', 'd'])
+    expect(result.current[0].a).toBeUndefined()
+    expect(result.current[0].b).toBeUndefined()
+    expect(result.current[0].c).toEqual(3)
+    expect(result.current[0].d).toBeNull()
+    expect(result.current[0].x).toBeUndefined()
+    expect(result.current[0].y).toBeUndefined()
+    expect(result.current[0].z).toBeUndefined()
+  })
+})