mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-27 08:02:01 +00:00
tests: Add CSR tests
This commit is contained in:
Atinux
parent
297b1a1434
commit
5edf9c4c95
157
test/basic.csr.test.js
Normal file
157
test/basic.csr.test.js
Normal file
@ -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()
|
||||
})
|
||||
@ -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"><p>Loading...</p></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()
|
||||
})
|
||||
@ -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
|
||||
3
test/fixtures/basic/middleware/error.js
vendored
Normal file
3
test/fixtures/basic/middleware/error.js
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
export default function ({ error }) {
|
||||
error({ message: 'Middleware Error', statusCode: 505 })
|
||||
}
|
||||
13
test/fixtures/basic/pages/error-midd.vue
vendored
Normal file
13
test/fixtures/basic/pages/error-midd.vue
vendored
Normal file
@ -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>
|
||||
5
test/fixtures/basic/pages/error.vue
vendored
5
test/fixtures/basic/pages/error.vue
vendored
@ -5,10 +5,7 @@
|
||||
<script>
|
||||
export default {
|
||||
asyncData({ req }) {
|
||||
// Not for nuxt generate
|
||||
if (req) {
|
||||
throw new Error('Error mouahahah')
|
||||
}
|
||||
throw new Error('Error mouahahah')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user