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

jankaifer · web-flow · commit 2c70bc784cd7 · 2022-12-21T14:10:25.000Z
- Add test for navigating app -&gt; pages
- Add test for navigation pages -&gt; 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`
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
@@ -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>
+  )
+}
diff --git a/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx b/test/e2e/app-dir/interpolability-with-pages/app/layout.tsx
@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head />
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/interpolability-with-pages/navigation.test.ts 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
@@ -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
@@ -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>
+  )
+}
diff --git a/test/lib/browsers/base.ts b/test/lib/browsers/base.ts
@@ -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
   }

Original file line number	Diff line number	Diff line change
`@@ -77,15 +77,22 @@ export class BrowserInterface implements PromiseLike<any> {`
`77`	`77`	`moveTo(): BrowserInterface {`
`78`	`78`	`return this`
`79`	`79`	`}`
	`80`	`+ // TODO(NEXT-290): type this correctly as awaitable`
`80`	`81`	`waitForElementByCss(selector: string, timeout?: number): BrowserInterface {`
`81`	`82`	`return this`
`82`	`83`	`}`
`83`	`84`	`waitForCondition(snippet: string, timeout?: number): BrowserInterface {`
`84`	`85`	`return this`
`85`	`86`	`}`
	`87`	`+ /**`
	`88`	+ * Use browsers `go back` functionality.
	`89`	`+ */`
`86`	`90`	`back(): BrowserInterface {`
`87`	`91`	`return this`
`88`	`92`	`}`
	`93`	`+ /**`
	`94`	+ * Use browsers `go forward` functionality. Inverse of back.
	`95`	`+ */`
`89`	`96`	`forward(): BrowserInterface {`
`90`	`97`	`return this`
`91`	`98`	`}`