From 17ed315fa035927aeef74ce90fbae0ed8049a34b Mon Sep 17 00:00:00 2001 From: julien huang Date: Sat, 19 Aug 2023 20:59:47 +0200 Subject: [PATCH] test: test component interactivity --- test/basic.test.ts | 18 ++++++++++++++++-- .../components/AsyncServerComponent.server.vue | 2 +- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/test/basic.test.ts b/test/basic.test.ts index 285570c950..8a5495ebb6 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -1416,6 +1416,13 @@ describe('server components/islands', () => { await page.locator('#show-island').click() expect(await page.locator('#island-mounted-client-side').innerHTML()).toContain('Interactive testing slot post SSR') + if (!isWebpack) { + // test client component interactivity + expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 12') + await page.locator('.interactive-component-wrapper button').click() + expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 13') + } + await page.close() }) @@ -1445,7 +1452,7 @@ describe('server components/islands', () => { const text = (await page.innerText('pre')).replace(/nuxt-ssr-client="([^"]*)"/g, (_, content) => `nuxt-ssr-client="${content.split('-')[0]}"`) - 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 
 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).toContain('async component that was very long')
 
     // Wait for all pending micro ticks to be cleared
@@ -1720,7 +1727,7 @@ 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 
",
+        "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": {},
@@ -1837,6 +1844,13 @@ describe('component islands', () => {
     await page.locator('#first-sugar-counter button').click()
     expect(await page.locator('#first-sugar-counter').innerHTML()).toContain('Sugar Counter 13')
 
+    if (!isWebpack) {
+      // test client component interactivity
+      expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 12')
+      await page.locator('.interactive-component-wrapper button').click()
+      expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 13')
+    }
+
     await page.close()
   })
 
diff --git a/test/fixtures/basic/components/AsyncServerComponent.server.vue b/test/fixtures/basic/components/AsyncServerComponent.server.vue
index c3a7abc49b..1ba8fa8d42 100644
--- a/test/fixtures/basic/components/AsyncServerComponent.server.vue
+++ b/test/fixtures/basic/components/AsyncServerComponent.server.vue
@@ -7,7 +7,7 @@
     
 
     
-    

+    

       The component bellow is not a slot but declared as interactive