text: fix flaky tests (nuxt-modules#2452)

specs/basic_usage.spec.ts

@@ -54,7 +54,7 @@ test('basic usage', async () => {
   // URL path with Route object with `useLocaleRoute`
   const button = await page.locator('#locale-route-usages button')
   await button.click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/user/profile?foo=1')
   expect(await getText(page, '#profile-page')).toEqual('This is profile page')
   expect(await page.url()).include('/user/profile?foo=1')
 })

specs/browser_language_detection/cookie.spec.ts

@@ -26,7 +26,6 @@ test('detection with cookie', async () => {
   const page = await createPage(undefined, { locale: 'en' })
   await page.goto(home)
   const ctx = await page.context()
-
   // click `fr` lang switch link
   await page.locator('#set-locale-link-fr').click()
   expect(await ctx.cookies()).toMatchObject([
@@ -35,19 +34,15 @@ test('detection with cookie', async () => {
 
   // navigate to about
   await page.goto(url('/about'))
-
   // detect locale from persisted cookie
   expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('fr')
-
   // navigate with home link
   await page.locator('#link-home').click()
-  await page.waitForTimeout(100)
 
   // locale in home
   expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('fr')
 
   // click `fr` lang switch link
   await page.locator('#set-locale-link-en').click()
-  await page.waitForTimeout(100)
   expect(await ctx.cookies()).toMatchObject([{ name: 'my_custom_cookie_name', value: 'en' }])
 })

specs/browser_language_detection/disable.spec.ts

@@ -23,7 +23,6 @@ test('disable', async () => {
 
   // click `fr` lang switch link
   await page.locator('#set-locale-link-fr').click()
-  await page.waitForTimeout(100)
   expect(await ctx.cookies()).toMatchObject([])
 
   // navigate to about
@@ -34,11 +33,9 @@ test('disable', async () => {
 
   // click `fr` lang switch link
   await page.locator('#set-locale-link-fr').click()
-  await page.waitForTimeout(100)
 
   // navigate with home link
   await page.locator('#link-home').click()
-  await page.waitForTimeout(100)
 
   // set default locale
   expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('fr')

specs/custom_route_paths/component.spec.ts

@@ -20,15 +20,17 @@ test('can access to custom route path', async () => {
   await page.goto(home)
 
   await page.locator('#link-blog').click()
-  await page.waitForTimeout(500)
+  await page.waitForURL('**/blog-us')
 
   expect(await page.url()).include('/blog-us')
 
   await page.goBack()
+  await page.waitForURL('**/')
   await page.locator('#lang-switcher-with-nuxt-link a').click()
+  await page.waitForURL('**/fr')
 
   await page.locator('#link-blog').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/fr/a-blog')
 
   expect(await page.url()).include('/fr/a-blog')
 })
@@ -39,15 +41,17 @@ test('can access to custom dynamic route path', async () => {
   await page.goto(home)
 
   await page.locator('#link-category').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/categories/foo')
 
   expect(await page.url()).include('/categories/foo')
 
   await page.goBack()
+  await page.waitForURL('**/')
   await page.locator('#lang-switcher-with-nuxt-link a').click()
+  await page.waitForURL('**/fr')
 
   await page.locator('#link-category').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**' + encodeURI('/fr/catégories/foo'))
 
   expect(await page.url()).include(encodeURI('/fr/catégories/foo'))
 })

specs/custom_route_paths/module_configration.spec.ts

@@ -33,14 +33,14 @@ test('can access to custom route path', async () => {
 
   // click `fr` switching link
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/fr')
 
   // page path
   expect(await getData(page, '#home-use-async-data')).toMatchObject({ aboutPath: '/fr/about-fr' })
 
   // navigate to about page for `fr`
   await page.locator('#link-about').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/fr/about-fr')
 
   expect(await getText(page, '#about-header')).toEqual('À propos')
   expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('fr')
@@ -54,13 +54,13 @@ test('can access to custom nested route path', async () => {
 
   // navigate to blog index page
   await page.locator('#link-blog').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/news')
 
   expect(await page.url()).include('/news')
 
   // navigate to blog article page
   await page.locator('#link-blog-article').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/news/article')
 
   expect(await page.url()).include('/news/article')
 })

specs/fixtures/component/app.vue

@@ -10,6 +10,7 @@ const onBeforeEnter = async () => {
 <template>
   <NuxtLayout>
     <NuxtPage
+      id="nuxt-page"
       :transition="{
         name: 'my',
         mode: 'out-in',

specs/fixtures/switcher/app.vue

@@ -10,6 +10,7 @@ const onBeforeEnter = async () => {
 <template>
   <NuxtLayout>
     <NuxtPage
+      id="nuxt-page"
       :transition="{
         name: 'my',
         mode: 'out-in',

specs/helper.ts

@@ -11,6 +11,10 @@ export async function getData(page: Page, selector: string, options?: Parameters
   return JSON.parse(await page.locator(selector, options).innerText())
 }
 
+export async function waitForTransition(page: Page, selector: string = '#nuxt-page.my-leave-active') {
+  return await page.locator(selector).waitFor({ state: 'detached' })
+}
+
 export async function assetLocaleHead(page: Page, headSelector: string) {
   const localeHeadValue = await getData(page, headSelector)
   const headHandle = await page.locator('head').elementHandle()

specs/ignoring_localized_route/disable/component.spec.ts

@@ -23,7 +23,7 @@ test('can not access to disable route path', async () => {
 
   // click `fr` switching link
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/fr')
 
   // disalbe href with <NuxtLink>
   expect(await page.locator('#link-ignore-disable').getAttribute('href')).toBe(null)

specs/ignoring_localized_route/disable/module_configration.spec.ts

@@ -32,7 +32,7 @@ test('can not access to disable route path', async () => {
 
   // click `fr` switching link
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/fr')
 
   // disalbe href with <NuxtLink>
   expect(await page.locator('#link-about').getAttribute('href')).toBe(null)

specs/ignoring_localized_route/pick/component.spec.ts

@@ -21,7 +21,7 @@ test('can not access to pick route path', async () => {
 
   // click `fr` switching link
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/fr')
 
   // pick href with <NuxtLink>
   expect(await page.locator('#link-ignore-pick').getAttribute('href')).toBe('/fr/ignore-routes/pick')

specs/ignoring_localized_route/pick/module_configration.spec.ts

@@ -34,7 +34,7 @@ test('can not access to pick route path', async () => {
 
   // click `fr` switching link
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(100)
+  await page.waitForURL('**/fr')
 
   // disalbe href with <NuxtLink>
   expect(await page.locator('#link-about').getAttribute('href')).toBe(null)

specs/issues/2247.spec.ts

@@ -14,33 +14,43 @@ describe('#2247', async () => {
     await page.goto(home)
 
     await page.locator('#root-en').click()
+    await page.waitForURL('**/en')
     expect(await getText(page, '#route-path')).include('/en')
 
     await page.locator('#root').click()
+    await page.waitForURL('**/')
     expect(await getText(page, '#route-path')).include('/')
 
     await page.locator('#about-en').click()
+    await page.waitForURL('**/en/about')
     expect(await getText(page, '#route-path')).include('/en/about')
 
     await page.locator('#root').click()
+    await page.waitForURL('**/')
     expect(await getText(page, '#route-path')).include('/')
 
     await page.locator('#about').click()
+    await page.waitForURL('**/about')
     expect(await getText(page, '#route-path')).include('/about')
 
     await page.locator('#about-ar').click()
+    await page.waitForURL('**/ar/about')
     expect(await getText(page, '#route-path')).include('/ar/about')
 
     await page.locator('#root').click()
+    await page.waitForURL('**/')
     expect(await getText(page, '#route-path')).include('/')
 
     await page.locator('#example-ar').click()
+    await page.waitForURL('**/ar/example')
     expect(await getText(page, '#route-path')).include('/ar/example')
 
     await page.locator('#about-ar').click()
+    await page.waitForURL('**/ar/about')
     expect(await getText(page, '#route-path')).include('/ar/about')
 
     await page.locator('#root').click()
+    await page.waitForURL('**/')
     expect(await getText(page, '#route-path')).include('/')
   })
 })

specs/issues/2288.spec.ts

@@ -15,27 +15,27 @@ describe('#2288', async () => {
 
     // goto to `/en/about`
     await page.locator('#about-en').click()
-    await page.waitForTimeout(10)
+    await page.waitForURL('**/en/about')
     expect(await page.url().endsWith('/en/about')).toBe(true)
 
     // change to `ar`
     await page.locator('#ar').click()
-    await page.waitForTimeout(10)
+    await page.waitForURL('**/about')
     expect(await page.url().endsWith('/about')).toBe(true)
 
     // change to `en`
     await page.locator('#en').click()
-    await page.waitForTimeout(10)
+    await page.waitForURL('**/en/about')
     expect(await page.url().endsWith('/en/about')).toBe(true)
 
     // goto to `/ar/example`
     await page.locator('#example-ar').click()
-    await page.waitForTimeout(10)
+    await page.waitForURL('**/ar/example')
     expect(await page.url().endsWith('/ar/example')).toBe(true)
 
     // goto to `/en/example`
     await page.locator('#example-en').click()
-    await page.waitForTimeout(10)
+    await page.waitForURL('**/en/example')
     expect(await page.url().endsWith('/en/example')).toBe(true)
   })
 })

specs/lang_switcher.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect, describe } from 'vitest'
 import { fileURLToPath } from 'node:url'
 import { setup, url, createPage } from './utils'
-import { getText, getData } from './helper'
+import { getText, getData, waitForTransition } from './helper'
 
 await setup({
   rootDir: fileURLToPath(new URL(`./fixtures/switcher`, import.meta.url)),
@@ -22,7 +22,8 @@ test('switching', async () => {
 
   // click `fr` lang switch with `<NuxtLink>`
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(1000)
+  await waitForTransition(page)
+  await page.waitForURL('**/fr')
 
   // `fr` rendering
   expect(await getText(page, '#home-header')).toMatch('Accueil')
@@ -34,7 +35,8 @@ test('switching', async () => {
 
   // click `en` lang switch with `setLocale`
   await page.locator('#set-locale-link-en').click()
-  await page.waitForTimeout(1000)
+  await waitForTransition(page)
+  await page.waitForURL('**/')
 
   // page path
   expect(await getData(page, '#home-use-async-data')).toMatchObject({
@@ -51,11 +53,11 @@ test('retains query parameters', async () => {
   const home = url('/?foo=123')
   const page = await createPage()
   await page.goto(home)
-  await page.waitForTimeout(1000)
   expect(page.url()).include('/?foo=123')
 
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(1000)
+  await waitForTransition(page)
+  await page.waitForURL('**/fr?foo=123')
   expect(page.url()).include('/fr?foo=123')
 })
 
@@ -67,11 +69,13 @@ describe('dynamic route parameter', () => {
 
     // go to dynamic route page
     await page.locator('#link-post').click()
-    await page.waitForTimeout(1000)
+    await waitForTransition(page)
+    await page.waitForURL('**/post/id')
 
     // click `fr` lang switch with `<NuxtLink>`
     await page.locator('#lang-switcher-with-nuxt-link a').click()
-    await page.waitForTimeout(1000)
+    await waitForTransition(page)
+    await page.waitForURL('**/fr/post/mon-article')
     expect(await getText(page, '#post-id')).toMatch('mon-article')
     expect(await page.url()).include('mon-article')
   })
@@ -83,7 +87,8 @@ describe('dynamic route parameter', () => {
 
     // click `fr` lang switch with `<NuxtLink>`
     await page.locator('#lang-switcher-with-nuxt-link a').click()
-    await page.waitForTimeout(1000)
+    await waitForTransition(page)
+    await page.waitForURL('**/fr/mon-article/xyz')
     expect(await getText(page, '#catch-all-id')).toMatch('mon-article/xyz')
     expect(await page.url()).include('mon-article/xyz')
   })
@@ -98,11 +103,13 @@ test('wait for page transition', async () => {
 
   // click `fr` lang switching
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(3000)
+  await waitForTransition(page)
+  await page.waitForURL('**/fr')
   expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('fr')
 
   // click `en` lang switching
   await page.locator('#lang-switcher-with-nuxt-link a').click()
-  await page.waitForTimeout(3000)
+  await waitForTransition(page)
+  await page.waitForURL('**/')
   expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('en')
 })

specs/layers/layers_vuei18n_options.spec.ts

@@ -28,17 +28,19 @@ describe('nuxt layers vuei18n options', async () => {
     const home = url('/')
     const page = await createPage(undefined)
     await page.goto(home)
-    await page.waitForTimeout(1000)
+    await page.waitForURL('**/')
 
     expect(await getText(page, '#snake-case')).toEqual('Over-deze-site')
     expect(await getText(page, '#pascal-case')).toEqual('OverDezeSite')
 
     await page.click(`#set-locale-link-en`)
+    await page.waitForURL('**/en')
     expect(await getText(page, '#snake-case')).toEqual('About-this-site')
     expect(await getText(page, '#pascal-case')).toEqual('AboutThisSite')
     expect(await getText(page, '#fallback-message')).toEqual('Unieke vertaling')
 
     await page.click(`#set-locale-link-fr`)
+    await page.waitForURL('**/fr')
     expect(await getText(page, '#snake-case')).toEqual('À-propos-de-ce-site')
     expect(await getText(page, '#pascal-case')).toEqual('ÀProposDeCeSite')
     expect(await getText(page, '#fallback-message')).toEqual('Unieke vertaling')

specs/lazy_load/basic_lazy_load.spec.ts

@@ -23,13 +23,15 @@ describe('basic lazy loading', async () => {
     const dynamicTime = await getText(page, '#dynamic-time')
 
     await page.click('#lang-switcher-with-nuxt-link-fr')
+    await page.waitForURL('**/fr')
     expect(await getText(page, '#dynamic-time')).toEqual('Not dynamic')
 
     // dynamicTime depends on passage of some time
     await waitForMs(100)
 
     // dynamicTime does not match captured dynamicTime
     await page.click('#lang-switcher-with-nuxt-link-nl')
+    await page.waitForURL('**/nl')
     expect(await getText(page, '#dynamic-time')).to.not.equal(dynamicTime)
   })
 

specs/locale_fallback.spec.ts

@@ -24,6 +24,7 @@ test('fallback to target lang', async () => {
 
   // click `ja` lang switch with `<NuxtLink>`
   await page.locator('#lang-switcher-with-nuxt-link-ja a').click()
+  await page.waitForURL('**/ja')
 
   // fallback to en content translation
   expect(await getText(page, '#home-header')).toEqual('Homepage')