diff --git a/test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx b/test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx new file mode 100644 index 0000000000000..27238002c7036 --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Page() { + return ( +
+ App Page + + To Pages + +
+ ) +} diff --git a/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx b/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx new file mode 100644 index 0000000000000..f3791f288f9d7 --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx @@ -0,0 +1,8 @@ +export default function Layout({ children }) { + return ( + + + {children} + + ) +} diff --git a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts new file mode 100644 index 0000000000000..90ba0b09a927f --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts @@ -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') + }) +}) diff --git a/test/e2e/app-dir/interpolability-with-pages/next.config.js b/test/e2e/app-dir/interpolability-with-pages/next.config.js new file mode 100644 index 0000000000000..cfa3ac3d7aa94 --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + experimental: { + appDir: true, + }, +} diff --git a/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx b/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx new file mode 100644 index 0000000000000..10172d757199e --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Page() { + return ( +
+ Pages Page + + To App + +
+ ) +} diff --git a/test/lib/browsers/base.ts b/test/lib/browsers/base.ts index 224be5e7bbc50..87e31c85f57ac 100644 --- a/test/lib/browsers/base.ts +++ b/test/lib/browsers/base.ts @@ -77,15 +77,22 @@ export class BrowserInterface implements PromiseLike { 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 }