Nuxt/test/dev/basic.ssr.test.js

401 lines
13 KiB
JavaScript
Raw Normal View History

2018-04-18 15:50:49 +00:00
import consola from 'consola'
import { loadFixture, getPort, Nuxt, rp } from '../utils'
2018-03-16 19:52:17 +00:00
2018-03-18 23:41:14 +00:00
let port
2018-01-13 05:22:11 +00:00
const url = route => 'http://localhost:' + port + route
2016-12-09 17:51:19 +00:00
let nuxt = null
2018-03-18 19:31:32 +00:00
describe('basic ssr', () => {
beforeAll(async () => {
const options = await loadFixture('basic')
nuxt = new Nuxt(options)
await nuxt.ready()
2018-03-18 23:41:14 +00:00
port = await getPort()
await nuxt.server.listen(port, '0.0.0.0')
2018-03-18 23:41:14 +00:00
})
2018-03-18 19:31:32 +00:00
test('/stateless', async () => {
const { html } = await nuxt.server.renderRoute('/stateless')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>My component!</h1>')
2018-03-18 19:31:32 +00:00
})
2016-12-09 17:51:19 +00:00
test('/store-module', async () => {
const { html } = await nuxt.server.renderRoute('/store-module')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>mutated</h1>')
})
2018-03-18 19:31:32 +00:00
/*
** Example of testing via dom checking
*/
test('/css', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/css'))
2018-03-18 19:31:32 +00:00
const headHtml = window.document.head.innerHTML
2018-11-08 09:41:24 +00:00
expect(headHtml).toContain('color:red')
2018-03-18 19:31:32 +00:00
const element = window.document.querySelector('.red')
expect(element).not.toBe(null)
expect(element.textContent).toContain('This is red')
2018-03-18 19:31:32 +00:00
expect(element.className).toBe('red')
// t.is(window.getComputedStyle(element).color, 'red')
})
2017-11-21 07:38:12 +00:00
2018-03-18 19:31:32 +00:00
test('/postcss', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/css'))
const headHtml = window.document.head.innerHTML
expect(headHtml).toContain('color:red')
const element = window.document.querySelector('.red')
expect(element).not.toBe(null)
expect(element.textContent).toContain('This is red')
expect(element.className).toBe('red')
// t.is(window.getComputedStyle(element).color, 'red')
})
test('/postcss', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/css'))
2016-12-09 17:51:19 +00:00
2018-03-18 19:31:32 +00:00
const headHtml = window.document.head.innerHTML
2018-11-08 09:41:24 +00:00
expect(headHtml).toContain('background-color:#00f')
2017-03-25 23:53:50 +00:00
2018-03-18 19:31:32 +00:00
// const element = window.document.querySelector('div.red')
// t.is(window.getComputedStyle(element)['background-color'], 'blue')
2018-01-13 05:22:11 +00:00
})
2018-03-18 19:31:32 +00:00
test('/stateful', async () => {
const { html } = await nuxt.server.renderRoute('/stateful')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<div><p>The answer is 42</p></div>')
2018-03-18 19:31:32 +00:00
})
2018-03-18 19:31:32 +00:00
test('/store', async () => {
const { html } = await nuxt.server.renderRoute('/store')
expect(html).toContain('<h1>foo/bar/baz: Vuex Nested Modules</h1>')
expect(html).toContain('<h2>index/counter: 1</h2>')
expect(html).toContain('<h3>foo/blarg/getVal: 4</h3>')
expect(html).toContain('<h4>foo/bab/getBabVal: 10</h4>')
2018-03-18 19:31:32 +00:00
})
2018-03-18 19:31:32 +00:00
test('/head', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/head'))
2018-03-18 19:31:32 +00:00
expect(window.document.title).toBe('My title - Nuxt.js')
const html = window.document.querySelector('html').outerHTML
2018-11-08 09:41:24 +00:00
expect(html).toContain('<div><h1>I can haz meta tags</h1></div>')
2019-06-27 22:34:47 +00:00
expect(html).toContain('<script data-n-head="ssr" src="/body.js" data-body="true">')
2018-03-18 19:31:32 +00:00
const metas = window.document.getElementsByTagName('meta')
expect(metas[1].getAttribute('content')).toBe('my meta')
2018-04-18 15:50:49 +00:00
expect(consola.log).toHaveBeenCalledWith('Body script!')
expect(html).toContain('<html foo="baz" data-n-head="%7B%22foo%22:%7B%22ssr%22:%22baz%22%7D%7D">')
expect(html).toContain('<head bar="foo" data-n-head="%7B%22bar%22:%7B%22ssr%22:%22foo%22%7D%7D">')
expect(html).toContain('<body baz="bar" data-n-head="%7B%22baz%22:%7B%22ssr%22:%22bar%22%7D%7D">')
2018-03-18 19:31:32 +00:00
})
2016-12-09 17:51:19 +00:00
2018-03-18 19:31:32 +00:00
test('/async-data', async () => {
const { html } = await nuxt.server.renderRoute('/async-data')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<p>Nuxt.js</p>')
2018-03-18 19:31:32 +00:00
})
2016-12-09 17:51:19 +00:00
2018-03-18 19:31:32 +00:00
test('/await-async-data', async () => {
const { html } = await nuxt.server.renderRoute('/await-async-data')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<p>Await Nuxt.js</p>')
2018-03-18 19:31:32 +00:00
})
2016-12-27 15:31:25 +00:00
2018-03-18 19:31:32 +00:00
test('/callback-async-data', async () => {
const { html } = await nuxt.server.renderRoute('/callback-async-data')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<p>Callback Nuxt.js</p>')
2018-03-18 19:31:32 +00:00
})
2016-12-27 15:31:25 +00:00
2018-03-18 19:31:32 +00:00
test('/users/1', async () => {
const { html } = await nuxt.server.renderRoute('/users/1')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>User: 1</h1>')
2018-03-18 19:31:32 +00:00
})
2016-12-21 19:51:43 +00:00
2018-03-18 19:31:32 +00:00
test('/validate should display a 404', async () => {
const { html } = await nuxt.server.renderRoute('/validate')
2018-11-08 09:41:24 +00:00
expect(html).toContain('This page could not be found')
2018-03-18 19:31:32 +00:00
})
2016-12-20 17:26:46 +00:00
2018-08-25 09:42:00 +00:00
test('/validate-async should display a 404', async () => {
const { html } = await nuxt.server.renderRoute('/validate-async')
2018-11-08 09:41:24 +00:00
expect(html).toContain('This page could not be found')
2018-08-25 09:42:00 +00:00
})
2018-03-18 19:31:32 +00:00
test('/validate?valid=true', async () => {
const { html } = await nuxt.server.renderRoute('/validate?valid=true')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>I am valid</h1>')
2018-03-18 19:31:32 +00:00
})
2016-12-20 17:26:46 +00:00
2018-08-25 09:42:00 +00:00
test('/validate-async?valid=true', async () => {
const { html } = await nuxt.server.renderRoute('/validate-async?valid=true')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>I am valid</h1>')
2018-08-25 09:42:00 +00:00
})
test('/validate?error=403', async () => {
const { html, error } = await nuxt.server.renderRoute('/validate?error=403')
expect(error).toMatchObject({ statusCode: 403, message: 'Custom Error' })
2018-11-08 09:41:24 +00:00
expect(html).toContain('Custom Error')
})
test('/validate-async?error=503', async () => {
const { html, error } = await nuxt.server.renderRoute('/validate-async?error=503')
expect(error).toMatchObject({ statusCode: 503, message: 'Custom Error' })
2018-11-08 09:41:24 +00:00
expect(html).toContain('Custom Error')
})
test('/before-enter', async () => {
const { html } = await nuxt.server.renderRoute('/before-enter')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>Index page</h1>')
})
describe('/redirect', () => {
2018-03-18 19:31:32 +00:00
let _headers, _status
const renderContext = {
2018-03-18 19:31:32 +00:00
res: {
writeHead (status, headers) {
2018-03-18 19:31:32 +00:00
_status = status
_headers = headers
},
end () { }
2018-03-18 19:31:32 +00:00
}
}
test('/redirect', async () => {
const { html, redirected } = await nuxt.server.renderRoute('/redirect')
expect(html).toContain('<div id="__nuxt"></div>')
expect(html).not.toContain('window.__NUXT__')
expect(redirected.path === '/').toBe(true)
expect(redirected.status === 302).toBe(true)
})
test('/redirect -> check redirected source', async () => {
// there are no transition properties in jsdom, ignore the error log
const window = await nuxt.server.renderAndGetWindow(url('/redirect'))
const html = window.document.body.innerHTML
expect(html).toContain('<h1>Index page</h1>')
})
test('/redirect -> external link', async () => {
const { html } = await nuxt.server.renderRoute('/redirect-external', renderContext)
expect(_status).toBe(302)
expect(_headers.Location).toBe('https://nuxtjs.org/api/')
expect(html).toContain('<div data-server-rendered="true"></div>')
})
test('/redirect -> external link without trailing slash', async () => {
const { html } = await nuxt.server.renderRoute('/redirect-external-no-slash', renderContext)
expect(_status).toBe(302)
expect(_headers.Location).toBe('https://nuxtjs.org/api')
expect(html).toContain('<div data-server-rendered="true"></div>')
})
test('/redirect -> external link with root domain url', async () => {
const { html } = await nuxt.server.renderRoute('/redirect-external-root', renderContext)
expect(_status).toBe(302)
expect(_headers.Location).toBe('https://nuxtjs.org/')
expect(html).toContain('<div data-server-rendered="true"></div>')
2018-03-18 19:31:32 +00:00
})
})
2017-11-28 09:10:44 +00:00
2018-03-18 19:31:32 +00:00
test('/special-state -> check window.__NUXT__.test = true', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/special-state'))
2018-03-18 19:31:32 +00:00
expect(window.document.title).toBe('Nuxt.js')
expect(window.__NUXT__.test).toBe(true)
})
2017-07-27 14:50:24 +00:00
2018-03-18 19:31:32 +00:00
test('/error', async () => {
await expect(nuxt.server.renderRoute('/error', { req: {}, res: {} }))
2018-03-18 19:31:32 +00:00
.rejects.toThrow('Error mouahahah')
})
2016-12-21 14:03:37 +00:00
test('/error-string', async () => {
let error
try {
await nuxt.server.renderRoute('/error-string', { req: {}, res: {} })
} catch (e) {
error = e
}
await expect(error).toEqual('fetch error!')
})
test('/error-object', async () => {
let error
try {
await nuxt.server.renderRoute('/error-object', { req: {}, res: {} })
} catch (e) {
error = e
}
await expect(error).toEqual({ error: 'fetch error!' })
})
2018-03-18 19:31:32 +00:00
test('/error status code', async () => {
await expect(rp(url('/error'))).rejects.toMatchObject({
response: { statusCode: 500 }
2018-03-18 19:31:32 +00:00
})
})
2016-12-21 14:03:37 +00:00
2018-04-15 16:40:42 +00:00
test('/error json format error', async () => {
const opts = {
headers: {
accept: 'application/json'
}
2018-04-15 16:40:42 +00:00
}
await expect(rp(url('/error'), opts)).rejects.toMatchObject({
response: {
statusCode: 500,
2018-04-15 16:40:42 +00:00
headers: {
'content-type': 'text/json; charset=utf-8'
}
}
})
})
2018-03-18 19:31:32 +00:00
test('/error2', async () => {
const { html, error } = await nuxt.server.renderRoute('/error2')
2018-11-08 09:41:24 +00:00
expect(html).toContain('Custom error')
expect(error.message).toContain('Custom error')
expect(error.statusCode).toBe(500)
expect(error.customProp).toBe('ezpz')
2018-03-18 19:31:32 +00:00
})
2016-12-21 14:03:37 +00:00
2018-03-18 19:31:32 +00:00
test('/error2 status code', async () => {
await expect(rp(url('/error2'))).rejects.toMatchObject({
response: {
statusCode: 500,
body: expect.stringContaining('Custom error')
}
2018-03-18 19:31:32 +00:00
})
})
2016-12-20 18:25:51 +00:00
2018-03-18 19:31:32 +00:00
test('/error-midd', async () => {
await expect(rp(url('/error-midd'))).rejects.toMatchObject({ response: { statusCode: 505 } })
2018-03-18 19:31:32 +00:00
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/redirect-middleware', async () => {
2018-04-18 15:50:49 +00:00
await expect(rp(url('/redirect-middleware'))).resolves.toBeTruthy()
2018-03-18 19:31:32 +00:00
})
2017-05-16 13:12:30 +00:00
2018-03-18 19:31:32 +00:00
test('/redirect-name', async () => {
const { html, redirected } = await nuxt.server.renderRoute('/redirect-name')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<div id="__nuxt"></div>')
2018-03-18 19:31:32 +00:00
expect(redirected.path === '/stateless').toBe(true)
expect(redirected.status === 302).toBe(true)
})
2017-12-21 04:55:32 +00:00
test('/client-only', async () => {
const { html } = await nuxt.server.renderRoute('/client-only')
expect(html.includes(
'<p class="client-only-placeholder">Loading...</p>'
)).toBe(true)
})
test('/client-only (client-side)', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/client-only'))
const html = window.document.body.innerHTML
expect(html).toContain('Displayed only on client-side</h1>')
})
2018-03-18 19:31:32 +00:00
test('/no-ssr', async () => {
const { html } = await nuxt.server.renderRoute('/no-ssr')
2018-03-18 19:31:32 +00:00
expect(html.includes(
'<p class="no-ssr-placeholder">Loading...</p>'
2018-03-18 19:31:32 +00:00
)).toBe(true)
})
2017-08-24 10:46:30 +00:00
2018-03-18 19:31:32 +00:00
test('/no-ssr (client-side)', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/no-ssr'))
2018-03-18 19:31:32 +00:00
const html = window.document.body.innerHTML
2018-11-08 09:41:24 +00:00
expect(html).toContain('Displayed only on client-side</h1>')
expect(consola.warn).toHaveBeenCalledTimes(1)
expect(consola.warn).toHaveBeenCalledWith(
expect.stringContaining('<no-ssr> has been deprecated')
)
2018-03-18 19:31:32 +00:00
})
2017-08-24 10:46:30 +00:00
2018-03-18 19:31:32 +00:00
test('ETag Header', async () => {
const { headers: { etag } } = await rp(url('/stateless'))
2018-03-18 19:31:32 +00:00
// Verify functionality
const response = await rp(url('/stateless'), { headers: { 'If-None-Match': etag } })
await expect(response).toMatchObject({ statusCode: 304 })
2018-01-13 05:22:11 +00:00
})
2017-05-21 16:42:38 +00:00
2018-03-18 19:31:32 +00:00
test('/_nuxt/ should return 404', async () => {
await expect(rp(url('/_nuxt/')))
.rejects.toMatchObject({ response: { statusCode: 404 } })
2018-03-18 19:31:32 +00:00
})
2018-03-18 19:31:32 +00:00
test('/meta', async () => {
const { html } = await nuxt.server.renderRoute('/meta')
expect(/<pre>.*&quot;works&quot;: true.*<\/pre>/s.test(html)).toBe(true)
2018-03-18 19:31:32 +00:00
})
2017-11-02 17:07:33 +00:00
2018-03-18 19:31:32 +00:00
test('/fn-midd', async () => {
await expect(rp(url('/fn-midd')))
.rejects.toMatchObject({ response: { statusCode: 403 } })
2018-03-18 19:31:32 +00:00
})
2017-11-03 16:14:05 +00:00
2018-03-18 19:31:32 +00:00
test('/fn-midd?please=true', async () => {
const { html } = await nuxt.server.renderRoute('/fn-midd?please=true')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>Date:')
2018-03-18 19:31:32 +00:00
})
2017-11-03 16:14:05 +00:00
2018-03-18 19:31:32 +00:00
test('/router-guard', async () => {
const { html } = await nuxt.server.renderRoute('/router-guard')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<p>Nuxt.js</p>')
2018-03-18 19:31:32 +00:00
expect(html.includes('Router Guard')).toBe(false)
})
2018-03-18 19:31:32 +00:00
test('/jsx', async () => {
const { html } = await nuxt.server.renderRoute('/jsx')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>JSX Page</h1>')
2018-03-18 19:31:32 +00:00
})
2017-12-11 08:18:28 +00:00
2018-03-18 19:31:32 +00:00
test('/jsx-link', async () => {
const { html } = await nuxt.server.renderRoute('/jsx-link')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>JSX Link Page</h1>')
2018-03-18 19:31:32 +00:00
})
2018-01-18 12:10:23 +00:00
2018-03-18 19:31:32 +00:00
test('/js-link', async () => {
const { html } = await nuxt.server.renderRoute('/js-link')
2018-11-08 09:41:24 +00:00
expect(html).toContain('<h1>vue file is first-class</h1>')
2018-03-18 19:31:32 +00:00
})
test('/тест雨 (test non ascii route)', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/тест雨'))
const html = window.document.body.innerHTML
expect(html).toMatch('Hello unicode')
})
test('/custom (js layout)', async () => {
const window = await nuxt.server.renderAndGetWindow(url('/custom'))
const html = window.document.body.innerHTML
expect(html).toMatch('<h1>JS Layout</h1>')
expect(html).toMatch('<h2>custom page</h2>')
})
/* Testing symlinks functionality */
test('/symlink/symlinked', async () => {
const { html } = await nuxt.server.renderRoute('/symlink/symlinked')
expect(html).toContain('<h1>Symlinked page</h1>')
})
test('/symlink/deep/nested-symlinked', async () => {
const { html } = await nuxt.server.renderRoute('/symlink/deep/nested-symlinked')
expect(html).toContain('<h1>Nested symlink page</h1>')
})
2020-05-18 11:58:48 +00:00
test('/components', async () => {
const { html } = await nuxt.server.renderRoute('/components')
expect(html).toContain('Auto discovered component!')
})
2018-03-18 19:31:32 +00:00
// Close server and ask nuxt to stop listening to file changes
2018-03-30 09:20:16 +00:00
afterAll(async () => {
2018-03-18 19:31:32 +00:00
await nuxt.close()
})
2016-12-09 17:51:19 +00:00
})