diff --git a/test/e2e/app-dir/app/components/router-hooks-fixtures.js b/test/e2e/app-dir/app/components/router-hooks-fixtures.js new file mode 100644 index 000000000000000..fc946354603beb6 --- /dev/null +++ b/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 ( +
+
{value}
+
{pathname}
+
+ ) +} diff --git a/test/e2e/app-dir/app/pages/adapter-hooks/[id].js b/test/e2e/app-dir/app/pages/adapter-hooks/[id].js new file mode 100644 index 000000000000000..6395b062b3f84a5 --- /dev/null +++ b/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 +} diff --git a/test/e2e/app-dir/app/pages/adapter-hooks/[id]/account.js b/test/e2e/app-dir/app/pages/adapter-hooks/[id]/account.js new file mode 100644 index 000000000000000..2c917626f2e3c25 --- /dev/null +++ b/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 +} + +export const getStaticProps = () => { + return { props: {} } +} + +export const getStaticPaths = () => { + return { fallback: 'blocking', paths: [{ params: { id: '1' } }] } +} diff --git a/test/e2e/app-dir/app/pages/adapter-hooks/static.js b/test/e2e/app-dir/app/pages/adapter-hooks/static.js new file mode 100644 index 000000000000000..4bac4a3f900e7de --- /dev/null +++ b/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 +} + +export const getStaticProps = () => { + return { props: {} } +} diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts index c4d9cb0c119519b..8fafd9019734394 100644 --- a/test/e2e/app-dir/index.test.ts +++ b/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')