From fdbf7a306792ba8809d883c7a4ec57f36f7299d2 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 9 Dec 2022 10:50:02 +0100 Subject: [PATCH 1/9] Add test for navigating app -> pages --- .../app/app/page.tsx | 13 ++++++++ .../interpolability-with-pages/app/layout.tsx | 10 ++++++ .../navigation.test.ts | 31 +++++++++++++++++++ .../interpolability-with-pages/next.config.js | 5 +++ .../pages/pages.tsx | 13 ++++++++ 5 files changed, 72 insertions(+) create mode 100644 test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx create mode 100644 test/e2e/app-dir/interpolability-with-pages/app/layout.tsx create mode 100644 test/e2e/app-dir/interpolability-with-pages/navigation.test.ts create mode 100644 test/e2e/app-dir/interpolability-with-pages/next.config.js create mode 100644 test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx 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 000000000000..5a5e312c288a --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx @@ -0,0 +1,13 @@ +import Link from 'next/link' +import React from 'react' + +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 000000000000..452799fd6dac --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx @@ -0,0 +1,10 @@ +import React from 'react' + +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 000000000000..41bbae9c9850 --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts @@ -0,0 +1,31 @@ +import { createNext, FileRef } from 'e2e-utils' +import { NextInstance } from 'test/lib/next-modes/base' +import webdriver from 'next-webdriver' +import { waitFor } from 'next-test-utils' + +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') + browser.elementById('link-to-pages').click() + await waitFor(100) + 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 000000000000..cfa3ac3d7aa9 --- /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 000000000000..3d6d843e0f20 --- /dev/null +++ b/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx @@ -0,0 +1,13 @@ +import Link from 'next/link' +import React from 'react' + +export default function Page() { + return ( +
+ Pages Page + + To App + +
+ ) +} From efd212dcb90c40f676de76f5335fe2dc0f873351 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 9 Dec 2022 11:11:02 +0100 Subject: [PATCH 2/9] Add test for navigation app -> pages --- .../interpolability-with-pages/navigation.test.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts index 41bbae9c9850..f79e632b2a60 100644 --- a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts +++ b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts @@ -24,8 +24,17 @@ describe('navigation between pages and app dir', () => { const browser = await webdriver(next.url, '/app') expect(await browser.elementById('app-page').text()).toBe('App Page') browser.elementById('link-to-pages').click() - await waitFor(100) + await waitFor(200) 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') + browser.elementById('link-to-app').click() + await waitFor(200) + expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse() + expect(await browser.elementById('app-page').text()).toBe('App Page') + }) }) From 4f4a32e8007fb5997aac00a17496b65d4510a6d7 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 9 Dec 2022 11:40:31 +0100 Subject: [PATCH 3/9] Remove unneeded React imports --- test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx | 1 - test/e2e/app-dir/interpolability-with-pages/app/layout.tsx | 2 -- test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx | 1 - 3 files changed, 4 deletions(-) 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 index 5a5e312c288a..27238002c703 100644 --- a/test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx +++ b/test/e2e/app-dir/interpolability-with-pages/app/app/page.tsx @@ -1,5 +1,4 @@ import Link from 'next/link' -import React from 'react' export default function Page() { return ( diff --git a/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx b/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx index 452799fd6dac..f3791f288f9d 100644 --- a/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx +++ b/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx @@ -1,5 +1,3 @@ -import React from 'react' - export default function Layout({ children }) { return ( diff --git a/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx b/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx index 3d6d843e0f20..10172d757199 100644 --- a/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx +++ b/test/e2e/app-dir/interpolability-with-pages/pages/pages.tsx @@ -1,5 +1,4 @@ import Link from 'next/link' -import React from 'react' export default function Page() { return ( From 26ac5167dc06c3e3904b33a4bf0c0d6d8ddef003 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 9 Dec 2022 12:02:13 +0100 Subject: [PATCH 4/9] Document back and forward on the BrowserInterface --- test/lib/browsers/base.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/test/lib/browsers/base.ts b/test/lib/browsers/base.ts index 748270aca302..6a0d27c5a3cf 100644 --- a/test/lib/browsers/base.ts +++ b/test/lib/browsers/base.ts @@ -58,9 +58,15 @@ export class BrowserInterface { 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 } From e6bcbacc8b49e7bf4e2f4f7c62fb4b2e9a483a67 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 9 Dec 2022 12:02:47 +0100 Subject: [PATCH 5/9] Add test for navigating back and forth between pages and app pages --- .../navigation.test.ts | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts index f79e632b2a60..b27ae522f77f 100644 --- a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts +++ b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts @@ -37,4 +37,32 @@ describe('navigation between pages and app dir', () => { 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') + browser.elementById('link-to-app').click() + await waitFor(200) + browser.back() + await waitFor(200) + expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse() + expect(await browser.elementById('pages-page').text()).toBe('Pages Page') + browser.forward() + await waitFor(200) + 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') + browser.elementById('link-to-pages').click() + await waitFor(200) + browser.back() + await waitFor(200) + expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse() + expect(await browser.elementById('app-page').text()).toBe('App Page') + browser.forward() + await waitFor(200) + expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse() + expect(await browser.elementById('pages-page').text()).toBe('Pages Page') + }) }) From 09ae86a4506d92c5ef66509c18c137da7ec78651 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 16 Dec 2022 13:14:42 +0100 Subject: [PATCH 6/9] migrate from waitFor to waitForElementByCss --- .../navigation.test.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts index b27ae522f77f..0c791bb0007d 100644 --- a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts +++ b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts @@ -1,7 +1,6 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' import webdriver from 'next-webdriver' -import { waitFor } from 'next-test-utils' describe('navigation between pages and app dir', () => { let next: NextInstance @@ -24,7 +23,7 @@ describe('navigation between pages and app dir', () => { const browser = await webdriver(next.url, '/app') expect(await browser.elementById('app-page').text()).toBe('App Page') browser.elementById('link-to-pages').click() - await waitFor(200) + await browser.waitForElementByCss('#pages-page') expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse() expect(await browser.elementById('pages-page').text()).toBe('Pages Page') }) @@ -33,7 +32,7 @@ describe('navigation between pages and app dir', () => { const browser = await webdriver(next.url, '/pages') expect(await browser.elementById('pages-page').text()).toBe('Pages Page') browser.elementById('link-to-app').click() - await waitFor(200) + await browser.waitForElementByCss('#app-page') expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse() expect(await browser.elementById('app-page').text()).toBe('App Page') }) @@ -41,13 +40,13 @@ describe('navigation between pages and app dir', () => { it('It should be able to navigate pages -> app and go back an forward', async () => { const browser = await webdriver(next.url, '/pages') browser.elementById('link-to-app').click() - await waitFor(200) + await browser.waitForElementByCss('#app-page') browser.back() - await waitFor(200) + await browser.waitForElementByCss('#pages-page') expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse() expect(await browser.elementById('pages-page').text()).toBe('Pages Page') browser.forward() - await waitFor(200) + await browser.waitForElementByCss('#app-page') expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse() expect(await browser.elementById('app-page').text()).toBe('App Page') }) @@ -55,13 +54,13 @@ describe('navigation between pages and app dir', () => { it('It should be able to navigate app -> pages and go back and forward', async () => { const browser = await webdriver(next.url, '/app') browser.elementById('link-to-pages').click() - await waitFor(200) + await browser.waitForElementByCss('#pages-page') browser.back() - await waitFor(200) + await browser.waitForElementByCss('#app-page') expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse() expect(await browser.elementById('app-page').text()).toBe('App Page') browser.forward() - await waitFor(200) + await browser.waitForElementByCss('#pages-page') expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse() expect(await browser.elementById('pages-page').text()).toBe('Pages Page') }) From 33ea542008332304e1c383efb10847ae9edc091c Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 16 Dec 2022 13:21:43 +0100 Subject: [PATCH 7/9] fix typings on waitForElementByCss --- test/lib/browsers/base.ts | 4 +--- test/lib/browsers/playwright.ts | 2 +- test/lib/browsers/selenium.ts | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/test/lib/browsers/base.ts b/test/lib/browsers/base.ts index 6a0d27c5a3cf..f76548bd3bce 100644 --- a/test/lib/browsers/base.ts +++ b/test/lib/browsers/base.ts @@ -52,9 +52,7 @@ export class BrowserInterface { moveTo(): BrowserInterface { return this } - waitForElementByCss(selector: string, timeout?: number): BrowserInterface { - return this - } + async waitForElementByCss(selector: string, timeout?: number) {} waitForCondition(snippet: string, timeout?: number): BrowserInterface { return this } diff --git a/test/lib/browsers/playwright.ts b/test/lib/browsers/playwright.ts index 68ee05ec6886..886520a5c5f5 100644 --- a/test/lib/browsers/playwright.ts +++ b/test/lib/browsers/playwright.ts @@ -335,7 +335,7 @@ export class Playwright extends BrowserInterface { await page.waitForLoadState() return this.wrapElement(el, selector) }) - }) + }) as unknown as Promise } waitForCondition(condition, timeout) { diff --git a/test/lib/browsers/selenium.ts b/test/lib/browsers/selenium.ts index e6e8c1aa001e..5309b6f1082c 100644 --- a/test/lib/browsers/selenium.ts +++ b/test/lib/browsers/selenium.ts @@ -323,7 +323,7 @@ export class Selenium extends BrowserInterface { waitForElementByCss(sel, timeout) { return this.chain(() => browser.wait(until.elementLocated(By.css(sel)), timeout) - ) + ) as unknown as Promise } waitForCondition(condition, timeout) { From 88549540fbefb2122151b492d63464c7c9014059 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 16 Dec 2022 13:49:57 +0100 Subject: [PATCH 8/9] Revert type changes and create a new ticket for it --- test/lib/browsers/base.ts | 5 ++++- test/lib/browsers/playwright.ts | 2 +- test/lib/browsers/selenium.ts | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/test/lib/browsers/base.ts b/test/lib/browsers/base.ts index f76548bd3bce..a3e603471bd8 100644 --- a/test/lib/browsers/base.ts +++ b/test/lib/browsers/base.ts @@ -52,7 +52,10 @@ export class BrowserInterface { moveTo(): BrowserInterface { return this } - async waitForElementByCss(selector: string, timeout?: number) {} + // TODO(NEXT-290): type this correctly as awaitable + waitForElementByCss(selector: string, timeout?: number): BrowserInterface { + return this + } waitForCondition(snippet: string, timeout?: number): BrowserInterface { return this } diff --git a/test/lib/browsers/playwright.ts b/test/lib/browsers/playwright.ts index 886520a5c5f5..68ee05ec6886 100644 --- a/test/lib/browsers/playwright.ts +++ b/test/lib/browsers/playwright.ts @@ -335,7 +335,7 @@ export class Playwright extends BrowserInterface { await page.waitForLoadState() return this.wrapElement(el, selector) }) - }) as unknown as Promise + }) } waitForCondition(condition, timeout) { diff --git a/test/lib/browsers/selenium.ts b/test/lib/browsers/selenium.ts index 5309b6f1082c..e6e8c1aa001e 100644 --- a/test/lib/browsers/selenium.ts +++ b/test/lib/browsers/selenium.ts @@ -323,7 +323,7 @@ export class Selenium extends BrowserInterface { waitForElementByCss(sel, timeout) { return this.chain(() => browser.wait(until.elementLocated(By.css(sel)), timeout) - ) as unknown as Promise + ) } waitForCondition(condition, timeout) { From 95b9ca83df2cbb1eeea96326d2fb890bd65456c7 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Fri, 16 Dec 2022 17:04:00 +0100 Subject: [PATCH 9/9] improve chaining in the tests --- .../navigation.test.ts | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts index 0c791bb0007d..90ba0b09a927 100644 --- a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts +++ b/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts @@ -22,8 +22,10 @@ describe('navigation between pages and app dir', () => { 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') - browser.elementById('link-to-pages').click() - await browser.waitForElementByCss('#pages-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') }) @@ -31,36 +33,38 @@ describe('navigation between pages and app dir', () => { 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') - browser.elementById('link-to-app').click() - await browser.waitForElementByCss('#app-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') - browser.elementById('link-to-app').click() - await browser.waitForElementByCss('#app-page') - browser.back() - await browser.waitForElementByCss('#pages-page') + 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') - browser.forward() - await browser.waitForElementByCss('#app-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') - browser.elementById('link-to-pages').click() - await browser.waitForElementByCss('#pages-page') - browser.back() - await browser.waitForElementByCss('#app-page') + 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') - browser.forward() - await browser.waitForElementByCss('#pages-page') + await browser.forward().waitForElementByCss('#pages-page') expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse() expect(await browser.elementById('pages-page').text()).toBe('Pages Page') })