added tests

inertiajs · Jan 8, 2025 · 3bfcdb4 · 3bfcdb4
1 parent f704606
commit 3bfcdb4
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 23 deletions.
diff --git a/packages/react/test-app/Pages/WhenVisible.jsx b/packages/react/test-app/Pages/WhenVisible.jsx
@@ -1,31 +1,53 @@
 import { WhenVisible } from '@inertiajs/react'
+import { useState } from 'react'
 
 const Foo = ({ label }) => {
   return <div>{label}</div>
 }
 
-export default () => (
-  <>
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible data="foo" fallback={<div>Loading first one...</div>}>
-        <Foo label="First one is visible!" />
-      </WhenVisible>
-    </div>
+export default () => {
+  const [count, setCount] = useState(0)
 
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible buffer={1000} data="foo" fallback={<div>Loading second one...</div>}>
-        <Foo label="Second one is visible!" />
-      </WhenVisible>
-    </div>
+  return (
+    <>
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible data="foo" fallback={<div>Loading first one...</div>}>
+          <Foo label="First one is visible!" />
+        </WhenVisible>
+      </div>
 
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible data="foo" fallback={<div>Loading third one...</div>} always>
-        <Foo label="Third one is visible!" />
-      </WhenVisible>
-    </div>
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible buffer={1000} data="foo" fallback={<div>Loading second one...</div>}>
+          <Foo label="Second one is visible!" />
+        </WhenVisible>
+      </div>
 
-    <div style={{ marginTop: '5000px' }}>
-      <WhenVisible data="foo" fallback={<div>Loading fourth one...</div>}></WhenVisible>
-    </div>
-  </>
-)
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible data="foo" fallback={<div>Loading third one...</div>} always>
+          <Foo label="Third one is visible!" />
+        </WhenVisible>
+      </div>
+
+      <div style={{ marginTop: '5000px' }}>
+        <WhenVisible data="foo" fallback={<div>Loading fourth one...</div>}></WhenVisible>
+      </div>
+
+      <div style={{ marginTop: '6000px' }}>
+        <WhenVisible
+          fallback={<div>Loading fifth one...</div>}
+          always
+          params={{
+            data: {
+              count,
+            },
+            onSuccess: () => {
+              setCount((c) => c + 1)
+            },
+          }}
+        >
+          <Foo label={`Count is now ${count}`} />
+        </WhenVisible>
+      </div>
+    </>
+  )
+}
diff --git a/packages/svelte/test-app/Pages/WhenVisible.svelte b/packages/svelte/test-app/Pages/WhenVisible.svelte
@@ -1,5 +1,7 @@
 <script>
   import { WhenVisible } from '@inertiajs/svelte'
+
+  export let count = 0
 </script>
 
 <div style="margin-top: 5000px">
@@ -39,3 +41,20 @@
     </svelte:fragment>
   </WhenVisible>
 </div>
+
+<div style="margin-top: 6000px">
+  <WhenVisible always params={{
+    data: {
+        count,
+    },
+    onSuccess() {
+        count += 1
+    }
+  }}>
+    <svelte:fragment slot="fallback">
+      <div>Loading fifth one...</div>
+    </svelte:fragment>
+
+    <div>Count is now {count}</div>
+  </WhenVisible>
+</div>
diff --git a/packages/vue3/test-app/Pages/WhenVisible.vue b/packages/vue3/test-app/Pages/WhenVisible.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { WhenVisible } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const count = ref(0)
 </script>
 
 <template>
@@ -40,4 +43,24 @@ import { WhenVisible } from '@inertiajs/vue3'
       </template>
     </WhenVisible>
   </div>
+
+  <div style="margin-top: 6000px">
+    <WhenVisible
+      always
+      :params="{
+        data: {
+          count,
+        },
+        onSuccess: () => {
+          count += 1
+        },
+      }"
+    >
+      <template #fallback>
+        <div>Loading fifth one...</div>
+      </template>
+
+      <div>Count is now {{ count }}</div>
+    </WhenVisible>
+  </div>
 </template>
diff --git a/tests/app/server.js b/tests/app/server.js
@@ -237,7 +237,7 @@ app.get('/when-visible', (req, res) => {
       props: {},
     })
 
-  if (req.headers['x-inertia-partial-data']) {
+  if (req.headers['x-inertia-partial-data'] || req.query.count) {
     setTimeout(page, 500)
   } else {
     page()

diff --git a/tests/when-visible.spec.ts b/tests/when-visible.spec.ts
@@ -69,4 +69,19 @@ test('it will wait to fire the reload until element is visible', async ({ page }
   await expect(page.getByText('Loading fourth one...')).toBeVisible()
   await page.waitForResponse(page.url())
   await expect(page.getByText('Loading fourth one...')).not.toBeVisible()
+
+  await page.evaluate(() => (window as any).scrollTo(0, 26_000))
+  await expect(page.getByText('Loading fifth one...')).toBeVisible()
+  await page.waitForResponse(page.url() + '?count=0')
+  await expect(page.getByText('Loading fifth one...')).not.toBeVisible()
+  await expect(page.getByText('Count is now 1')).toBeVisible()
+
+  // Now scroll up and down to re-trigger it
+  await page.evaluate(() => (window as any).scrollTo(0, 20_000))
+  await page.waitForTimeout(100)
+
+  await page.evaluate(() => (window as any).scrollTo(0, 26_000))
+  await expect(page.getByText('Count is now 1')).toBeVisible()
+  await page.waitForResponse(page.url() + '?count=1')
+  await expect(page.getByText('Count is now 2')).toBeVisible()
 })