Add tests for dynamic-routes

test/dynamic-routes.test.js

@@ -0,0 +1,51 @@
+import test from 'ava'
+import { resolve } from 'path'
+import fs from 'fs'
+import pify from 'pify'
+const readFile = pify(fs.readFile)
+
+// Init nuxt.js and create server listening on localhost:4000
+test.before('Init Nuxt.js', async t => {
+  const Nuxt = require('../')
+  const nuxt = new Nuxt({
+    rootDir: resolve(__dirname, 'fixtures/dynamic-routes'),
+    dev: false
+  })
+  await nuxt.build()
+})
+
+test('Check .nuxt/router.js', t => {
+  return readFile(resolve(__dirname, './fixtures/dynamic-routes/.nuxt/router.js'), 'utf-8')
+  .then((routerFile) => {
+    routerFile = routerFile.slice(
+      routerFile.indexOf('routes: ['),
+      -3
+    )
+    .replace('routes: [', '[')
+    .replace(/ _[0-9A-z]+,/g, ' "",')
+    let routes = eval('( ' + routerFile + ')') // eslint-disable-line no-eval
+    // pages/test/index.vue
+    t.is(routes[0].path, '/test')
+    t.is(routes[0].name, 'test')
+    // pages/parent.vue
+    t.is(routes[1].path, '/parent')
+    t.falsy(routes[1].name) // parent route has no name
+    // pages/parent/*.vue
+    t.is(routes[1].children.length, 3) // parent has 3 children
+    t.deepEqual(routes[1].children.map((r) => r.path), ['', 'teub', 'child'])
+    t.deepEqual(routes[1].children.map((r) => r.name), ['parent', 'parent-teub', 'parent-child'])
+    // pages/test/users.vue
+    t.is(routes[2].path, '/test/users')
+    t.falsy(routes[2].name) // parent route has no name
+    // pages/test/users/*.vue
+    t.is(routes[2].children.length, 3) // parent has 3 children
+    t.deepEqual(routes[2].children.map((r) => r.path), ['', ':id', ':index/teub'])
+    t.deepEqual(routes[2].children.map((r) => r.name), ['test-users', 'test-users-id', 'test-users-index-teub'])
+    // pages/_slug.vue
+    t.is(routes[3].path, '/:slug?')
+    t.is(routes[3].name, 'slug')
+    // pages/_key/_id.vue
+    t.is(routes[4].path, '/:key?/:id?')
+    t.is(routes[4].name, 'key-id')
+  })
+})

test/fixtures/dynamic-routes/README.md

