first commit

test/integration/src-dir-support/src/pages/[name]/[comment].js

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router'
+
+const Comment = ({ gipQuery }) => {
+  const router = useRouter()
+  const { query } = router
+
+  return (
+    <>
+      <p id={query.comment}>
+        I am {query.comment} on {query.name}
+      </p>
+      <span>gip {gipQuery && gipQuery.name}</span>
+    </>
+  )
+}
+
+Comment.getInitialProps = async ({ query }) => {
+  return { gipQuery: query }
+}
+
+export default Comment

test/integration/src-dir-support/src/pages/[name]/comments.js

@@ -0,0 +1,11 @@
+import { useRouter } from 'next/router'
+
+const Page = () => {
+  const router = useRouter()
+  const { query } = router
+  return <p>Show comments for {query.name} here</p>
+}
+
+Page.getInitialProps = () => ({})
+
+export default Page

test/integration/src-dir-support/src/pages/[name]/index.js

@@ -0,0 +1,11 @@
+import { useRouter } from 'next/router'
+
+const Page = () => {
+  const router = useRouter()
+  const { query } = router
+  return <p id={query.name}>This is {query.name}</p>
+}
+
+Page.getInitialProps = () => ({})
+
+export default Page

test/integration/src-dir-support/src/pages/another.js

@@ -0,0 +1 @@
+export default () => 'hello from another!'

test/integration/src-dir-support/src/pages/blog/[name]/comment/[id].js

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router'
+
+const Page = () => {
+  const router = useRouter()
+  const { name, id } = router.query
+
+  return (
+    <>
+      <p>
+        Blog post {name} comment {id || '(all)'}
+      </p>
+    </>
+  )
+}
+
+Page.getInitialProps = () => ({})
+
+export default Page

test/integration/src-dir-support/src/pages/index.js

@@ -0,0 +1,52 @@
+import Link from 'next/link'
+
+const Page = () => (
+  <div>
+    <h3>My blog</h3>
+    <Link href="/[post]" as="/post-1" id="view-post-1">
+      View post 1
+    </Link>
+    <br />
+    <Link
+      href="/[post]/comments"
+      as="/post-1/comments"
+      id="view-post-1-comments"
+    >
+      View post 1 comments
+    </Link>
+    <br />
+    <Link
+      href="/[post]/[comment]"
+      as="/post-1/comment-1"
+      id="view-post-1-comment-1"
+    >
+      View comment 1 on post 1
+    </Link>
+    <br />
+    <Link
+      href="/blog/[post]/comment/[id]"
+      as="/blog/321/comment/123"
+      id="view-nested-dynamic-cmnt"
+    >
+      View comment 123 on blog post 321
+    </Link>
+    <br />
+    <Link
+      href="/[post]?fromHome=true"
+      as="/post-1?fromHome=true"
+      id="view-post-1-with-query"
+    >
+      View post 1 with query
+    </Link>
+    <br />
+    <Link
+      href="/on-mount/[post]"
+      as="/on-mount/test-w-hash#item-400"
+      id="view-dynamic-with-hash"
+    >
+      View test with hash
+    </Link>
+  </div>
+)
+
+export default Page

test/integration/src-dir-support/src/pages/on-mount/[post].js

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router'
+
+export default () => {
+  const router = useRouter()
+  const { query } = router
+  return (
+    <>
+      <p>onmpost: {query.post || 'pending'}</p>
+      {Array.from({ length: 500 }, (x, i) => i + 1).map((i) => {
+        return (
+          <div key={`item-${i}`} id={`item-${i}`}>
+            {i}
+          </div>
+        )
+      })}
+    </>
+  )
+}

test/integration/src-dir-support/test/index.test.ts

@@ -0,0 +1,104 @@
+/* eslint-env jest */
+
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+import {
+  renderViaHTTP,
+  findPort,
+  launchApp,
+  killApp,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+
+let app
+let appPort
+const appDir = join(__dirname, '../')
+
+function runTests() {
+  it('should render normal route', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    expect(html).toMatch(/my blog/i)
+  })
+
+  it('should render another normal route', async () => {
+    const html = await renderViaHTTP(appPort, '/another')
+    expect(html).toMatch(/hello from another/)
+  })
+
+  it('should render dynamic page', async () => {
+    const html = await renderViaHTTP(appPort, '/post-1')
+    expect(html).toMatch(/this is.*?post-1/i)
+  })
+
+  it('should prioritize a non-dynamic page', async () => {
+    const html = await renderViaHTTP(appPort, '/post-1/comments')
+    expect(html).toMatch(/show comments for.*post-1.*here/i)
+  })
+
+  it('should render nested dynamic page', async () => {
+    const html = await renderViaHTTP(appPort, '/post-1/comment-1')
+    expect(html).toMatch(/i am.*comment-1.*on.*post-1/i)
+  })
+
+  it('should navigate to a dynamic page successfully', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/')
+      await browser.elementByCss('#view-post-1').click()
+      await browser.waitForElementByCss('p#post-1')
+
+      const text = await browser.elementByCss('p#post-1').text()
+      expect(text).toMatch(/this is.*?post-1/i)
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+
+  it('should navigate to a nested dynamic page successfully', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/')
+      await browser.elementByCss('#view-post-1-comment-1').click()
+      await browser.waitForElementByCss('p#comment-1')
+
+      const text = await browser.elementByCss('p#comment-1').text()
+      expect(text).toMatch(/i am.*comment-1.*on.*post-1/i)
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+
+  it('should pass params in getInitialProps during SSR', async () => {
+    const html = await renderViaHTTP(appPort, '/post-1/cmnt-1')
+    expect(html).toMatch(/gip.*post-1/i)
+  })
+}
+
+describe('Dynamic Routing', () => {
+  ;(process.env.TURBOPACK_BUILD ? describe.skip : describe)(
+    'development mode',
+    () => {
+      beforeAll(async () => {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+      })
+      afterAll(() => killApp(app))
+
+      runTests()
+    }
+  )
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      beforeAll(async () => {
+        await nextBuild(appDir)
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(() => killApp(app))
+
+      runTests()
+    }
+  )
+})