tests: Add CSR tests

test/basic.csr.test.js

@@ -0,0 +1,157 @@
+import test from 'ava'
+import { resolve } from 'path'
+import { Nuxt, Builder } from '../index'
+import * as browser from './helpers/browser'
+
+const port = 4003
+const url = (route) => 'http://localhost:' + port + route
+
+let nuxt = null
+let page = null
+
+// Init nuxt.js and create server listening on localhost:4003
+test.before('Init Nuxt.js', async t => {
+  const options = {
+    rootDir: resolve(__dirname, 'fixtures/basic'),
+    dev: false,
+    head: {
+      titleTemplate(titleChunk) {
+        return titleChunk ? `${titleChunk} - Nuxt.js` : 'Nuxt.js'
+      }
+    }
+  }
+  nuxt = new Nuxt(options)
+  await new Builder(nuxt).build()
+
+  await nuxt.listen(port, 'localhost')
+})
+
+test.before('Start browser', async t => {
+  await browser.start({
+    // slowMo: 50,
+    // headless: false
+  })
+})
+
+test('Open /', async t => {
+  page = await browser.page(url('/'))
+
+  t.is(await page.$text('h1'), 'Index page')
+})
+
+test('/stateless', async t => {
+  await page.nuxt.navigate('/stateless')
+  const loading = await page.nuxt.loadingData()
+
+  t.is(loading.show, true)
+  await page.nuxt.waitForNavigation()
+  t.is(await page.$text('h1'), 'My component!')
+})
+
+test('/css', async t => {
+  await page.nuxt.navigate('/css', true)
+
+  t.is(await page.$text('.red'), 'This is red')
+  t.is(await page.$eval('.red', (red) => window.getComputedStyle(red).color), 'rgb(255, 0, 0)')
+})
+
+test('/stateful', async t => {
+  await page.nuxt.navigate('/stateful', true)
+
+  t.is(await page.$text('p'), 'The answer is 42')
+})
+
+test('/store', async t => {
+  await page.nuxt.navigate('/store', true)
+
+  t.is(await page.$text('h1'), 'Vuex Nested Modules')
+  t.is(await page.$text('p'), '1')
+})
+
+test('/head', async t => {
+  await page.nuxt.navigate('/head', true)
+  const metas = await page.$$attr('meta', 'content')
+
+  t.is(await page.title(), 'My title - Nuxt.js')
+  t.is(await page.$text('h1'), 'I can haz meta tags')
+  t.is(metas[0], 'my meta')
+})
+
+test('/async-data', async t => {
+  await page.nuxt.navigate('/async-data', true)
+
+  t.is(await page.$text('p'), 'Nuxt.js')
+})
+
+test('/await-async-data', async t => {
+  await page.nuxt.navigate('/await-async-data', true)
+
+  t.is(await page.$text('p'), 'Await Nuxt.js')
+})
+
+test('/callback-async-data', async t => {
+  await page.nuxt.navigate('/callback-async-data', true)
+
+  t.is(await page.$text('p'), 'Callback Nuxt.js')
+})
+
+test('/users/1', async t => {
+  await page.nuxt.navigate('/users/1', true)
+
+  t.is(await page.$text('h1'), 'User: 1')
+})
+
+test('/validate should display a 404', async t => {
+  await page.nuxt.navigate('/validate', true)
+  const error = await page.nuxt.errorData()
+
+  t.is(error.statusCode, 404)
+  t.is(error.message, 'This page could not be found')
+})
+
+test('/validate?valid=true', async t => {
+  await page.nuxt.navigate('/validate?valid=true', true)
+
+  t.is(await page.$text('h1'), 'I am valid')
+})
+
+test('/redirect', async t => {
+  await page.nuxt.navigate('/redirect', true)
+
+  t.is(await page.$text('h1'), 'Index page')
+})
+
+test('/error', async t => {
+  await page.nuxt.navigate('/error', true)
+
+  t.deepEqual(await page.nuxt.errorData(), { statusCode: 500 })
+  t.is(await page.$text('.title'), 'Error mouahahah')
+})
+
+test('/error2', async t => {
+  await page.nuxt.navigate('/error2', true)
+
+  t.is(await page.$text('.title'), 'Custom error')
+  t.deepEqual(await page.nuxt.errorData(), { message: 'Custom error' })
+})
+
+test('/redirect2', async t => {
+  await page.nuxt.navigate('/redirect2', true)
+
+  t.is(await page.$text('h1'), 'Index page')
+})
+
+test('/no-ssr', async t => {
+  await page.nuxt.navigate('/no-ssr', true)
+
+  t.is(await page.$text('h1'), 'Displayed only on client-side')
+})
+
+// Close server and ask nuxt to stop listening to file changes
+test.after('Closing server and nuxt.js', t => {
+  nuxt.close()
+})
+
+test.after('Stop browser', async t => {
+  await browser.stop()
+})

