fix: trailingSlash and child routes not working (#8423)

packages/utils/src/route.js

@@ -80,15 +80,11 @@ function cleanChildrenRoutes (routes, isChild = false, routeNameSplitter = '-',
     }
     route.name = route.name.replace(regExpIndex, '')
     if (route.children) {
-      const indexRoutePath = trailingSlash === false ? '/' : ''
-      const defaultChildRoute = route.children.find(child => child.path === indexRoutePath)
+      const defaultChildRoute = route.children.find(child => child.path === '/' || child.path === '')
       const routeName = route.name
       if (defaultChildRoute) {
-        if (trailingSlash === false) {
-          defaultChildRoute.name = route.name
-        }
         route.children.forEach((child) => {
-          if (child.path !== indexRoutePath) {
+          if (child.path !== defaultChildRoute.path) {
             const parts = child.path.split('/')
             parts[1] = parts[1].endsWith('?') ? parts[1].substr(0, parts[1].length - 1) : parts[1]
             child.path = parts.join('/')

packages/utils/test/__snapshots__/route.test.js.snap

@@ -27,16 +27,9 @@ Array [
     "path": "/parent/child/test",
   },
   Object {
-    "children": Array [
-      Object {
-        "chunkName": "pages/another_route/_id",
-        "component": "/some/nuxt/app/pages/another_route/_id.vue",
-        "name": "another_route-id",
-        "path": "",
-      },
-    ],
     "chunkName": "pages/another_route/_id",
     "component": "/some/nuxt/app/pages/another_route/_id.vue",
+    "name": "another_route-id",
     "path": "/another_route/:id?",
   },
   Object {
@@ -87,16 +80,9 @@ Array [
     "path": "/parent/child/test",
   },
   Object {
-    "children": Array [
-      Object {
-        "chunkName": "pages/another_route/_id",
-        "component": "\\\\\\\\\\\\\\\\some\\\\\\\\nuxt\\\\\\\\app\\\\\\\\pages\\\\\\\\another_route\\\\\\\\_id.vue",
-        "name": "another_route-id",
-        "path": "",
-      },
-    ],
     "chunkName": "pages/another_route/_id",
     "component": "\\\\\\\\\\\\\\\\some\\\\\\\\nuxt\\\\\\\\app\\\\\\\\pages\\\\\\\\another_route\\\\\\\\_id.vue",
+    "name": "another_route-id",
     "path": "/another_route/:id?",
   },
   Object {
@@ -159,17 +145,6 @@ Array [
     },
   },
   Object {
-    "children": Array [
-      Object {
-        "chunkName": "pages/another_route/_id",
-        "component": "/some/nuxt/app/pages/another_route/_id.vue",
-        "name": "another_route-id",
-        "path": "",
-        "pathToRegexpOptions": Object {
-          "strict": true,
-        },
-      },
-    ],
     "chunkName": "pages/another_route/_id",
     "component": "/some/nuxt/app/pages/another_route/_id.vue",
     "name": "another_route-id",
@@ -247,19 +222,9 @@ Array [
     },
   },
   Object {
-    "children": Array [
-      Object {
-        "chunkName": "pages/another_route/_id",
-        "component": "/some/nuxt/app/pages/another_route/_id.vue",
-        "name": "another_route-id",
-        "path": "",
-        "pathToRegexpOptions": Object {
-          "strict": true,
-        },
-      },
-    ],
     "chunkName": "pages/another_route/_id",
     "component": "/some/nuxt/app/pages/another_route/_id.vue",
+    "name": "another_route-id",
     "path": "/another_route/:id?",
     "pathToRegexpOptions": Object {
       "strict": true,

packages/utils/test/route.test.js

@@ -210,7 +210,6 @@ describe('util: route', () => {
       'pages/subpage/_param.vue',
       'pages/snake_case_route.vue',
       'pages/another_route/_id.vue',
-      'pages/another_route/_id.vue',
       'pages/parent/index.vue',
       'pages/parent/child/index.vue',
       'pages/parent/child/test.vue'

test/dev/trailing-slash.test.js

@@ -0,0 +1,92 @@
+import { loadFixture, getPort, Nuxt } from '../utils'
+
+function runTest (name, expectations) {
+  describe(name, () => {
+    let port
+    let nuxt = null
+
+    beforeAll(async () => {
+      const options = await loadFixture(name)
+      nuxt = new Nuxt(options)
+      await nuxt.ready()
+      port = await getPort()
+      await nuxt.server.listen(port, 'localhost')
+    })
+
+    for (const route in expectations) {
+      test(route, async () => {
+        const { html } = await nuxt.server.renderRoute(route)
+        for (const exp of expectations[route]) {
+          expect(html).toContain(exp)
+        }
+      })
+    }
+
+    afterAll(async () => {
+      await nuxt.close()
+    })
+  })
+}
+
+runTest('trailing-slash/with-true', {
+  '/': [
+    '[pages/index]'
+  ],
+  '/posts': [
+    'statusCode:404'
+  ],
+  '/posts/': [
+    '[pages/posts]',
+    '[pages/posts/index]'
+  ],
+  '/posts/foo': [
+    'statusCode:404'
+  ],
+  '/posts/foo/': [
+    '[pages/posts]',
+    '[pages/posts/_slug]'
+  ]
+})
+
+runTest('trailing-slash/with-false', {
+  '/': [
+    '[pages/index]'
+  ],
+  '/posts': [
+    '[pages/posts]'
+    // '[pages/posts/index]' // <--seems wired
+  ],
+  '/posts/': [
+    '[pages/posts]',
+    '[pages/posts/index]'
+  ],
+  '/posts/foo': [
+    '[pages/posts]',
+    '[pages/posts/_slug]'
+  ],
+  '/posts/foo/': [
+    'statusCode:404'
+  ]
+})
+
+runTest('trailing-slash/with-default', {
+  '/': [
+    '[pages/index]'
+  ],
+  '/posts': [
+    '[pages/posts]',
+    '[pages/posts/index]'
+  ],
+  '/posts/': [
+    '[pages/posts]',
+    '[pages/posts/index]'
+  ],
+  '/posts/foo': [
+    '[pages/posts]',
+    '[pages/posts/_slug]'
+  ],
+  '/posts/foo/': [
+    '[pages/posts]',
+    '[pages/posts/_slug]'
+  ]
+})

test/fixtures/trailing-slash/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    [pages/index]
+  </div>
+</template>

test/fixtures/trailing-slash/pages/posts.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    [pages/posts]
+    <nuxt-child />
+  </div>
+</template>

test/fixtures/trailing-slash/pages/posts/_slug.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    [pages/posts/_slug]
+  </div>
+</template>

test/fixtures/trailing-slash/pages/posts/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    [pages/posts/index]
+  </div>
+</template>

test/fixtures/trailing-slash/trailing-slash.test.js

@@ -0,0 +1,5 @@
+import { buildFixture } from '../../utils/build'
+
+buildFixture('trailing-slash/with-default')
+buildFixture('trailing-slash/with-true')
+buildFixture('trailing-slash/with-false')

test/fixtures/trailing-slash/with-default/nuxt.config.js

@@ -0,0 +1,9 @@
+import { resolve } from 'path'
+
+export default {
+  rootDir: __dirname,
+  srcDir: resolve(__dirname, '..'),
+  router: {
+    // trailingSlash: undefined
+  }
+}

test/fixtures/trailing-slash/with-false/nuxt.config.js

@@ -0,0 +1,9 @@
+import { resolve } from 'path'
+
+export default {
+  rootDir: __dirname,
+  srcDir: resolve(__dirname, '..'),
+  router: {
+    trailingSlash: false
+  }
+}

test/fixtures/trailing-slash/with-true/nuxt.config.js

@@ -0,0 +1,9 @@
+import { resolve } from 'path'
+
+export default {
+  rootDir: __dirname,
+  srcDir: resolve(__dirname, '..'),
+  router: {
+    trailingSlash: true
+  }
+}

test/utils/build.js

@@ -1,18 +1,12 @@
-import { loadFixture, Nuxt, Builder, BundleBuilder, listPaths, equalOrStartsWith } from './index'
+import { loadFixture, Nuxt, Builder, BundleBuilder } from './index'
 
-export const buildFixture = function (fixture, callback, hooks = []) {
-  const pathsBefore = {}
+export const buildFixture = function (fixture, callback, hooks = [], overrides) {
   let nuxt
 
   test(`Build ${fixture}`, async () => {
-    const config = await loadFixture(fixture)
+    const config = await loadFixture(fixture, overrides)
     nuxt = new Nuxt(config)
 
-    pathsBefore.root = listPaths(nuxt.options.rootDir)
-    if (nuxt.options.rootDir !== nuxt.options.srcDir) {
-      pathsBefore.src = listPaths(nuxt.options.srcDir)
-    }
-
     const buildDone = jest.fn()
     hooks.forEach(([hook, fn]) => nuxt.hook(hook, fn))
     nuxt.hook('build:done', buildDone)
@@ -24,17 +18,4 @@ export const buildFixture = function (fixture, callback, hooks = []) {
       callback(builder)
     }
   }, 120000)
-
-  test('Check changed files', () => {
-    expect.hasAssertions()
-
-    // When building Nuxt we only expect files to changed
-    // within the nuxt.options.buildDir
-    Object.keys(pathsBefore).forEach((key) => {
-      const paths = listPaths(nuxt.options[`${key}Dir`], pathsBefore[key])
-      paths.forEach((item) => {
-        expect(equalOrStartsWith(nuxt.options.buildDir, item.path)).toBe(true)
-      })
-    })
-  })
 }