@@ -1,185 +0,0 @@
-# Defining custom routes with Nuxt.js
-
-> Nuxt.js is based on `vue-router` and let you to defined custom routes easily :rocket:
-
-## Concept
-
-Nuxt.js generates automatically the `vue-router` configuration according to your file tree of `.vue` files inside the `pages/` directory.
-
-## Basic routes
-
-This file tree:
-
-```bash
-pages/
---| team/
------| index.vue
------| about.vue
---| index.vue
-```
-
-will automatically generate:
-
-```js
-router: {
-  routes: [
-    {
-      name: 'index',
-      path: '/',
-      component: 'pages/index.vue'
-    },
-    {
-      name: 'team',
-      path: '/team',
-      component: 'pages/team/index.vue'
-    },
-    {
-      name: 'team-about',
-      path: '/team/about',
-      component: 'pages/team/about.vue'
-    }
-  ]
-}
-```
-
-## Dynamic routes
-
-To define a dynamic route with a param, you need to define a `.vue` file **prefixed by an underscore**.
-
-This file tree:
-
-```bash
-pages/
---| users/
------| _id.vue
------| index.vue
-```
-
-will automatically generate:
-
-```js
-router: {
-  routes: [
-    {
-      name: 'users',
-      path: '/users',
-      component: 'pages/users/index.vue'
-    },
-    {
-      name: 'users-id',
-      path: '/users/:id',
-      component: 'pages/users/_id.vue'
-    }
-  ]
-}
-```
-
-### Additional feature: validate (optional)
-
-Nuxt.js lets you define a validator function inside your dynamic route component (In this example: `pages/users/_id.vue`).
-
-If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page.
-
-```js
-<script>
-export default {
-  validate ({ params }) {
-    return /^\d+$/.test(params.id)
-  }
-}
-</script>
-```
-
-## Nested Routes (children)
-
-To define a nested route, you need to create a `.vue` file with the **same name as the directory** which contain your children views.
-> Don't forget to put `<nuxt-child></nuxt-child>` inside your parent `.vue` file.
-
-This file tree:
-
-```bash
-pages/
---| users/
------| _id.vue
---| users.vue
-```
-
-will automatically generate:
-
-```js
-router: {
-  routes: [
-    {
-      path: '/users',
-      component: 'pages/users.vue',
-      children: [
-        {
-          path: ':id',
-          component: 'pages/users/_id.vue',
-          name: 'users-id'
-        }
-      ]
-    }
-  ]
-}
-```
-
-## Dynamic Nested Routes
-
-This file tree:
-
-```bash
-pages/
---| posts/
------| _slug/
---------| _name.vue
---------| comments.vue
------| _slug.vue
------| index.vue
---| posts.vue
-```
-
-will automatically generate:
-
-```js
-router: {
-  routes: [
-    {
-      path: '/posts',
-      component: 'pages/posts.vue',
-      children: [
-        {
-          path '',
-          component: 'pages/posts/index.vue',
-          name: 'posts'
-        },
-        {
-          path: ':slug',
-          component: 'pages/posts/_slug.vue',
-          children: [
-            {
-              path: 'comments',
-              component: 'pages/posts/_slug/comments.vue',
-              name: 'posts-slug-comments'
-            },
-            {
-              path: ':name',
-              component: 'pages/posts/_slug/_name.vue',
-              name: 'posts-slug-name'
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
-```
-
-## Demo
-
-```bash
-npm install
-npm start
-```
-
-Go to [http://localhost:3000](http://localhost:3000) and navigate through the pages.

test/fixtures/dynamic-routes/nuxt.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  build: {
-    vendor: ['axios']
-  }
-}

test/fixtures/dynamic-routes/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "nuxt-custom-routes",
-  "description": "",
-  "dependencies": {
-    "axios": "^0.15.2",
-    "nuxt": "latest"
-  },
-  "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start"
-  }
-}

test/fixtures/dynamic-routes/pages/test/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="container">
-    <h2>Users</h2>
-    <ul class="users">
-      <li v-for="user in users">
-        <nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  data () {
-    return axios.get('https://jsonplaceholder.typicode.com/users')
-    .then((res) => {
-      return { users: res.data }
-    })
-  }
-}
-</script>
-
-<style scoped>
-.container {
-  text-align: center;
-  margin-top: 100px;
-  font-family: sans-serif;
-}
-.users {
-  list-style-type: none;
-}
-.users li a {
-  display: inline-block;
-  width: 200px;
-  border: 1px #ddd solid;
-  padding: 10px;
-  text-align: left;
-  color: #222;
-  text-decoration: none;
-}
-.users li a:hover {
-  color: orange;
-}
-</style>

test/fixtures/dynamic-routes/pages/test/users/_id.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="user">
-    <h3>{{ name }}</h3>
-    <h4>@{{ username }}</h4>
-    <p>Email : {{ email }}</p>
-    <p><nuxt-link to="/">List of users</nuxt-link></p>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  validate ({ params }) {
-    return !isNaN(+params.id)
-  },
-  data ({ params, error }) {
-    return axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
-    .then((res) => res.data)
-    .catch(() => {
-      error({ message: 'User not found', statusCode: 404 })
-    })
-  }
-}
-</script>
-
-<style scoped>
-.user {
-  text-align: center;
-  margin-top: 100px;
-  font-family: sans-serif;
-}
-</style>