test: Use routeChanged for client-side tests

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:'))

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]'))

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