From cd98154c396cd9d1ea626e151a9a943052d395e0 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 10 Dec 2024 20:45:00 +0000
Subject: [PATCH] test: try to improve spa preloader tests

---
 docs/2.guide/3.going-further/3.modules.md     |  2 +-
 test/fixtures/spa-loader/app.vue              |  7 ++--
 .../spa-loader/plugins/delay.client.ts        |  3 ++
 .../spa-preloader-outside-disabled.test.ts    | 18 +++++----
 .../spa-preloader-outside-enabled.test.ts     | 38 ++++++++++++-------
 test/suspense.test.ts                         |  2 +-
 6 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 test/fixtures/spa-loader/plugins/delay.client.ts

diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md
index b12d886821..1bc8a40de1 100644
--- a/docs/2.guide/3.going-further/3.modules.md
+++ b/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
diff --git a/test/fixtures/spa-loader/app.vue b/test/fixtures/spa-loader/app.vue
index b654005857..574b3e6fe0 100644
--- a/test/fixtures/spa-loader/app.vue
+++ b/test/fixtures/spa-loader/app.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-await useAsyncData(async () => {
-  await new Promise((r) => { setTimeout(r, 50) })
-  return 42
-})
+if (import.meta.client) {
+  await new Promise(resolve => setTimeout(resolve, 50))
+}
 </script>
 
 <template>
diff --git a/test/fixtures/spa-loader/plugins/delay.client.ts b/test/fixtures/spa-loader/plugins/delay.client.ts
new file mode 100644
index 0000000000..49529b291c
--- /dev/null
+++ b/test/fixtures/spa-loader/plugins/delay.client.ts
@@ -0,0 +1,3 @@
+export default defineNuxtPlugin(async () => {
+  await new Promise(resolve => setTimeout(resolve, 50))
+})
diff --git a/test/spa-loader/spa-preloader-outside-disabled.test.ts b/test/spa-loader/spa-preloader-outside-disabled.test.ts
index 5c794b627e..66c4e0f2ae 100644
--- a/test/spa-loader/spa-preloader-outside-disabled.test.ts
+++ b/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(
-      `<div id="__nuxt"><div data-testid="loader">loading...</div></div>`,
-    )
+    expect(html).toContain(`<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 browser.newPage({})
+    const page = await createPage()
     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)
diff --git a/test/spa-loader/spa-preloader-outside-enabled.test.ts b/test/spa-loader/spa-preloader-outside-enabled.test.ts
index f8313b1eec..3ef4537c06 100644
--- a/test/spa-loader/spa-preloader-outside-enabled.test.ts
+++ b/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 browser.newPage({})
-    await page.goto(url('/spa'))
-    const loader = page.getByTestId('loader')
-    expect(await loader.isVisible()).toBeTruthy()
+    const page = await createPage()
+    await page.goto(url('/spa'), { waitUntil: 'domcontentloaded' })
 
+    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 browser.newPage({})
-    await page.goto(url('/ssr'))
+    const page = await createPage()
+    await page.goto(url('/ssr'), { waitUntil: 'domcontentloaded' })
 
-    const loader = page.getByTestId('loader')
-    expect(await loader.isHidden()).toBeTruthy()
+    const [loaderIsHidden, contentIsHidden] = await getState(page)
 
-    const content = page.getByTestId('content')
-    await content.waitFor({ state: 'visible' })
-    expect(await loader.isHidden()).toBeTruthy()
+    expect(loaderIsHidden).toBeTruthy()
+    expect(contentIsHidden).toBeFalsy()
 
     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(),
+  ])
+}
diff --git a/test/suspense.test.ts b/test/suspense.test.ts
index 6fb55edc7c..87ee10ec38 100644
--- a/test/suspense.test.ts
+++ b/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'