test/basic.dom.test.js

@@ -1,200 +0,0 @@
-import test from 'ava'
-import { resolve } from 'path'
-import { Nuxt, Builder } from '../index'
-import * as browser from './helpers/browser'
-
-const port = 4003
-const url = (route) => 'http://localhost:' + port + route
-
-let nuxt = null
-
-// Init nuxt.js and create server listening on localhost:4003
-test.before('Init Nuxt.js', async t => {
-  const options = {
-    rootDir: resolve(__dirname, 'fixtures/basic'),
-    dev: false,
-    head: {
-      titleTemplate(titleChunk) {
-        return titleChunk ? `${titleChunk} - Nuxt.js` : 'Nuxt.js'
-      }
-    }
-  }
-  nuxt = new Nuxt(options)
-  await new Builder(nuxt).build()
-
-  await nuxt.listen(port, 'localhost')
-})
-
-test.before('Start browser', async t => {
-  await browser.start()
-})
-
-test('/stateless', async t => {
-  const page = await browser.page(url('/stateless'))
-  const loading = await page.nuxt.loadingData()
-
-  t.is(await page.title(), 'Nuxt.js')
-  t.is(await page.$text('h1'), 'My component!')
-  t.is(loading.show, false)
-  t.is(loading.percent, 0)
-  await page.close()
-})
-
-test('/css', async t => {
-  const page = await browser.page(url('/css'))
-  t.is(await page.$eval('.red', (red) => red.textContent), 'This is red')
-  t.is(await page.$eval('.red', (red) => window.getComputedStyle(red).color), 'rgb(255, 0, 0)')
-  await page.close()
-})
-
-test('/stateful', async t => {
-  const page = await browser.page(url('/stateful'))
-  const html = await page.html()
-  t.true(html.includes('<div><p>The answer is 42</p></div>'))
-  await page.close()
-})
-
-// test('/store', async t => {
-//   const { html } = await nuxt.renderRoute('/store')
-//   t.true(html.includes('<h1>Vuex Nested Modules</h1>'))
-//   t.true(html.includes('<p>1</p>'))
-// })
-
-// test('/head', async t => {
-//   const window = await nuxt.renderAndGetWindow(url('/head'), { virtualConsole: false })
-//   const html = window.document.body.innerHTML
-//   const metas = window.document.getElementsByTagName('meta')
-//   t.is(window.document.title, 'My title - Nuxt.js')
-//   t.is(metas[0].getAttribute('content'), 'my meta')
-//   t.true(html.includes('<div><h1>I can haz meta tags</h1></div>'))
-// })
-
-// test('/async-data', async t => {
-//   const { html } = await nuxt.renderRoute('/async-data')
-//   t.true(html.includes('<p>Nuxt.js</p>'))
-// })
-
-// test('/await-async-data', async t => {
-//   const { html } = await nuxt.renderRoute('/await-async-data')
-//   t.true(html.includes('<p>Await Nuxt.js</p>'))
-// })
-
-// test('/callback-async-data', async t => {
-//   const { html } = await nuxt.renderRoute('/callback-async-data')
-//   t.true(html.includes('<p>Callback Nuxt.js</p>'))
-// })
-
-// test('/users/1', async t => {
-//   const { html } = await nuxt.renderRoute('/users/1')
-//   t.true(html.includes('<h1>User: 1</h1>'))
-// })
-
-// test('/validate should display a 404', async t => {
-//   const { html } = await nuxt.renderRoute('/validate')
-//   t.true(html.includes('This page could not be found'))
-// })
-
-// test('/validate?valid=true', async t => {
-//   const { html } = await nuxt.renderRoute('/validate?valid=true')
-//   t.true(html.includes('<h1>I am valid</h1>'))
-// })
-
-// test('/redirect', async t => {
-//   const { html, redirected } = await nuxt.renderRoute('/redirect')
-//   t.true(html.includes('<div id="__nuxt"></div>'))
-//   t.true(redirected.path === '/')
-//   t.true(redirected.status === 302)
-// })
-
-// test('/redirect -> check redirected source', async t => {
-//   const window = await nuxt.renderAndGetWindow(url('/redirect'))
-//   const html = window.document.body.innerHTML
-//   t.true(html.includes('<h1>Index page</h1>'))
-// })
-
-// test('/special-state -> check window.__NUXT__.test = true', async t => {
-//   const window = await nuxt.renderAndGetWindow(url('/special-state'))
-//   t.is(window.document.title, 'Nuxt.js')
-//   t.is(window.__NUXT__.test, true)
-// })
-
-// test('/error', async t => {
-//   try {
-//     await nuxt.renderRoute('/error', { req: {}, res: {} })
-//   } catch (err) {
-//     t.true(err.message.includes('Error mouahahah'))
-//   }
-// })
-
-// test('/error status code', async t => {
-//   try {
-//     await rp(url('/error'))
-//   } catch (err) {
-//     t.true(err.statusCode === 500)
-//     t.true(err.response.body.includes('An error occurred in the application and your page could not be served'))
-//   }
-// })
-
-// test('/error2', async t => {
-//   const { html, error } = await nuxt.renderRoute('/error2')
-//   t.true(html.includes('Custom error'))
-//   t.true(error.message.includes('Custom error'))
-//   t.true(error.statusCode === undefined)
-// })
-
-// test('/error2 status code', async t => {
-//   try {
-//     await rp(url('/error2'))
-//   } catch (err) {
-//     t.is(err.statusCode, 500)
-//     t.true(err.response.body.includes('Custom error'))
-//   }
-// })
-
-// test('/redirect2', async t => {
-//   stdMocks.use()
-//   await rp(url('/redirect2')) // Should console.error
-//   stdMocks.restore()
-//   const output = stdMocks.flush()
-//   // Don't display error since redirect returns a noopApp
-//   t.true(output.stderr.length === 0)
-// })
-
-// test('/no-ssr', async t => {
-//   const { html } = await nuxt.renderRoute('/no-ssr')
-//   t.true(html.includes('<div class="no-ssr-placeholder">&lt;p&gt;Loading...&lt;/p&gt;</div>'))
-// })
-
-// test('/no-ssr (client-side)', async t => {
-//   const window = await nuxt.renderAndGetWindow(url('/no-ssr'))
-//   const html = window.document.body.innerHTML
-//   t.true(html.includes('Displayed only on client-side</h1>'))
-// })
-
-// test('ETag Header', async t => {
-//   const { headers: { etag } } = await rp(url('/stateless'), { resolveWithFullResponse: true })
-//   // Validate etag
-//   t.regex(etag, /W\/".*"$/)
-//   // Verify functionality
-//   const error = await t.throws(rp(url('/stateless'), { headers: { 'If-None-Match': etag } }))
-//   t.is(error.statusCode, 304)
-// })
-
-// test('/_nuxt/server-bundle.json should return 404', async t => {
-//   const err = await t.throws(rp(url('/_nuxt/server-bundle.json'), { resolveWithFullResponse: true }))
-//   t.is(err.statusCode, 404)
-// })
-
-// test('/_nuxt/ should return 404', async t => {
-//   const err = await t.throws(rp(url('/_nuxt/'), { resolveWithFullResponse: true }))
-//   t.is(err.statusCode, 404)
-// })
-
-// Close server and ask nuxt to stop listening to file changes
-test.after('Closing server and nuxt.js', t => {
-  nuxt.close()
-})
-
-test.after('Stop browser', async t => {
-  await browser.stop()
-})

