Skip to content

Commit

Permalink
tests: added tests to cover usecases
Browse files Browse the repository at this point in the history
  • Loading branch information
wyattjoh committed Dec 15, 2022
1 parent 759dfad commit 2408322
Show file tree
Hide file tree
Showing 9 changed files with 81 additions and 46 deletions.
2 changes: 1 addition & 1 deletion packages/next/client/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export function useRouter(): NextRouter {
const router = React.useContext(RouterContext)
if (!router) {
throw new Error(
'Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
'NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
)
}

Expand Down
6 changes: 6 additions & 0 deletions test/e2e/app-dir/app/app/compat-hooks/app/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
'use client'
import { RouterHooksFixtures } from '../../../components/router-hooks-fixtures'

export default function Page() {
return <RouterHooksFixtures />
}
10 changes: 10 additions & 0 deletions test/e2e/app-dir/app/app/router/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
'use client'

import { useRouter } from 'next/router'

export default function RouterPage() {
// eslint-disable-next-line no-unused-vars
const router = useRouter()

return <div id="contents">You shouldn't see this</div>
}
19 changes: 12 additions & 7 deletions test/e2e/app-dir/app/components/router-hooks-fixtures.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
import { useRouter as usePagesRouter } from 'next/router'
import { useRouter as usePagesRouter } from 'next/compat/router'
import {
usePathname,
useRouter as useAppRouter,
useSearchParams,
} from 'next/compat/navigation'
import { useState, useEffect } from 'react'
import { useState, useEffect, useMemo } from 'react'

export const RouterHooksFixtures = () => {
const pagesRouter = usePagesRouter()
const appRouter = useAppRouter()
const searchParams = useSearchParams()
const pathname = usePathname()

const isReady = useMemo(
() => !pagesRouter || pagesRouter.isReady,
[pagesRouter]
)

const [value, setValue] = useState(null)
useEffect(() => {
if (!pagesRouter.isReady) {
if (!isReady) {
return
}

setValue(searchParams.get('key'))
}, [pagesRouter.isReady, searchParams])
setValue(searchParams?.get('key') ?? null)
}, [isReady, searchParams])

const onClick = () => {
appRouter.push('/adapter-hooks/pushed')
appRouter.push('/compat-hooks/pushed')
}

return (
<div id={pagesRouter.isReady ? 'router-ready' : 'router-not-ready'}>
<div id={isReady ? 'router-ready' : 'router-not-ready'}>
<div id="key-value">{value}</div>
<div id="pathname">{pathname}</div>
<button type="button" onClick={onClick}>
Expand Down
90 changes: 52 additions & 38 deletions test/e2e/app-dir/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { NextInstance } from 'test/lib/next-modes/base'
import {
check,
fetchViaHTTP,
getRedboxDescription,
getRedboxHeader,
hasRedbox,
renderViaHTTP,
Expand Down Expand Up @@ -979,6 +980,22 @@ describe('app dir', () => {
await browser.close()
}
})

if (isDev) {
it('should throw an error when used in app/', async () => {
const browser = await webdriver(next.url, '/router')

try {
expect(await hasRedbox(browser, true)).toBeTrue()

expect(await getRedboxDescription(browser)).toContain(
'NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
)
} finally {
await browser.close()
}
})
}
})

describe('hooks', () => {
Expand Down Expand Up @@ -1040,7 +1057,7 @@ describe('app dir', () => {
})
})

describe('headers function', () => {
describe('headers', () => {
it('should have access to incoming headers in a server component', async () => {
// Check to see that we can't see the header when it's not present.
let html = await renderViaHTTP(
Expand Down Expand Up @@ -1077,7 +1094,7 @@ describe('app dir', () => {
})
})

describe('previewData function', () => {
describe('previewData', () => {
it('should return no preview data when there is none', async () => {
const browser = await webdriver(next.url, '/hooks/use-preview-data')

Expand Down Expand Up @@ -1171,44 +1188,41 @@ 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}` : '')
)
describe('next/compat/navigation', () => {
it.each([
{ pathname: '/compat-hooks/app' },
{ pathname: '/compat-hooks/static' },
{ pathname: '/compat-hooks/1' },
{ pathname: '/compat-hooks/2' },
{ pathname: '/compat-hooks/1/account' },
{ pathname: '/compat-hooks/static', keyValue: 'value' },
{ pathname: '/compat-hooks/1', keyValue: 'value' },
{ pathname: '/compat-hooks/2', keyValue: 'value' },
{ pathname: '/compat-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
)
try {
await browser.waitForElementByCss('#router-ready')
expect(await browser.elementById('key-value').text()).toBe(keyValue)
expect(await browser.elementById('pathname').text()).toBe(pathname)

await browser.elementByCss('button').click()
await browser.waitForElementByCss('#pushed')
} finally {
await browser.close()
}
}
)
})
await browser.elementByCss('button').click()
await browser.waitForElementByCss('#pushed')
} finally {
await browser.close()
}
}
)
})

describe('client components', () => {
describe('next/navigation', () => {
describe('usePathname', () => {
it('should have the correct pathname', async () => {
const html = await renderViaHTTP(next.url, '/hooks/use-pathname')
Expand Down Expand Up @@ -1259,7 +1273,7 @@ describe('app dir', () => {
}
})

describe('useRouter', () => {
describe('next/router', () => {
it('should allow access to the router', async () => {
const browser = await webdriver(next.url, '/hooks/use-router')

Expand Down

0 comments on commit 2408322

Please sign in to comment.