From 530b4cc76ece429b142bcc82f71021369ecdd5c7 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Tue, 25 Jun 2024 18:53:38 +0200
Subject: [PATCH] test: add page transition

---
 test/basic.test.ts                 |  2 +-
 test/fixtures/basic/app.vue        | 17 +++++++++++++++++
 test/fixtures/basic/nuxt.config.ts |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 test/fixtures/basic/app.vue

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 797684e670..542f61792d 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -523,7 +523,7 @@ describe('pages', () => {
 
     // that page should be client rendered
     // TODO: investigate why multiple elements are appearing on page
-    expect(await clientInitialPage.locator('#server-rendered').first().textContent()).toMatchInlineSnapshot('"false"')
+    expect(await clientInitialPage.locator('#server-rendered').textContent()).toMatchInlineSnapshot('"false"')
     // and not contain any errors or warnings
     expect(errors.length).toBe(0)
 
diff --git a/test/fixtures/basic/app.vue b/test/fixtures/basic/app.vue
new file mode 100644
index 0000000000..592afa7c47
--- /dev/null
+++ b/test/fixtures/basic/app.vue
@@ -0,0 +1,17 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage /> 
+    </NuxtLayout>
+</template>
+
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.1s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>
\ No newline at end of file
diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts
index 845b958c6d..ff6913dc55 100644
--- a/test/fixtures/basic/nuxt.config.ts
+++ b/test/fixtures/basic/nuxt.config.ts
@@ -13,7 +13,7 @@ declare module 'nitropack' {
 
 export default defineNuxtConfig({
   app: {
-    pageTransition: true,
+    pageTransition: { name: 'page', mode: 'out-in' },
     layoutTransition: true,
     teleportId: 'nuxt-teleport',
     teleportTag: 'span',