add tests for sapPreloaderOutside

test/fixtures/spa-loader/nuxt.config.ts

@@ -1,6 +1,12 @@
 export default defineNuxtConfig({
-  ssr: false,
   devtools: { enabled: false },
   spaLoadingTemplate: true,
+  routeRules: {
+    '/spa': { ssr: false },
+    '/ssr': { ssr: true },
+  },
+  experimental: {
+    spaPreloaderOutside: false,
+  },
   compatibilityDate: '2024-06-28',
 })

test/spa-loader-ssr.test.ts

@@ -1,36 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
-import { isWindows } from 'std-env'
-import { getBrowser, setup, url } from '@nuxt/test-utils'
-
-const isWebpack = process.env.TEST_BUILDER === 'webpack' || process.env.TEST_BUILDER === 'rspack'
-
-await setup({
-  rootDir: fileURLToPath(new URL('./fixtures/spa-loader', import.meta.url)),
-  dev: process.env.TEST_ENV === 'dev',
-  server: true,
-  browser: true,
-  setupTimeout: (isWindows ? 360 : 120) * 1000,
-  nuxtConfig: {
-    builder: isWebpack ? 'webpack' : 'vite',
-    ssr: true,
-    spaLoadingTemplate: true,
-  },
-})
-
-describe('spa-loader with SSR', () => {
-  it('should render content without spa-loader', async () => {
-    const browser = await getBrowser()
-    const page = await browser.newPage({})
-    await page.goto(url('/'), { waitUntil: 'domcontentloaded' })
-
-    const loader = page.getByTestId('__nuxt-spa-loader')
-    expect(await loader.isVisible()).toBeFalsy()
-
-    const content = page.getByTestId('content')
-    await content.waitFor({ state: 'visible' })
-    expect(await loader.isHidden()).toBeTruthy()
-
-    await page.close()
-  }, 60_000)
-})

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

@@ -0,0 +1,41 @@
+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'
+
+const isWebpack =
+  process.env.TEST_BUILDER === 'webpack' ||
+  process.env.TEST_BUILDER === 'rspack'
+
+await setup({
+  rootDir: fileURLToPath(new URL('../fixtures/spa-loader', import.meta.url)),
+  dev: process.env.TEST_ENV === 'dev',
+  server: true,
+  browser: true,
+  setupTimeout: (isWindows ? 360 : 120) * 1000,
+  nuxtConfig: {
+    builder: isWebpack ? 'webpack' : 'vite',
+    spaLoadingTemplate: true,
+    experimental: {
+      spaPreloaderOutside: false,
+    },
+  },
+})
+
+describe('spaPreloaderOutside flag is disabled', () => {
+  it('shoul be render loader inside appTag', async () => {
+    const html = await $fetch('/spa')
+    expect(html).toContain(`<div id="__nuxt"><div data-testid="loader">loading...</div>\n</div>`)
+  })
+
+  it('spa-loader does not appear while the app is mounting', async () => {
+    const browser = await getBrowser()
+    const page = await browser.newPage({})
+    await page.goto(url('/spa'), { waitUntil: 'domcontentloaded' })
+
+    const loader = page.getByTestId('__nuxt-spa-loader')
+    expect(await loader.isHidden()).toBeTruthy()
+
+    await page.close()
+  }, 60_000)
+})

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

@@ -6,24 +6,25 @@ import { getBrowser, setup, url } from '@nuxt/test-utils'
 const isWebpack = process.env.TEST_BUILDER === 'webpack' || process.env.TEST_BUILDER === 'rspack'
 
 await setup({
-  rootDir: fileURLToPath(new URL('./fixtures/spa-loader', import.meta.url)),
+  rootDir: fileURLToPath(new URL('../fixtures/spa-loader', import.meta.url)),
   dev: process.env.TEST_ENV === 'dev',
   server: true,
   browser: true,
   setupTimeout: (isWindows ? 360 : 120) * 1000,
   nuxtConfig: {
     builder: isWebpack ? 'webpack' : 'vite',
-    ssr: false,
     spaLoadingTemplate: true,
+    experimental: {
+      spaPreloaderOutside: true,
+    },
   },
 })
 
-describe('spa-loader with SPA', () => {
+describe('spaPreloaderOutside flag is enabled', () => {
   it('should render spa-loader', async () => {
     const browser = await getBrowser()
     const page = await browser.newPage({})
-    await page.goto(url('/'), { waitUntil: 'domcontentloaded' })
+    await page.goto(url('/spa'), { waitUntil: 'domcontentloaded' })
-
     const loader = page.getByTestId('loader')
     expect(await loader.isVisible()).toBeTruthy()
 
@@ -33,4 +34,19 @@ describe('spa-loader with SPA', () => {
 
     await page.close()
   }, 60_000)
+
+  it('should render content without spa-loader', async () => {
+    const browser = await getBrowser()
+    const page = await browser.newPage({})
+    await page.goto(url('/ssr'), { waitUntil: 'domcontentloaded' })
+
+    const loader = page.getByTestId('__nuxt-spa-loader')
+    expect(await loader.isHidden()).toBeTruthy()
+
+    const content = page.getByTestId('content')
+    await content.waitFor({ state: 'visible' })
+    expect(await loader.isHidden()).toBeTruthy()
+
+    await page.close()
+  }, 60_000)
 })