Test that adding query can be detected by useSearchParams (vercel#43969)

jankaifer · Dec 19, 2022 · c25c857 · c25c857
1 parent 4ef969b
commit c25c857
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 0 deletions.
diff --git a/test/e2e/app-dir/navigation-and-querystring/app/layout.tsx b/test/e2e/app-dir/navigation-and-querystring/app/layout.tsx
@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-and-querystring/app/page.tsx b/test/e2e/app-dir/navigation-and-querystring/app/page.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+export default function Page() {
+  const params = useSearchParams()
+  return (
+    <>
+      <Link id="set-query" href="/?a=b&c=d">
+        set Query
+      </Link>
+      <div id="query">{params.toString()}</div>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-and-querystring/navigation-and-querystring.test.ts b/test/e2e/app-dir/navigation-and-querystring/navigation-and-querystring.test.ts
@@ -0,0 +1,38 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import webdriver from 'next-webdriver'
+import { waitFor } from 'next-test-utils'
+
+describe('app-dir navigation and querystring', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: new FileRef(__dirname),
+      dependencies: {
+        react: 'latest',
+        'react-dom': 'latest',
+        typescript: 'latest',
+        '@types/react': 'latest',
+        '@types/node': 'latest',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should set query correctly', async () => {
+    const browser = await webdriver(next.url, '/')
+    expect(await browser.elementById('query').text()).toMatchInlineSnapshot(
+      `""`
+    )
+
+    browser.elementById('set-query').click()
+    await waitFor(200)
+
+    expect(await browser.elementById('query').text()).toMatchInlineSnapshot(
+      `"a=b&c=d"`
+    )
+    const url = new URL(await browser.url())
+    expect(url.searchParams.toString()).toMatchInlineSnapshot(`"a=b&c=d"`)
+  })
+})
diff --git a/test/e2e/app-dir/navigation-and-querystring/next.config.js b/test/e2e/app-dir/navigation-and-querystring/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    appDir: true,
+  },
+}