Nuxt/test/basic.csr.test.js

241 lines
6.1 KiB
JavaScript
Raw Normal View History

2017-11-02 16:48:20 +00:00
import { resolve } from 'path'
2018-03-16 19:52:17 +00:00
import { Nuxt, Builder } from '..'
2018-03-16 19:52:17 +00:00
2017-11-02 16:48:20 +00:00
import * as browser from './helpers/browser'
const port = 4003
2018-01-13 05:22:11 +00:00
const url = route => 'http://localhost:' + port + route
2017-11-02 16:48:20 +00:00
let nuxt = null
let page = null
2018-03-17 10:17:37 +00:00
const waitFor = ms => new Promise(resolve => setTimeout(resolve, ms || 0))
2018-03-18 19:31:32 +00:00
describe('basic csr', () => {
// Init nuxt.js and create server listening on localhost:4003
beforeAll(async () => {
const options = {
rootDir: resolve(__dirname, 'fixtures/basic'),
buildDir: '.nuxt-csr',
dev: true,
build: {
stats: false
2017-11-02 16:48:20 +00:00
}
}
nuxt = new Nuxt(options)
2018-03-18 19:31:32 +00:00
new Builder(nuxt).build()
await nuxt.listen(port, 'localhost')
2018-03-18 19:31:32 +00:00
}, 30000)
test('Start browser', async () => {
expect.assertions(0) // suppress 'no assertions' warning
await browser.start({
// slowMo: 50,
// headless: false
})
})
2018-03-18 19:31:32 +00:00
test('Open /', async () => {
page = await browser.page(url('/'))
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('Index page')
2017-11-02 16:48:20 +00:00
})
2018-03-18 19:31:32 +00:00
test('/stateless', async () => {
const { hook } = await page.nuxt.navigate('/stateless', false)
const loading = await page.nuxt.loadingData()
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(loading.show).toBe(true)
await hook
expect(await page.$text('h1')).toBe('My component!')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/css', async () => {
await page.nuxt.navigate('/css')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('.red')).toBe('This is red')
expect(await page.$eval('.red', red => window.getComputedStyle(red).color)).toBe('rgb(255, 0, 0)')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/stateful', async () => {
await page.nuxt.navigate('/stateful')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('p')).toBe('The answer is 42')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/store', async () => {
await page.nuxt.navigate('/store')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('Vuex Nested Modules')
expect(await page.$text('p')).toBe('1')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/head', async () => {
const msg = new Promise(resolve =>
page.on('console', msg => resolve(msg.text()))
)
await page.nuxt.navigate('/head')
const metas = await page.$$attr('meta', 'content')
await waitFor(1000)
expect(await msg).toBe('Body script!')
expect(await page.title()).toBe('My title - Nuxt.js')
expect(await page.$text('h1')).toBe('I can haz meta tags')
expect(metas[0]).toBe('my meta')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/async-data', async () => {
await page.nuxt.navigate('/async-data')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('p')).toBe('Nuxt.js')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/await-async-data', async () => {
await page.nuxt.navigate('/await-async-data')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('p')).toBe('Await Nuxt.js')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/callback-async-data', async () => {
await page.nuxt.navigate('/callback-async-data')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('p')).toBe('Callback Nuxt.js')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/users/1', async () => {
await page.nuxt.navigate('/users/1')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('User: 1')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/validate should display a 404', async () => {
await page.nuxt.navigate('/validate')
await waitFor(1000)
2018-03-17 10:17:37 +00:00
2018-03-18 19:31:32 +00:00
const error = await page.nuxt.errorData()
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(error.statusCode).toBe(404)
expect(error.message).toBe('This page could not be found')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/validate?valid=true', async () => {
await page.nuxt.navigate('/validate?valid=true')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('I am valid')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/redirect', async () => {
await page.nuxt.navigate('/redirect')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('Index page')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/error', async () => {
await page.nuxt.navigate('/error')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.nuxt.errorData()).toEqual({ statusCode: 500 })
expect(await page.$text('.title')).toBe('Error mouahahah')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/error2', async () => {
await page.nuxt.navigate('/error2')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('.title')).toBe('Custom error')
expect(await page.nuxt.errorData()).toEqual({ message: 'Custom error' })
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/redirect-middleware', async () => {
await page.nuxt.navigate('/redirect-middleware')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('Index page')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/redirect-external', async () => {
// New page for redirecting to external link.
const page = await browser.page(url('/'))
2018-03-17 10:17:37 +00:00
2018-03-18 19:31:32 +00:00
await page.nuxt.navigate('/redirect-external', false)
await waitFor(1000)
2018-03-17 10:17:37 +00:00
2018-03-18 19:31:32 +00:00
await page.waitForFunction(
() => window.location.href === 'https://nuxtjs.org/'
)
page.close()
})
2017-11-28 09:10:44 +00:00
2018-03-18 19:31:32 +00:00
test('/redirect-name', async () => {
await page.nuxt.navigate('/redirect-name')
await waitFor(1000)
2017-12-21 04:55:32 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('My component!')
})
2017-12-21 04:55:32 +00:00
2018-03-18 19:31:32 +00:00
test('/no-ssr', async () => {
await page.nuxt.navigate('/no-ssr')
await waitFor(1000)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('h1')).toBe('Displayed only on client-side')
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
test('/meta', async () => {
await page.nuxt.navigate('/meta')
await waitFor(1000)
2017-11-02 17:07:33 +00:00
2018-03-18 19:31:32 +00:00
const state = await page.nuxt.storeState()
expect(state.meta).toEqual([{ works: true }])
})
2017-11-02 17:07:33 +00:00
2018-03-18 19:31:32 +00:00
test('/fn-midd', async () => {
await page.nuxt.navigate('/fn-midd')
await waitFor(1000)
2017-11-03 16:14:05 +00:00
2018-03-18 19:31:32 +00:00
expect(await page.$text('.title')).toBe('You need to ask the permission')
expect(await page.nuxt.errorData()).toEqual({
message: 'You need to ask the permission',
statusCode: 403
})
2018-01-13 05:22:11 +00:00
})
2017-11-03 16:14:05 +00:00
2018-03-18 19:31:32 +00:00
test('/fn-midd?please=true', async () => {
await page.nuxt.navigate('/fn-midd?please=true')
await waitFor(1000)
2017-11-03 16:14:05 +00:00
2018-03-18 19:31:32 +00:00
const h1 = await page.$text('h1')
expect(h1.includes('Date:')).toBe(true)
})
2017-11-03 16:14:05 +00:00
2018-03-18 19:31:32 +00:00
test('/router-guard', async () => {
await page.nuxt.navigate('/router-guard')
await waitFor(1000)
2018-03-18 19:31:32 +00:00
const p = await page.$text('p')
expect(p).toBe('Nuxt.js')
})
2018-03-18 19:31:32 +00:00
test('Stop browser', async () => {
process.on('unhandledRejection', () => { })
await browser.stop()
})
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
// Close server and ask nuxt to stop listening to file changes
test('Closing server and nuxt.js', async () => {
await nuxt.close()
})
2017-11-02 16:48:20 +00:00
})