test: added tests for supporting app client hooks in pages

test/e2e/app-dir/app/components/router-hooks-fixtures.js

@@ -0,0 +1,26 @@
+import { useRouter } from 'next/router'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useState } from 'react'
+import { useEffect } from 'react'
+
+export const RouterHooksFixtures = () => {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  const [value, setValue] = useState(null)
+  useEffect(() => {
+    if (!router.isReady) {
+      return
+    }
+
+    setValue(searchParams.get('key'))
+  }, [router.isReady, searchParams])
+
+  return (
+    <div id={router.isReady ? 'router-ready' : 'router-not-ready'}>
+      <div id="key-value">{value}</div>
+      <div id="pathname">{pathname}</div>
+    </div>
+  )
+}

test/e2e/app-dir/app/pages/adapter-hooks/[id].js

@@ -0,0 +1,5 @@
+import { RouterHooksFixtures } from '../../components/router-hooks-fixtures'
+
+export default function Page() {
+  return <RouterHooksFixtures />
+}

test/e2e/app-dir/app/pages/adapter-hooks/[id]/account.js

@@ -0,0 +1,13 @@
+import { RouterHooksFixtures } from '../../../components/router-hooks-fixtures'
+
+export default function Page() {
+  return <RouterHooksFixtures />
+}
+
+export const getStaticProps = () => {
+  return { props: {} }
+}
+
+export const getStaticPaths = () => {
+  return { fallback: 'blocking', paths: [{ params: { id: '1' } }] }
+}

test/e2e/app-dir/app/pages/adapter-hooks/static.js

@@ -0,0 +1,9 @@
+import { RouterHooksFixtures } from '../../components/router-hooks-fixtures'
+
+export default function Page() {
+  return <RouterHooksFixtures />
+}
+
+export const getStaticProps = () => {
+  return { props: {} }
+}

test/e2e/app-dir/index.test.ts

@@ -1125,6 +1125,39 @@ describe('app dir', () => {
 
     describe('client components', () => {
       describe('hooks', () => {
+        describe('from pages', () => {
+          it.each([
+            { pathname: '/adapter-hooks/static' },
+            { pathname: '/adapter-hooks/1' },
+            { pathname: '/adapter-hooks/2' },
+            { pathname: '/adapter-hooks/1/account' },
+            { pathname: '/adapter-hooks/static', keyValue: 'value' },
+            { pathname: '/adapter-hooks/1', keyValue: 'value' },
+            { pathname: '/adapter-hooks/2', keyValue: 'value' },
+            { pathname: '/adapter-hooks/1/account', keyValue: 'value' },
+          ])(
+            'should have the correct hooks',
+            async ({ pathname, keyValue = '' }) => {
+              const browser = await webdriver(
+                next.url,
+                pathname + (keyValue ? `?key=${keyValue}` : '')
+              )
+
+              try {
+                await browser.waitForElementByCss('#router-ready')
+                expect(await browser.elementById('key-value').text()).toBe(
+                  keyValue
+                )
+                expect(await browser.elementById('pathname').text()).toBe(
+                  pathname
+                )
+              } finally {
+                await browser.close()
+              }
+            }
+          )
+        })
+
         describe('usePathname', () => {
           it('should have the correct pathname', async () => {
             const html = await renderViaHTTP(next.url, '/hooks/use-pathname')