Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Write tests for navigation between app-dir and pages #43881

Merged
merged 13 commits into from Dec 21, 2022
Merged

Write tests for navigation between app-dir and pages #43881

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fdbf7a3
Add test for navigating app -> pages
jankaifer Dec 9, 2022
efd212d
Add test for navigation app -> pages
jankaifer Dec 9, 2022
4f4a32e
Remove unneeded React imports
jankaifer Dec 9, 2022
26ac516
Document back and forward on the BrowserInterface
jankaifer Dec 9, 2022
e6bcbac
Add test for navigating back and forth between pages and app pages
jankaifer Dec 9, 2022
b834a09
Merge branch 'canary' into jankaifer/next-185-write-tests-for-navigat…
timneutkens Dec 16, 2022
09ae86a
migrate from waitFor to waitForElementByCss
jankaifer Dec 16, 2022
33ea542
fix typings on waitForElementByCss
jankaifer Dec 16, 2022
8854954
Revert type changes and create a new ticket for it
jankaifer Dec 16, 2022
95b9ca8
improve chaining in the tests
jankaifer Dec 16, 2022
ba1cde8
Merge branch 'canary' into jankaifer/next-185-write-tests-for-navigat…
jankaifer Dec 16, 2022
0b2e032
Merge branch 'canary' into jankaifer/next-185-write-tests-for-navigat…
jankaifer Dec 21, 2022
e242724
Merge branch 'canary' into jankaifer/next-185-write-tests-for-navigat…
jankaifer Dec 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 12 additions & 0 deletions test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx
View file
Open in desktop
@@ -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>
)
}
8 changes: 8 additions & 0 deletions test/e2e/app-dir/interpolability-with-pages/app/layout.tsx
View file
Open in desktop
@@ -0,0 +1,8 @@
export default function Layout({ children }) {
return (
<html>
<head />
<body>{children}</body>
</html>
)
}
71 changes: 71 additions & 0 deletions test/e2e/app-dir/interpolability-with-pages/navigation.test.ts
View file
Open in desktop
@@ -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')
})
})
5 changes: 5 additions & 0 deletions test/e2e/app-dir/interpolability-with-pages/next.config.js
View file
Open in desktop
@@ -0,0 +1,5 @@
module.exports = {
experimental: {
appDir: true,
},
}
12 changes: 12 additions & 0 deletions test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx
View file
Open in desktop
@@ -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>
)
}
7 changes: 7 additions & 0 deletions test/lib/browsers/base.ts
View file
Open in desktop
Expand Up @@ -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
}
Expand Down