test: try to improve spa preloader tests

docs/2.guide/3.going-further/3.modules.md

@@ -671,7 +671,7 @@ And its test:
 ```js [test/rendering.ts]
 import { describe, it, expect } from 'vitest'
 import { fileURLToPath } from 'node:url'
-import { setup, $fetch } from '@nuxt/test-utils'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
 
 describe('ssr', async () => {
   // 2. Setup Nuxt with this fixture inside your test file

test/fixtures/spa-loader/app.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-await useAsyncData(async () => {
+if (import.meta.client) {
-  await new Promise((r) => { setTimeout(r, 50) })
+  await new Promise(resolve => setTimeout(resolve, 50))
-  return 42
+}
-})
 </script>
 
 <template>

test/fixtures/spa-loader/plugins/delay.client.ts

@@ -0,0 +1,3 @@
+export default defineNuxtPlugin(async () => {
+  await new Promise(resolve => setTimeout(resolve, 50))
+})

test/spa-loader/spa-preloader-outside-disabled.test.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import { isWindows } from 'std-env'
-import { $fetch, getBrowser, setup, url } from '@nuxt/test-utils'
+import { $fetch, createPage, setup, url } from '@nuxt/test-utils/e2e'
 
 const isWebpack =
   process.env.TEST_BUILDER === 'webpack' ||
@@ -27,20 +27,24 @@ await setup({
 describe('spaLoadingTemplateLocation flag is set to `within`', () => {
   it('should render loader inside appTag', async () => {
     const html = await $fetch<string>('/spa')
-    expect(html).toContain(
+    expect(html).toContain(`<div id="__nuxt"><div data-testid="loader">loading...</div></div>`)
-      `<div id="__nuxt"><div data-testid="loader">loading...</div></div>`,
-    )
   })
 
   it('spa-loader does not appear while the app is mounting', async () => {
-    const browser = await getBrowser()
+    const page = await createPage()
-    const page = await browser.newPage({})
     await page.goto(url('/spa'))
 
     const loader = page.getByTestId('loader')
+    const content = page.getByTestId('content')
+
+    await loader.waitFor({ state: 'visible' })
+    expect(await content.isHidden()).toBeTruthy()
 
     await page.waitForFunction(() => window.useNuxtApp?.() && window.useNuxtApp?.().isHydrating)
-    expect(await loader.isHidden()).toBeTruthy()
+
+    expect(await content.isHidden()).toBeTruthy()
+
+    await content.waitFor({ state: 'visible' })
 
     await page.close()
   }, 60_000)

test/spa-loader/spa-preloader-outside-enabled.test.ts

@@ -1,7 +1,8 @@
 import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import { isWindows } from 'std-env'
-import { getBrowser, setup, url } from '@nuxt/test-utils'
+import { createPage, setup, url } from '@nuxt/test-utils/e2e'
+import type { Page } from 'playwright-core'
 
 const isWebpack = process.env.TEST_BUILDER === 'webpack' || process.env.TEST_BUILDER === 'rspack'
 
@@ -22,13 +23,15 @@ await setup({
 
 describe('spaLoadingTemplateLocation flag is set to `body`', () => {
   it('should render spa-loader', async () => {
-    const browser = await getBrowser()
+    const page = await createPage()
-    const page = await browser.newPage({})
+    await page.goto(url('/spa'), { waitUntil: 'domcontentloaded' })
-    await page.goto(url('/spa'))
-    const loader = page.getByTestId('loader')
-    expect(await loader.isVisible()).toBeTruthy()
 
+    const loader = page.getByTestId('loader')
     const content = page.getByTestId('content')
+
+    await loader.waitFor({ state: 'visible' })
+    expect(await content.isHidden()).toBeTruthy()
+
     await content.waitFor({ state: 'visible' })
     expect(await loader.isHidden()).toBeTruthy()
 
@@ -36,17 +39,24 @@ describe('spaLoadingTemplateLocation flag is set to `body`', () => {
   }, 60_000)
 
   it('should render content without spa-loader', async () => {
-    const browser = await getBrowser()
+    const page = await createPage()
-    const page = await browser.newPage({})
+    await page.goto(url('/ssr'), { waitUntil: 'domcontentloaded' })
-    await page.goto(url('/ssr'))
 
-    const loader = page.getByTestId('loader')
+    const [loaderIsHidden, contentIsHidden] = await getState(page)
-    expect(await loader.isHidden()).toBeTruthy()
 
-    const content = page.getByTestId('content')
+    expect(loaderIsHidden).toBeTruthy()
-    await content.waitFor({ state: 'visible' })
+    expect(contentIsHidden).toBeFalsy()
-    expect(await loader.isHidden()).toBeTruthy()
 
     await page.close()
   }, 60_000)
 })
+
+function getState (page: Page) {
+  const loader = page.getByTestId('loader')
+  const content = page.getByTestId('content')
+
+  return Promise.all([
+    loader.isHidden(),
+    content.isHidden(),
+  ])
+}

test/suspense.test.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import { isWindows } from 'std-env'
-import { setup } from '@nuxt/test-utils'
+import { setup } from '@nuxt/test-utils/e2e'
 import { renderPage } from './utils'
 
 const isWebpack = process.env.TEST_BUILDER === 'webpack' || process.env.TEST_BUILDER === 'rspack'