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')
})