testing behavior when there is an async client component

Author: AbanoubGhadban

react_on_rails_pro/spec/dummy/app/views/pages/redis_receiver.html.erb

@@ -1,5 +1,5 @@
 <%= stream_react_component("RedisReceiver", 
-    props: { requestId: @request_id }, 
+    props: { requestId: @request_id, asyncToggleContainer: params[:async_toggle_container] }, 
     prerender: true, 
     trace: true, 
     id: "RedisReceiver-react-component-0") %>

react_on_rails_pro/spec/dummy/client/app/components/RSCPostsPage/ToggleContainer.jsx

@@ -10,7 +10,7 @@ const ToggleContainer = ({ children, childrenTitle }) => {
 
   return (
     <div style={{ border: '1px solid black', margin: '10px', padding: '10px' }}>
-      <button onClick={() => setIsVisible(!isVisible)} style={{ border: '1px solid black' }} type="button">
+      <button className="toggle-button" onClick={() => setIsVisible(!isVisible)} style={{ border: '1px solid black' }} type="button">
         {showOrHideText}
       </button>
       {isVisible && children}

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/RedisReceiver.jsx

@@ -31,18 +31,21 @@ const RedisReceiver = ({ requestId, asyncToggleContainer }, railsContext) => {
   }
 
   const UsedToggleContainer = asyncToggleContainer ? AsyncToggleContainer : ToggleContainer;
+  const toggleContainerGetValueParam = asyncToggleContainer ? getValue : undefined;
 
-  return (
+  return () => (
     <ErrorBoundary>
       <main className='redis-receiver-container'>
         <h1 className="redis-receiver-header">A list of items received from Redis:</h1>
-        <UsedToggleContainer childrenTitle="Redis Items">
-          <ol className='redis-items-container'>
-            {
-              [0,1,2,3,4].map(index => <RedisItemWithWrapper key={index} getValue={getValue} itemIndex={index} />)
-            }
-          </ol>
-        </UsedToggleContainer>
+        <Suspense fallback={<div>Loading ToggleContainer</div>}>
+          <UsedToggleContainer childrenTitle="Redis Items" getValue={toggleContainerGetValueParam}>
+            <ol className='redis-items-container'>
+              {
+                [0,1,2,3,4].map(index => <RedisItemWithWrapper key={index} getValue={getValue} itemIndex={index} />)
+              }
+            </ol>
+          </UsedToggleContainer>
+        </Suspense>
       </main>
     </ErrorBoundary>
   )

react_on_rails_pro/spec/dummy/e2e-tests/dummt-fixture.ts

@@ -0,0 +1,33 @@
+import { test as base } from '@playwright/test';
+
+type F = {
+  h: string;
+}
+
+type F2 = {
+  h2: string;
+}
+
+export const test1 = base.extend<F>({
+  h: [async({}, use) => {
+    console.log('F1')
+    await use('F1');
+    console.log('F1 end');
+  }, { auto: true }]
+})
+
+export const testmid = base.extend<F>({
+  h: [async({}, use) => {
+    console.log('Fm')
+    await use('Fm');
+    console.log('Fm end');
+  }, { auto: true }]
+})
+
+export const test2 = testmid.extend<F2>({
+  h2: [async({ h }, use) => {
+    console.log('F2')
+    await use(h + 'F2');
+    console.log('F2 end');
+  }, { auto: true }]
+})

react_on_rails_pro/spec/dummy/e2e-tests/dummy.spec.ts

@@ -1,12 +1,22 @@
-import { test, expect } from '@playwright/test';
-import { redisControlledTest } from './fixture';
-
-redisControlledTest('test1', ({ redisRequestId, redisClient }) => {
-  console.log('Test1 request id', redisRequestId);
-  console.log(redisClient);
-});
-
-redisControlledTest('test2', ({ redisRequestId, redisClient }) => {
-  console.log('Test2 request id', redisRequestId);
-  console.log(redisClient);
-});
+// import { test, expect } from '@playwright/test';
+// import { redisControlledTest } from './fixture';
+
+// redisControlledTest('test1', ({ redisRequestId, redisClient }) => {
+//   console.log('Test1 request id', redisRequestId);
+//   console.log(redisClient);
+// });
+
+// redisControlledTest('test2', ({ redisRequestId, redisClient }) => {
+//   console.log('Test2 request id', redisRequestId);
+//   console.log(redisClient);
+// });
+
+import { mergeTests } from '@playwright/test';
+import { test1, test2 } from './dummt-fixture';
+
+const test = mergeTests(test2);
+
+test('eee', ({ h2 }) => {
+  console.log('TEst', h2);
+})
+

react_on_rails_pro/spec/dummy/e2e-tests/fixture.ts

@@ -19,6 +19,7 @@ export type RedisReceiverControllerFixture = {
   sendRedisValue: (key: string, value: unknown) => Promise<void>;
   sendRedisItemValue: (itemIndex: Number, value: unknown) => Promise<void>;
   matchPageSnapshot: (snapshotPath: string) => Promise<void>;
+  waitForConsoleMessage: (msg: string) => Promise<void>;
 }
 
 const redisControlledTest = base.extend<RedisRequestIdFixture, RedisClientFixture>({
@@ -36,7 +37,11 @@ const redisControlledTest = base.extend<RedisRequestIdFixture, RedisClientFixtur
   },
 
   nonBlockingNavigateWithRequestId: async ({ redisRequestId, page }, use) => {
-    await use((path) => page.goto(`${path}?request_id=${redisRequestId}`, { waitUntil: "commit" }))
+    await use((path) => {
+      const requestIdParam = `request_id=${redisRequestId}`;
+      const fullPath = path.includes('?') ? `${path}&${requestIdParam}` : `${path}?${requestIdParam}`;
+      return page.goto(fullPath, { waitUntil: "commit" })
+    })
   },
 });
 
@@ -57,6 +62,17 @@ const redisReceiverPageController = redisControlledTest.extend<RedisReceiverCont
       await expect(page.locator('.redis-receiver-container:visible').first()).toMatchAriaSnapshot({ name: `${snapshotPath}.aria.yml` });
     })
   },