test/basic.ssr.test.js

@@ -145,9 +145,23 @@ test('/error2 status code', async t => {
   }
 })
 
+test('/error-midd', async t => {
+  stdMocks.use()
+  try {
+    await rp(url('/error-midd'))
+  } catch (err) {
+    stdMocks.restore()
+    t.is(err.statusCode, 505)
+    t.true(err.response.body.includes('Middleware Error'))
+    const output = stdMocks.flush()
+    // Don't display error since redirect returns a noopApp
+    t.true(output.stderr.length === 0)
+  }
+})
+
 test('/redirect2', async t => {
   stdMocks.use()
-  await rp(url('/redirect2')) // Should console.error
+  await rp(url('/redirect2')) // Should not console.error
   stdMocks.restore()
   const output = stdMocks.flush()
   // Don't display error since redirect returns a noopApp

test/fixtures/basic/middleware/error.js

@@ -0,0 +1,3 @@
+export default function ({ error }) {
+  error({ message: 'Middleware Error', statusCode: 505 })
+}

test/fixtures/basic/pages/error-midd.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>Error page midd</h1>
+</template>
+
+<script>
+export default {
+  middleware: 'error',
+  asyncData() {
+    console.log('Async data error-midd.vue') // eslint-disable-line no-console
+    return {}
+  }
+}
+</script>

test/fixtures/basic/pages/error.vue

@@ -5,10 +5,7 @@
 <script>
 export default {
   asyncData({ req }) {
-    // Not for nuxt generate
+    throw new Error('Error mouahahah')
-    if (req) {
-      throw new Error('Error mouahahah')
-    }
   }
 }
 </script>