From 8c622e6b56418d8a3c484bc8902e2fd17509d47f Mon Sep 17 00:00:00 2001 From: julien huang Date: Mon, 28 Aug 2023 21:31:34 +0200 Subject: [PATCH] test: refactor tests --- test/basic.test.ts | 63 +++++++++++-------- .../AsyncServerComponent.server.vue | 6 -- .../components/ServerWithClient.server.vue | 19 ++++++ test/fixtures/basic/pages/islands.vue | 1 + 4 files changed, 56 insertions(+), 33 deletions(-) create mode 100644 test/fixtures/basic/components/ServerWithClient.server.vue diff --git a/test/basic.test.ts b/test/basic.test.ts index 3c92c04ac3..2bfae12c3e 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -1452,11 +1452,7 @@ describe('server components/islands', () => { const text = (await page.innerText('pre')).replace(/nuxt-ssr-client="([^"]*)"/g, (_, content) => `nuxt-ssr-client="${content.split('-')[0]}"`) - if (isWebpack) { - expect(text).toMatchInlineSnapshot('" End page 
 This is a .server (20ms) async component that was very long ... 
42
 Sugar Counter 12 x 1 = 12 
 The component bellow is not a slot but declared as interactive 
 Sugar Counter 12 x 1 = 12 
 This is a .server (20ms) async component that was very long ... 
42
 Sugar Counter 12 x 1 = 12 
 The component bellow is not a slot but declared as interactive 
 Sugar Counter 12 x 1 = 12 
"')
-    } else {
-      expect(text).toMatchInlineSnapshot('" End page 
 This is a .server (20ms) async component that was very long ... 
42
 Sugar Counter 12 x 1 = 12 
 The component bellow is not a slot but declared as interactive 
 This is a .server (20ms) async component that was very long ... 
42
 Sugar Counter 12 x 1 = 12 
 The component bellow is not a slot but declared as interactive 
"')
-    }
+    expect(text).toMatchInlineSnapshot('" End page 
 This is a .server (20ms) async component that was very long ... 
42
 Sugar Counter 12 x 1 = 12 
 This is a .server (20ms) async component that was very long ... 
42
 Sugar Counter 12 x 1 = 12 
"')
     expect(text).toContain('async component that was very long')
 
     // Wait for all pending micro ticks to be cleared
@@ -1719,12 +1715,42 @@ describe('component islands', () => {
     if (isDev()) {
       result.head.link = result.head.link.filter(l => !l.href.includes('@nuxt+ui-templates') && (l.href.startsWith('_nuxt/components/islands/') && l.href.includes('_nuxt/components/islands/AsyncServerComponent')))
     }
-    const { props, teleports, chunks } = result
     result.props = {}
     result.teleports = {}
     result.chunks = {}
     result.html = result.html.replace(/ nuxt-ssr-client="([^"]*)"/g, (_, content) => `'nuxt-ssr-client="${content.split('-')[0]}"`)
-    if (isWebpack) {
+
+    expect(result).toMatchInlineSnapshot(`
+        {
+          "chunks": {},
+          "head": {
+            "link": [],
+            "style": [],
+          },
+          "html": "
 This is a .server (20ms) async component that was very long ... 
2
 Sugar Counter 12 x 1 = 12 
",
+          "props": {},
+          "state": {},
+          "teleports": {},
+        }
+      `)
+  })
+
+  if (!isWebpack) {
+    it('render server component with selective client hydration', async () => {
+      const result: NuxtIslandResponse = await $fetch('/__nuxt_island/ServerWithClient')
+      if (isDev()) {
+        result.head.link = result.head.link.filter(l => !l.href.includes('@nuxt+ui-templates') && (l.href.startsWith('_nuxt/components/islands/') && l.href.includes('_nuxt/components/islands/AsyncServerComponent')))
+      }
+      const { props, teleports, chunks } = result
+      result.props = {}
+      result.teleports = {}
+      result.chunks = {}
+      result.html = result.html.replace(/ nuxt-ssr-client="([^"]*)"/g, (_, content) => `'nuxt-ssr-client="${content.split('-')[0]}"`)
+
+      const propsEntries = Object.entries(props)
+      const teleportsEntries = Object.entries(teleports)
+      const chunksEntries = Object.entries(chunks)
+
       expect(result).toMatchInlineSnapshot(`
         {
           "chunks": {},
@@ -1732,29 +1758,12 @@ describe('component islands', () => {
             "link": [],
             "style": [],
           },
-          "html": "
 This is a .server (20ms) async component that was very long ... 
2
 Sugar Counter 12 x 1 = 12 
 The component bellow is not a slot but declared as interactive 
 Sugar Counter 12 x 1 = 12 
",
+          "html": "
 ServerWithClient.server.vue : 
count: 0
 This is not interactive 
 Sugar Counter 12 x 1 = 12 
 The component bellow is not a slot but declared as interactive 
",
           "props": {},
           "state": {},
           "teleports": {},
         }
       `)
-    } else {
-      expect(result).toMatchInlineSnapshot(`
-      {
-        "chunks": {},
-        "head": {
-          "link": [],
-          "style": [],
-        },
-        "html": "
 This is a .server (20ms) async component that was very long ... 
2
 Sugar Counter 12 x 1 = 12 
 The component bellow is not a slot but declared as interactive 
",
-        "props": {},
-        "state": {},
-        "teleports": {},
-      }
-    `)
-      const propsEntries = Object.entries(props)
-      const teleportsEntries = Object.entries(teleports)
-      const chunksEntries = Object.entries(chunks)
       expect(propsEntries).toHaveLength(1)
       expect(teleportsEntries).toHaveLength(1)
       expect(propsEntries[0][0].startsWith('SugarCounter-')).toBeTruthy()
@@ -1766,8 +1775,8 @@ describe('component islands', () => {
       }
     `)
       expect(teleportsEntries[0][1]).toMatchInlineSnapshot('"
 Sugar Counter 12 x 1 = 12 
"')
-    }
-  })
+    })
+  }
 
   it('renders pure components', async () => {
     const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/PureComponent', {
diff --git a/test/fixtures/basic/components/AsyncServerComponent.server.vue b/test/fixtures/basic/components/AsyncServerComponent.server.vue
index 1ba8fa8d42..d618fcbf38 100644
--- a/test/fixtures/basic/components/AsyncServerComponent.server.vue
+++ b/test/fixtures/basic/components/AsyncServerComponent.server.vue
@@ -7,12 +7,6 @@
     
 
     
-    

-      The component bellow is not a slot but declared as interactive
-
-      
-    

-
     
   
 
diff --git a/test/fixtures/basic/components/ServerWithClient.server.vue b/test/fixtures/basic/components/ServerWithClient.server.vue
new file mode 100644
index 0000000000..b674fd5146
--- /dev/null
+++ b/test/fixtures/basic/components/ServerWithClient.server.vue
@@ -0,0 +1,19 @@
+
+
+
diff --git a/test/fixtures/basic/pages/islands.vue b/test/fixtures/basic/pages/islands.vue
index df8d35af54..b61996272d 100644
--- a/test/fixtures/basic/pages/islands.vue
+++ b/test/fixtures/basic/pages/islands.vue
@@ -73,6 +73,7 @@ const count = ref(0)
         
       
     
+