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

- Add test for navigating app -> pages - Add test for navigation pages -> 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`
vercel · Dec 21, 2022 · 2c70bc7 · 2c70bc7
1 parent f07f69d
commit 2c70bc7
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 0 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
@@ -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
   }