+  waitForConsoleMessage: async({ page }, use) =>{
+    await use(async(msg) => {
+      if ((await page.consoleMessages()).find(consoleMsg => consoleMsg.text().includes(msg))) {
+        return;
+      }
+
+      await page.waitForEvent('console', {
+        predicate: (consoleMsg) => consoleMsg.text().includes(msg),
+      })
+    })
+  }
 })
 
 const redisReceiverPageTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
@@ -67,6 +83,20 @@ const redisReceiverPageTest = redisReceiverPageController.extend<RedisReceiverPa
   }, { auto: true }]
 })
 
+const redisReceiverPageWithAsyncClientComponentTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
+  pagePath: [async({ page, nonBlockingNavigateWithRequestId, sendRedisValue }, use) => {
+    const pagePath = '/redis_receiver_for_testing?async_toggle_container=true';
+    await nonBlockingNavigateWithRequestId(pagePath);
+
+    await expect(page.getByText("Loading ToggleContainer")).toBeVisible();
+    await expect(page.locator('.toggle-button')).not.toBeVisible();
+
+    await sendRedisValue('ToggleContainer', 'anything');
+    await expect(page.locator('.toggle-button')).toBeVisible();
+    await use(pagePath);
+  }, { auto: true }]
+})
+
 const redisReceiverInsideRouterPageTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
   pagePath: [async({ nonBlockingNavigateWithRequestId }, use) => {
     const pagePath = '/server_router/redis-receiver-for-testing';
@@ -85,8 +115,8 @@ const redisReceiverPageAfterNavigationTest = redisReceiverPageController.extend<
 })
 
 export { 
-  redisControlledTest,
   redisReceiverPageTest,
   redisReceiverInsideRouterPageTest,
   redisReceiverPageAfterNavigationTest,
+  redisReceiverPageWithAsyncClientComponentTest,
  };

react_on_rails_pro/spec/dummy/e2e-tests/streaming.spec.ts

@@ -1,12 +1,11 @@
+import { expect } from '@playwright/test';
 import {
   redisReceiverPageTest,
   redisReceiverInsideRouterPageTest,
   redisReceiverPageAfterNavigationTest,
+  redisReceiverPageWithAsyncClientComponentTest,
 } from './fixture';
 
-// Can be used to delay the execution
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-
 // Snapshot testing the best testing strategy for our use case
 // Because we need to ensure that any transformation done on the HTML or RSC payload stream won't affect
 //   - Order of fallback or components at the page
@@ -17,8 +16,39 @@ const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
   ['RedisReceiver', redisReceiverPageTest],
   ['RedisReceiver inside router page', redisReceiverInsideRouterPageTest],
   ['RedisReceiver inside router after navigation', redisReceiverPageAfterNavigationTest],
+  ['RedisReceiver with Async Toggle Container Client Component', redisReceiverPageWithAsyncClientComponentTest],
 ] as const).forEach(([pageName, test]) => {
-  test(`snapshot for page ${pageName}`, async ({ matchPageSnapshot, sendRedisItemValue }) => {
+  test(`incremental rendering of page: ${pageName}`, async ({ matchPageSnapshot, sendRedisItemValue }) => {
+    await matchPageSnapshot('stage0');
+
+    sendRedisItemValue(0, 'Incremental Value1');
+    await matchPageSnapshot('stage1');
+
+    sendRedisItemValue(3, 'Incremental Value4');
+    await matchPageSnapshot('stage2');
+
+    sendRedisItemValue(1, 'Incremental Value2');
+    await matchPageSnapshot('stage3');
+
+    sendRedisItemValue(2, 'Incremental Value3');
+    await matchPageSnapshot('stage4');
+
+    sendRedisItemValue(4, 'Incremental Value5');
+    await matchPageSnapshot('stage5');
+  });
+
+  test(`early hydration of page: ${pageName}`, async ({ page, waitForConsoleMessage, matchPageSnapshot, sendRedisItemValue }) => {
+    waitForConsoleMessage('ToggleContainer with title');
+
+    await page.click('.toggle-button');
+    await expect(page.getByText(/Waiting for the key "Item\d"/)).not.toBeVisible();
+
+    await page.click('.toggle-button');
+    const fallbackElements = page.getByText(/Waiting for the key "Item\d"/);
+    await expect(fallbackElements).toHaveCount(5);
+    for (const el of await fallbackElements.all()) {
+      await expect(el).toBeVisible();
+    }
     await matchPageSnapshot('stage0');
 
     sendRedisItemValue(0, 'Incremental Value1');