Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-06 21:10:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: Use routeChanged for client-side tests

Browse Source
This commit is contained in:
Atinux 2017-11-07 16:26:15 +01:00
parent 932fbfddfd
commit 1e3120b60f
3 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
test/basic.csr.test.js
View File

@ -40,29 +40,29 @@ test('Open /', async t => {
}) })
test('/stateless', async t => { test('/stateless', async t => {
await page.nuxt.navigate('/stateless') const { hook } = await page.nuxt.navigate('/stateless', false)
const loading = await page.nuxt.loadingData() const loading = await page.nuxt.loadingData()
t.is(loading.show, true) t.is(loading.show, true)
await page.nuxt.waitForNavigation() await hook
t.is(await page.$text('h1'), 'My component!') t.is(await page.$text('h1'), 'My component!')
}) })
test('/css', async t => { test('/css', async t => {
await page.nuxt.navigate('/css', true) await page.nuxt.navigate('/css')
t.is(await page.$text('.red'), 'This is red') t.is(await page.$text('.red'), 'This is red')
t.is(await page.$eval('.red', (red) => window.getComputedStyle(red).color), 'rgb(255, 0, 0)') t.is(await page.$eval('.red', (red) => window.getComputedStyle(red).color), 'rgb(255, 0, 0)')
}) })
test('/stateful', async t => { test('/stateful', async t => {
await page.nuxt.navigate('/stateful', true) await page.nuxt.navigate('/stateful')
t.is(await page.$text('p'), 'The answer is 42') t.is(await page.$text('p'), 'The answer is 42')
}) })
test('/store', async t => { test('/store', async t => {
await page.nuxt.navigate('/store', true) await page.nuxt.navigate('/store')
t.is(await page.$text('h1'), 'Vuex Nested Modules') t.is(await page.$text('h1'), 'Vuex Nested Modules')
t.is(await page.$text('p'), '1') t.is(await page.$text('p'), '1')
@ -70,7 +70,7 @@ test('/store', async t => {
test('/head', async t => { test('/head', async t => {
const msg = new Promise((resolve) => page.on('console', (msg) => resolve(msg.text))) const msg = new Promise((resolve) => page.on('console', (msg) => resolve(msg.text)))
await page.nuxt.navigate('/head', true) await page.nuxt.navigate('/head')
const metas = await page.$$attr('meta', 'content') const metas = await page.$$attr('meta', 'content')
t.is(await msg, 'Body script!') t.is(await msg, 'Body script!')
@ -80,31 +80,31 @@ test('/head', async t => {
}) })
test('/async-data', async t => { test('/async-data', async t => {
await page.nuxt.navigate('/async-data', true) await page.nuxt.navigate('/async-data')
t.is(await page.$text('p'), 'Nuxt.js') t.is(await page.$text('p'), 'Nuxt.js')
}) })
test('/await-async-data', async t => { test('/await-async-data', async t => {
await page.nuxt.navigate('/await-async-data', true) await page.nuxt.navigate('/await-async-data')
t.is(await page.$text('p'), 'Await Nuxt.js') t.is(await page.$text('p'), 'Await Nuxt.js')
}) })
test('/callback-async-data', async t => { test('/callback-async-data', async t => {
await page.nuxt.navigate('/callback-async-data', true) await page.nuxt.navigate('/callback-async-data')
t.is(await page.$text('p'), 'Callback Nuxt.js') t.is(await page.$text('p'), 'Callback Nuxt.js')
}) })
test('/users/1', async t => { test('/users/1', async t => {
await page.nuxt.navigate('/users/1', true) await page.nuxt.navigate('/users/1')
t.is(await page.$text('h1'), 'User: 1') t.is(await page.$text('h1'), 'User: 1')
}) })
test('/validate should display a 404', async t => { test('/validate should display a 404', async t => {
await page.nuxt.navigate('/validate', true) await page.nuxt.navigate('/validate')
const error = await page.nuxt.errorData() const error = await page.nuxt.errorData()
t.is(error.statusCode, 404) t.is(error.statusCode, 404)
@ -112,59 +112,59 @@ test('/validate should display a 404', async t => {
}) })
test('/validate?valid=true', async t => { test('/validate?valid=true', async t => {
await page.nuxt.navigate('/validate?valid=true', true) await page.nuxt.navigate('/validate?valid=true')
t.is(await page.$text('h1'), 'I am valid') t.is(await page.$text('h1'), 'I am valid')
}) })
test('/redirect', async t => { test('/redirect', async t => {
await page.nuxt.navigate('/redirect', true) await page.nuxt.navigate('/redirect')
t.is(await page.$text('h1'), 'Index page') t.is(await page.$text('h1'), 'Index page')
}) })
test('/error', async t => { test('/error', async t => {
await page.nuxt.navigate('/error', true) await page.nuxt.navigate('/error')
t.deepEqual(await page.nuxt.errorData(), { statusCode: 500 }) t.deepEqual(await page.nuxt.errorData(), { statusCode: 500 })
t.is(await page.$text('.title'), 'Error mouahahah') t.is(await page.$text('.title'), 'Error mouahahah')
}) })
test('/error2', async t => { test('/error2', async t => {
await page.nuxt.navigate('/error2', true) await page.nuxt.navigate('/error2')
t.is(await page.$text('.title'), 'Custom error') t.is(await page.$text('.title'), 'Custom error')
t.deepEqual(await page.nuxt.errorData(), { message: 'Custom error' }) t.deepEqual(await page.nuxt.errorData(), { message: 'Custom error' })
}) })
test('/redirect2', async t => { test('/redirect2', async t => {
await page.nuxt.navigate('/redirect2', true) await page.nuxt.navigate('/redirect2')
t.is(await page.$text('h1'), 'Index page') t.is(await page.$text('h1'), 'Index page')
}) })
test('/no-ssr', async t => { test('/no-ssr', async t => {
await page.nuxt.navigate('/no-ssr', true) await page.nuxt.navigate('/no-ssr')
t.is(await page.$text('h1'), 'Displayed only on client-side') t.is(await page.$text('h1'), 'Displayed only on client-side')
}) })
test('/meta', async t => { test('/meta', async t => {
await page.nuxt.navigate('/meta', true) await page.nuxt.navigate('/meta')
const state = await page.nuxt.storeState() const state = await page.nuxt.storeState()
t.deepEqual(state.meta, [{ works: true }]) t.deepEqual(state.meta, [{ works: true }])
}) })
test('/fn-midd', async t => { test('/fn-midd', async t => {
await page.nuxt.navigate('/fn-midd', true) await page.nuxt.navigate('/fn-midd')
t.is(await page.$text('.title'), 'You need to ask the permission') t.is(await page.$text('.title'), 'You need to ask the permission')
t.deepEqual(await page.nuxt.errorData(), { message: 'You need to ask the permission', statusCode: 403 }) t.deepEqual(await page.nuxt.errorData(), { message: 'You need to ask the permission', statusCode: 403 })
}) })
test('/fn-midd?please=true', async t => { test('/fn-midd?please=true', async t => {
await page.nuxt.navigate('/fn-midd?please=true', true) await page.nuxt.navigate('/fn-midd?please=true')
const h1 = await page.$text('h1') const h1 = await page.$text('h1')
t.true(h1.includes('Date:')) t.true(h1.includes('Date:'))

25
test/children.patch.test.js
View File

@ -40,10 +40,10 @@ test('Loading /patch and keep ', async t => {
}) })
test('Navigate to /patch/1', async t => { test('Navigate to /patch/1', async t => {
await page.nuxt.navigate('/patch/1') const { hook } = await page.nuxt.navigate('/patch/1', false)
const loading = await page.nuxt.loadingData() const loading = await page.nuxt.loadingData()
t.is(loading.show, true) t.is(loading.show, true)
await page.nuxt.waitForNavigation() await hook
const h2 = await page.$text('h2') const h2 = await page.$text('h2')
t.true(h2.includes('_id:')) t.true(h2.includes('_id:'))
@ -53,7 +53,7 @@ test('Navigate to /patch/1', async t => {
}) })
test('Navigate to /patch/2', async t => { test('Navigate to /patch/2', async t => {
await page.nuxt.navigate('/patch/2', true) await page.nuxt.navigate('/patch/2')
const date = await page.$text('[data-date-id]') const date = await page.$text('[data-date-id]')
t.is(await page.$text('h3'), 'Index') t.is(await page.$text('h3'), 'Index')
@ -63,28 +63,19 @@ test('Navigate to /patch/2', async t => {
}) })
test('Navigate to /patch/2?test=true', async t => { test('Navigate to /patch/2?test=true', async t => {
await page.nuxt.navigate('/patch/2?test=true', true) await page.nuxt.navigate('/patch/2?test=true')
t.is(dates.patch, await page.$text('[data-date-patch]')) t.is(dates.patch, await page.$text('[data-date-patch]'))
t.is(dates.id, await page.$text('[data-date-id]')) t.is(dates.id, await page.$text('[data-date-id]'))
}) })
test('Navigate to /patch/2#test', async t => { test('Navigate to /patch/2#test', async t => {
await page.nuxt.navigate('/patch/2#test', true) await page.nuxt.navigate('/patch/2#test')
t.is(dates.patch, await page.$text('[data-date-patch]')) t.is(dates.patch, await page.$text('[data-date-patch]'))
t.is(dates.id, await page.$text('[data-date-id]')) t.is(dates.id, await page.$text('[data-date-id]'))
}) })
test('Navigate to /patch/2/child', async t => { test('Navigate to /patch/2/child', async t => {
await page.nuxt.navigate('/patch/2/child', true) await page.nuxt.navigate('/patch/2/child')
dates.child = await page.$text('[data-date-child]')
t.is(dates.patch, await page.$text('[data-date-patch]'))
t.is(dates.id, await page.$text('[data-date-id]'))
t.true(+dates.child > +dates.id)
})
test('Navigate to /patch/2/child', async t => {
await page.nuxt.navigate('/patch/2/child', true)
dates.child = await page.$text('[data-date-child]') dates.child = await page.$text('[data-date-child]')
dates.slug = await page.$text('[data-date-child-slug]') dates.slug = await page.$text('[data-date-child-slug]')
@ -95,7 +86,7 @@ test('Navigate to /patch/2/child', async t => {
}) })
test('Navigate to /patch/2/child/1', async t => { test('Navigate to /patch/2/child/1', async t => {
await page.nuxt.navigate('/patch/2/child/1', true) await page.nuxt.navigate('/patch/2/child/1')
const date = await page.$text('[data-date-child-slug]') const date = await page.$text('[data-date-child-slug]')
t.is(dates.patch, await page.$text('[data-date-patch]')) t.is(dates.patch, await page.$text('[data-date-patch]'))
@ -106,7 +97,7 @@ test('Navigate to /patch/2/child/1', async t => {
}) })
test('Navigate to /patch/2/child/1?foo=bar', async t => { test('Navigate to /patch/2/child/1?foo=bar', async t => {
await page.nuxt.navigate('/patch/2/child/1?foo=bar', true) await page.nuxt.navigate('/patch/2/child/1?foo=bar')
t.is(dates.patch, await page.$text('[data-date-patch]')) t.is(dates.patch, await page.$text('[data-date-patch]'))
t.is(dates.id, await page.$text('[data-date-id]')) t.is(dates.id, await page.$text('[data-date-id]'))

14
test/helpers/browser.js
View File

@ -27,11 +27,14 @@ export async function page(url) {
page.$nuxt = await page.evaluateHandle('window.$nuxt') page.$nuxt = await page.evaluateHandle('window.$nuxt')
page.nuxt = { page.nuxt = {
async navigate(path, wait = false) { async navigate(path, waitEnd = true) {
const hook = page.evaluate(async () => {
await new Promise((resolve) => window.$nuxt.$once('routeChanged', resolve))
await new Promise((resolve) => setTimeout(resolve, 50))
})
await page.evaluate(($nuxt, path) => $nuxt.$router.push(path), page.$nuxt, path) await page.evaluate(($nuxt, path) => $nuxt.$router.push(path), page.$nuxt, path)
if (wait) { if (waitEnd) await hook
await this.waitForNavigation() return { hook }
}
}, },
routeData() { routeData() {
return page.evaluate(($nuxt) => { return page.evaluate(($nuxt) => {
@ -49,9 +52,6 @@ export async function page(url) {
}, },
storeState() { storeState() {
return page.evaluate(($nuxt) => $nuxt.$store.state, page.$nuxt) return page.evaluate(($nuxt) => $nuxt.$store.state, page.$nuxt)
},
waitForNavigation() {
return page.waitForFunction('window.$nuxt.$loading.$data.show === false')
} }
} }
return page return page