Added WhenVisible reload test in react

Author: chack1172

packages/react/test-app/Pages/WhenVisible.jsx renamed to packages/react/test-app/Pages/WhenVisible/Page.jsx

@@ -0,0 +1,26 @@
+import { router } from '@inertiajs/core'
+import { usePage, WhenVisible } from '@inertiajs/react'
+
+const Value = ({ value }) => {
+  return <div>{value.text}</div>
+}
+
+export default () => {
+  const { foo, bar } = usePage().props
+
+  const handleTriggerPageReload = () => {
+    router.reload()
+  }
+
+  return (
+    <div>
+      <WhenVisible data="foo" fallback={<div>Loading foo...</div>}>
+        <Value value={foo} />
+      </WhenVisible>
+      <WhenVisible data="bar" fallback={<div>Loading bar...</div>} always>
+        <Value value={bar} />
+      </WhenVisible>
+      <button onClick={handleTriggerPageReload}>Trigger page reload</button>
+    </div>
+  )
+}

packages/react/test-app/Pages/WhenVisible/WithReload.jsx

@@ -277,10 +277,11 @@ app.get('/history/version/:pageNumber', (req, res) => {
   })
 })
 
-app.get('/when-visible', (req, res) => {
+app.get('/when-visible/page', (req, res) => {
   const page = () =>
     inertia.render(req, res, {
-      component: 'WhenVisible',
+      // TODO: move page on other packages
+      component: process.env.PACKAGE === 'react' ? 'WhenVisible/Page' : 'WhenVisible',
       props: {},
     })
 
@@ -291,6 +292,23 @@ app.get('/when-visible', (req, res) => {
   }
 })
 
+app.get('/when-visible/with-reload', (req, res) => {
+  const page = () =>
+    inertia.render(req, res, {
+      component: 'WhenVisible/WithReload',
+      props: {
+        foo: req.headers['x-inertia-partial-data']?.includes('foo') ? { text: 'foo is visible!' } : undefined,
+        bar: req.headers['x-inertia-partial-data']?.includes('bar') ? { text: 'bar is visible!' } : undefined,
+      },
+    })
+
+  if (req.headers['x-inertia-partial-data']) {
+    setTimeout(page, 250)
+  } else {
+    page()
+  }
+})
+
 app.get('/progress/:pageNumber', (req, res) => {
   setTimeout(
     () =>

tests/app/server.js

@@ -1,11 +1,9 @@
 import { expect, test } from '@playwright/test'
 import { requests } from './support'
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/when-visible')
-})
-
 test('it will wait to fire the reload until element is visible', async ({ page }) => {
+  await page.goto('/when-visible/page')
+
   requests.listen(page)
 
   await page.evaluate(() => (window as any).scrollTo(0, 1000))
@@ -85,3 +83,31 @@ test('it will wait to fire the reload until element is visible', async ({ page }
   await page.waitForResponse(page.url() + '?count=1')
   await expect(page.getByText('Count is now 2')).toBeVisible()
 })
+
+test('it will reload the props when page reloads', async ({ page }) => {
+  // TODO: implement test for other packages
+  test.skip(process.env.PACKAGE !== 'react', 'React only test')
+  await page.goto('/when-visible/with-reload')
+
+  requests.listen(page)
+
+  await expect(page.getByText('Loading foo...')).toBeVisible()
+  await expect(page.getByText('Loading bar...')).toBeVisible()
+  await page.waitForResponse(page.url())
+  await expect(page.getByText('Loading foo...')).not.toBeVisible()
+  await expect(page.getByText('Loading bar...')).not.toBeVisible()
+  await expect(page.getByText('foo is visible!')).toBeVisible()
+  await expect(page.getByText('bar is visible!')).toBeVisible()
+
+  const responsePromise = page.waitForResponse(page.url())
+
+  console.log('clicking reload')
+  await page.getByRole('button', { exact: true, name: 'Trigger page reload' }).click()
+  await expect(page.getByText('Loading foo...')).toBeVisible()
+  await expect(page.getByText('Loading bar...')).toBeVisible()
+
+  await responsePromise
+
+  await expect(page.getByText('foo is visible!')).toBeVisible()
+  await expect(page.getByText('bar is visible!')).toBeVisible()
+})