Write tests for navigation between app-dir and pages (#43881)
- Add test for navigating app -> pages - Add test for navigation pages -> app - Remove unneeded React imports - Document back and forward on the BrowserInterface - Add test for navigating back and forth between pages and app pages using `back` and `forward`
This commit is contained in:
Jan Kaifer
GitHub
parent
f07f69dd0f
commit
2c70bc784c
6 changed files with 115 additions and 0 deletions
12
test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx
Normal file
12
test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div>
|
||||
<span id="app-page">App Page</span>
|
||||
<Link id="link-to-pages" href="/pages">
|
||||
To Pages
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export default function Layout({ children }) {
|
||||
return (
|
||||
<html>
|
||||
<head />
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import { createNext, FileRef } from 'e2e-utils'
|
||||
import { NextInstance } from 'test/lib/next-modes/base'
|
||||
import webdriver from 'next-webdriver'
|
||||
|
||||
describe('navigation between pages and app dir', () => {
|
||||
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('It should be able to navigate app -> pages', async () => {
|
||||
const browser = await webdriver(next.url, '/app')
|
||||
expect(await browser.elementById('app-page').text()).toBe('App Page')
|
||||
await browser
|
||||
.elementById('link-to-pages')
|
||||
.click()
|
||||
.waitForElementByCss('#pages-page')
|
||||
expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
|
||||
expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
|
||||
})
|
||||
|
||||
it('It should be able to navigate pages -> app', async () => {
|
||||
const browser = await webdriver(next.url, '/pages')
|
||||
expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
|
||||
await browser
|
||||
.elementById('link-to-app')
|
||||
.click()
|
||||
.waitForElementByCss('#app-page')
|
||||
expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse()
|
||||
expect(await browser.elementById('app-page').text()).toBe('App Page')
|
||||
})
|
||||
|
||||
it('It should be able to navigate pages -> app and go back an forward', async () => {
|
||||
const browser = await webdriver(next.url, '/pages')
|
||||
await browser
|
||||
.elementById('link-to-app')
|
||||
.click()
|
||||
.waitForElementByCss('#app-page')
|
||||
await browser.back().waitForElementByCss('#pages-page')
|
||||
expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
|
||||
expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
|
||||
await browser.forward().waitForElementByCss('#app-page')
|
||||
expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse()
|
||||
expect(await browser.elementById('app-page').text()).toBe('App Page')
|
||||
})
|
||||
|
||||
it('It should be able to navigate app -> pages and go back and forward', async () => {
|
||||
const browser = await webdriver(next.url, '/app')
|
||||
await browser
|
||||
.elementById('link-to-pages')
|
||||
.click()
|
||||
.waitForElementByCss('#pages-page')
|
||||
await browser.back().waitForElementByCss('#app-page')
|
||||
expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse()
|
||||
expect(await browser.elementById('app-page').text()).toBe('App Page')
|
||||
await browser.forward().waitForElementByCss('#pages-page')
|
||||
expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
|
||||
expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
experimental: {
|
||||
appDir: true,
|
||||
},
|
||||
}
|
||||
12
test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx
Normal file
12
test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div>
|
||||
<span id="pages-page">Pages Page</span>
|
||||
<Link id="link-to-app" href="/app">
|
||||
To App
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -77,15 +77,22 @@ export class BrowserInterface implements PromiseLike<any> {
|
|||
moveTo(): BrowserInterface {
|
||||
return this
|
||||
}
|
||||
// TODO(NEXT-290): type this correctly as awaitable
|
||||
waitForElementByCss(selector: string, timeout?: number): BrowserInterface {
|
||||
return this
|
||||
}
|
||||
waitForCondition(snippet: string, timeout?: number): BrowserInterface {
|
||||
return this
|
||||
}
|
||||
/**
|
||||
* Use browsers `go back` functionality.
|
||||
*/
|
||||
back(): BrowserInterface {
|
||||
return this
|
||||
}
|
||||
/**
|
||||
* Use browsers `go forward` functionality. Inverse of back.
|
||||
*/
|
||||
forward(): BrowserInterface {
|
||||
return this
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue