Nuxt/test/e2e/basic.browser.test.js

333 lines
10 KiB
JavaScript
Raw Normal View History

2018-03-19 08:31:25 +00:00
import Browser from '../utils/browser'
import { loadFixture, getPort, Nuxt, waitFor } from '../utils'
2018-03-16 19:52:17 +00:00
2018-03-18 23:41:14 +00:00
let port
const browser = new Browser()
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-18 23:41:14 +00:00
describe('basic browser', () => {
2018-03-18 19:31:32 +00:00
beforeAll(async () => {
const config = await loadFixture('basic')
2018-03-18 23:41:14 +00:00
nuxt = new Nuxt(config)
await nuxt.ready()
2018-03-18 23:53:36 +00:00
port = await getPort()
await nuxt.server.listen(port, 'localhost')
2018-03-18 23:41:14 +00:00
2018-03-18 19:31:32 +00:00
await browser.start({
// slowMo: 50,
// headless: false
})
})
2018-03-18 19:31:32 +00:00
test('Open /', async () => {
page = await browser.page(url('/'))
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
})
test('/noloading', async () => {
const { hook } = await page.nuxt.navigate('/noloading', false)
await waitFor(nuxt.options.loading.throttle + 100)
let loading = await page.nuxt.loadingData()
expect(loading.show).toBe(true)
await hook
loading = await page.nuxt.loadingData()
expect(loading.show).toBe(true)
await page.waitForFunction(
`$nuxt.$loading.$data.show === false`
)
await page.waitForFunction(
`document.querySelector('p').innerText === 'true'`
)
})
2018-03-18 19:31:32 +00:00
test('/stateless', async () => {
const { hook } = await page.nuxt.navigate('/stateless', false)
2017-11-02 16:48:20 +00:00
2018-03-18 19:31:32 +00:00
await hook
expect(await page.$text('h1')).toBe('My component!')
})
2017-11-02 16:48:20 +00:00
test('/store-module', async () => {
await page.nuxt.navigate('/store-module')
expect(await page.$text('h1')).toBe('mutated')
})
2018-03-18 19:31:32 +00:00
test('/css', async () => {
await page.nuxt.navigate('/css')
2017-11-02 16:48:20 +00:00
expect(await page.$text('.red', true)).toEqual('This is red')
expect(await page.$eval('.red', (red) => {
const { color, backgroundColor } = window.getComputedStyle(red)
return { color, backgroundColor }
})).toEqual({
color: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(0, 0, 255)'
})
2018-03-18 19:31:32 +00:00
})
2017-11-02 16:48:20 +00:00
2018-03-18 23:41:14 +00:00
test.skip('/stateful', async () => {
const { hook } = await page.nuxt.navigate('/stateful')
2017-11-02 16:48:20 +00:00
2018-03-18 23:41:14 +00:00
await hook
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')
2017-11-02 16:48:20 +00:00
expect(await page.$text('h1')).toBe('foo/bar/baz: Vuex Nested Modules')
expect(await page.$text('h2')).toBe('index/counter: 1')
expect(await page.$text('h3')).toBe('foo/blarg/getVal: 4')
expect(await page.$text('h4')).toBe('foo/bab/getBabVal: 10')
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('/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')
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')
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')
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')
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')
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
test('/scroll-to-top with scrollToTop set to true', async () => {
const page = await browser.page(url('/scroll-to-top'))
await page.evaluate(() => window.scrollBy(0, window.innerHeight))
await page.nuxt.navigate('/scroll-to-top/scroll-to-top-true')
const pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBe(0)
page.close()
})
test('/scroll-to-top with scrollToTop set to false', async () => {
const page = await browser.page(url('/scroll-to-top'))
await page.evaluate(() => window.scrollBy(0, window.innerHeight))
await page.nuxt.navigate('/scroll-to-top/scroll-to-top-false')
const pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
page.close()
})
test('/scroll-to-top in the same page', async () => {
const page = await browser.page(url('/scroll-to-top'))
await page.evaluate(() => window.scrollBy(0, window.innerHeight))
await page.nuxt.navigate('/scroll-to-top?test=1')
const pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
page.close()
})
test('/scroll-to-top in the same page with watchQuery: true', async () => {
const page = await browser.page(url('/scroll-to-top/watch-query-true'))
await page.evaluate(() => window.scrollBy(0, window.innerHeight))
await page.nuxt.navigate('/scroll-to-top/watch-query-true?test=1')
let pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBe(0)
await page.nuxt.go(-1)
pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
page.close()
})
test('/scroll-to-top in the same page with watchQuery array', async () => {
const page = await browser.page(url('/scroll-to-top/watch-query-array'))
await page.evaluate(() => window.scrollBy(0, window.innerHeight))
await page.nuxt.navigate('/scroll-to-top/watch-query-array?other=1')
let pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
await page.nuxt.go(-1)
pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
await page.nuxt.navigate('/scroll-to-top/watch-query-array?test=1')
pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBe(0)
await page.nuxt.go(-1)
pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
page.close()
})
test('/scroll-to-top in the same page with watchQuery function', async () => {
const page = await browser.page(url('/scroll-to-top/watch-query-fn'))
await page.evaluate(() => window.scrollBy(0, window.innerHeight))
await page.nuxt.navigate('/scroll-to-top/watch-query-fn?other=1')
let pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
await page.nuxt.go(-1)
pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBeGreaterThan(0)
await page.nuxt.navigate('/scroll-to-top/watch-query-fn?test=1')
pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBe(0)
await page.nuxt.go(-1)
pageYOffset = await page.evaluate(() => window.pageYOffset)
expect(pageYOffset).toBe(0)
page.close()
})
2018-03-18 19:31:32 +00:00
test('/validate should display a 404', async () => {
await page.nuxt.navigate('/validate')
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-08-25 09:42:00 +00:00
test('/validate-async should display a 404', async () => {
await page.nuxt.navigate('/validate-async')
const error = await page.nuxt.errorData()
expect(error.statusCode).toBe(404)
expect(error.message).toBe('This page could not be found')
})
2018-03-18 19:31:32 +00:00
test('/validate?valid=true', async () => {
await page.nuxt.navigate('/validate?valid=true')
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-08-25 09:42:00 +00:00
test('/validate-async?valid=true', async () => {
await page.nuxt.navigate('/validate-async?valid=true')
expect(await page.$text('h1')).toBe('I am valid')
})
2018-03-18 19:31:32 +00:00
test('/redirect', async () => {
await page.nuxt.navigate('/redirect')
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')
2017-11-02 16:48:20 +00:00
expect(await page.nuxt.errorData()).toEqual({ message: 'Error mouahahah', statusCode: 500 })
2018-03-18 19:31:32 +00:00
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')
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', statusCode: 500, customProp: 'ezpz' })
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 () => {
await page.nuxt.navigate('/redirect-middleware')
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)
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')
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')
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')
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')
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')
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')
2018-03-18 19:31:32 +00:00
const p = await page.$text('p')
expect(p).toBe('Nuxt.js')
})
test('/refresh-page-data', async () => {
const page = await browser.page(url('/refresh-page-data'))
let h1 = await page.$text('h1')
expect(h1).toContain('Hello from server')
await page.evaluate($nuxt => $nuxt.refresh(), page.$nuxt)
h1 = await page.$text('h1')
expect(h1).toContain('Hello from client')
page.close()
})
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()
})
2018-03-18 23:41:14 +00:00
2018-03-30 09:20:16 +00:00
// Stop browser
afterAll(async () => {
2018-03-18 23:41:14 +00:00
await page.close()
await browser.close()
})
2017-11-02 16:48:20 +00:00
})