From 1e3120b60f25d0f491e2899e9290ca10c5a23dba Mon Sep 17 00:00:00 2001 From: Atinux Date: Tue, 7 Nov 2017 16:26:15 +0100 Subject: [PATCH] test: Use routeChanged for client-side tests --- test/basic.csr.test.js | 40 ++++++++++++++++++------------------- test/children.patch.test.js | 25 ++++++++--------------- test/helpers/browser.js | 14 ++++++------- 3 files changed, 35 insertions(+), 44 deletions(-) diff --git a/test/basic.csr.test.js b/test/basic.csr.test.js index 7955899218..da09e77a1b 100644 --- a/test/basic.csr.test.js +++ b/test/basic.csr.test.js @@ -40,29 +40,29 @@ test('Open /', 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() t.is(loading.show, true) - await page.nuxt.waitForNavigation() + await hook t.is(await page.$text('h1'), 'My component!') }) 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.$eval('.red', (red) => window.getComputedStyle(red).color), 'rgb(255, 0, 0)') }) 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') }) 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('p'), '1') @@ -70,7 +70,7 @@ test('/store', async t => { test('/head', async t => { 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') t.is(await msg, 'Body script!') @@ -80,31 +80,31 @@ test('/head', 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') }) 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') }) 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') }) 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') }) 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() t.is(error.statusCode, 404) @@ -112,59 +112,59 @@ test('/validate should display a 404', 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') }) test('/redirect', async t => { - await page.nuxt.navigate('/redirect', true) + await page.nuxt.navigate('/redirect') t.is(await page.$text('h1'), 'Index page') }) test('/error', async t => { - await page.nuxt.navigate('/error', true) + await page.nuxt.navigate('/error') 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) + await page.nuxt.navigate('/error2') 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) + await page.nuxt.navigate('/redirect2') t.is(await page.$text('h1'), 'Index page') }) 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') }) test('/meta', async t => { - await page.nuxt.navigate('/meta', true) + await page.nuxt.navigate('/meta') const state = await page.nuxt.storeState() t.deepEqual(state.meta, [{ works: true }]) }) 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.deepEqual(await page.nuxt.errorData(), { message: 'You need to ask the permission', statusCode: 403 }) }) 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') t.true(h1.includes('Date:')) diff --git a/test/children.patch.test.js b/test/children.patch.test.js index 60a010e865..223c3e4513 100644 --- a/test/children.patch.test.js +++ b/test/children.patch.test.js @@ -40,10 +40,10 @@ test('Loading /patch and keep ', 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() t.is(loading.show, true) - await page.nuxt.waitForNavigation() + await hook const h2 = await page.$text('h2') t.true(h2.includes('_id:')) @@ -53,7 +53,7 @@ test('Navigate to /patch/1', 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]') 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 => { - 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.id, await page.$text('[data-date-id]')) }) 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.id, await page.$text('[data-date-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]') - - 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) + await page.nuxt.navigate('/patch/2/child') dates.child = await page.$text('[data-date-child]') 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 => { - 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]') 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 => { - 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.id, await page.$text('[data-date-id]')) diff --git a/test/helpers/browser.js b/test/helpers/browser.js index fdde550d93..4ba30bfa2d 100644 --- a/test/helpers/browser.js +++ b/test/helpers/browser.js @@ -27,11 +27,14 @@ export async function page(url) { page.$nuxt = await page.evaluateHandle('window.$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) - if (wait) { - await this.waitForNavigation() - } + if (waitEnd) await hook + return { hook } }, routeData() { return page.evaluate(($nuxt) => { @@ -49,9 +52,6 @@ export async function page(url) { }, storeState() { return page.evaluate(($nuxt) => $nuxt.$store.state, page.$nuxt) - }, - waitForNavigation() { - return page.waitForFunction('window.$nuxt.$loading.$data.show === false') } } return page