add streaming tests

AbanoubGhadban · AbanoubGhadban · commit 94aa9442c71d · 2025-10-20T16:36:22.000+03:00
diff --git a/packages/react-on-rails-pro/src/RSCRoute.tsx b/packages/react-on-rails-pro/src/RSCRoute.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 /*
  * Copyright (c) 2025 Shakacode LLC
  *
diff --git a/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage0.aria.yml b/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage0.aria.yml
@@ -0,0 +1,8 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - list:
+    - paragraph: Waiting for the key "Item1"
+    - paragraph: Waiting for the key "Item2"
+    - paragraph: Waiting for the key "Item3"
+    - paragraph: Waiting for the key "Item4"
+    - paragraph: Waiting for the key "Item5"
diff --git a/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage1.aria.yml b/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage1.aria.yml
@@ -0,0 +1,8 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - list:
+    - listitem: "Value of \"Item1\": Incremental Value1"
+    - paragraph: Waiting for the key "Item2"
+    - paragraph: Waiting for the key "Item3"
+    - paragraph: Waiting for the key "Item4"
+    - paragraph: Waiting for the key "Item5"
diff --git a/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage2.aria.yml b/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage2.aria.yml
@@ -0,0 +1,8 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - list:
+    - listitem: "Value of \"Item1\": Incremental Value1"
+    - paragraph: Waiting for the key "Item2"
+    - paragraph: Waiting for the key "Item3"
+    - listitem: "Value of \"Item4\": Incremental Value4"
+    - paragraph: Waiting for the key "Item5"
diff --git a/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage3.aria.yml b/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage3.aria.yml
@@ -0,0 +1,8 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - list:
+    - listitem: "Value of \"Item1\": Incremental Value1"
+    - listitem: "Value of \"Item2\": Incremental Value2"
+    - paragraph: Waiting for the key "Item3"
+    - listitem: "Value of \"Item4\": Incremental Value4"
+    - paragraph: Waiting for the key "Item5"
diff --git a/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage4.aria.yml b/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage4.aria.yml
@@ -0,0 +1,8 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - list:
+    - listitem: "Value of \"Item1\": Incremental Value1"
+    - listitem: "Value of \"Item2\": Incremental Value2"
+    - listitem: "Value of \"Item3\": Incremental Value3"
+    - listitem: "Value of \"Item4\": Incremental Value4"
+    - paragraph: Waiting for the key "Item5"
diff --git a/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage5.aria.yml b/react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage5.aria.yml
@@ -0,0 +1,8 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - list:
+    - listitem: "Value of \"Item1\": Incremental Value1"
+    - listitem: "Value of \"Item2\": Incremental Value2"
+    - listitem: "Value of \"Item3\": Incremental Value3"
+    - listitem: "Value of \"Item4\": Incremental Value4"
+    - listitem: "Value of \"Item5\": Incremental Value5"
diff --git a/react_on_rails_pro/spec/dummy/app/controllers/pages_controller.rb b/react_on_rails_pro/spec/dummy/app/controllers/pages_controller.rb
@@ -76,7 +76,7 @@ def redis_receiver
       redis = ::Redis.new
       5.times do |index|
         sleep 1
-        redis.xadd("stream:#{@request_id}", { ":Item#{index + 1}" => "Value of Item#{index + 1}".to_json })
+        redis.xadd("stream:#{@request_id}", { ":Item#{index}" => "Value of Item#{index + 1}".to_json })
       end
     rescue StandardError => e
       Rails.logger.error "Error writing Items to Redis: #{e.message}"
diff --git a/react_on_rails_pro/spec/dummy/app/views/pages/server_router.html.erb b/react_on_rails_pro/spec/dummy/app/views/pages/server_router.html.erb
@@ -1,5 +1,9 @@
 <%= stream_react_component("ServerComponentRouter", 
-    props: @app_props_server_render.merge(artificialDelay: params[:artificial_delay] || 0, postsCount: params[:posts_count] || 2),
+    props: @app_props_server_render.merge(
+      artificialDelay: params[:artificial_delay] || 0,
+      postsCount: params[:posts_count] || 2,
+      requestId: params[:request_id],
+    ),
     trace: true, 
     id: "ServerComponentRouter-react-component-0") %>
 <hr/>
diff --git a/react_on_rails_pro/spec/dummy/client/app/components/ServerComponentRouter.tsx b/react_on_rails_pro/spec/dummy/client/app/components/ServerComponentRouter.tsx
@@ -41,6 +41,11 @@ export default function App({ basePath = '/server_router', ...props }: { basePat
               Server Component with visible streaming behavior
             </Link>
           </li>
+          <li>
+            <Link to={`${basePath}/redis-receiver-for-testing`}>
+              Redis Receiver For Testing
+            </Link>
+          </li>
           <li>
             <Link to={`${basePath}/server-component-with-retry`}>Server Component with Retry</Link>
           </li>
@@ -71,6 +76,10 @@ export default function App({ basePath = '/server_router', ...props }: { basePat
             />
             <Route path="client-component" element={<EchoProps {...props} />} />
           </Route>
+          <Route
+            path={`${basePath}/redis-receiver-for-testing`}
+            element={<RSCRoute componentName="RedisReceiver" componentProps={props} />}
+          />
           <Route
             path={`${basePath}/streaming-server-component`}
             element={<RSCRoute componentName="AsyncComponentsTreeForTesting" componentProps={props} />}
diff --git a/react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/RedisReceiver.jsx b/react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/RedisReceiver.jsx
@@ -1,33 +1,49 @@
 import React, { Suspense } from 'react';
+import ToggleContainer from '../components/RSCPostsPage/ToggleContainerForServerComponents';
 import { listenToRequestData } from '../utils/redisReceiver';
 import { ErrorBoundary } from '../components/ErrorBoundary';
 
-const RedisItem = async ({ getValue, redisKey }) => {
-  const value = await getValue(redisKey);
-  return <p>Value of "{redisKey}": {value}</p>
+const RedisItem = async ({ getValue, itemIndex }) => {
+  const value = await getValue(`Item${itemIndex}`);
+  return <li className={`redis-item${itemIndex}`}>Value of "Item{itemIndex + 1}": {value}</li>
 }
 
-const RedisItemWithWrapper = ({ getValue, redisKey }) => (
-  <Suspense fallback={<p>Waiting for the key "{redisKey}"</p>}>
-    <RedisItem getValue={getValue} redisKey={redisKey} />
-  </Suspense>
+const RedisItemWithWrapper = ({ getValue, itemIndex }) => (
+  <section class={`redis-item${itemIndex}-container`}>
+    <Suspense fallback={<p className={`redis-item${itemIndex}-fallback`}>Waiting for the key "Item{itemIndex + 1}"</p>}>
+      <RedisItem getValue={getValue} itemIndex={itemIndex} />
+    </Suspense>
+  </section>
 )
 
-const RedisReceiver = ({ requestId }, railsContext) => {
+// Convert it to async component and make tests control when it's rendered
+// To test the page behavior when a client component is rendered asynchronously at the page
+const AsyncToggleContainer = async ({ children, childrenTitle, getValue }) => {
+  await getValue('ToggleContainer');
+  return <ToggleContainer children={children} childrenTitle={childrenTitle} />
+}
+
+const RedisReceiver = ({ requestId, asyncToggleContainer }, railsContext) => {
   const { getValue, close } = listenToRequestData(requestId);
 
   if ('addPostSSRHook' in railsContext) {
     railsContext.addPostSSRHook(close);
   }
 
+  const UsedToggleContainer = asyncToggleContainer ? AsyncToggleContainer : ToggleContainer;
+
   return (
     <ErrorBoundary>
-      <h1>A list of items received from Redis:</h1>
-      <ol>
-        {
-          [1,2,3,4,5].map(index => <RedisItemWithWrapper key={index} getValue={getValue} redisKey={`Item${index}`} />)
-        }
-      </ol>
+      <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>
+      </main>
     </ErrorBoundary>
   )
 }
diff --git a/react_on_rails_pro/spec/dummy/e2e-tests/dummy.spec.ts b/react_on_rails_pro/spec/dummy/e2e-tests/dummy.spec.ts
@@ -0,0 +1,12 @@
+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);
+});
diff --git a/react_on_rails_pro/spec/dummy/e2e-tests/fixture.ts b/react_on_rails_pro/spec/dummy/e2e-tests/fixture.ts
@@ -0,0 +1,92 @@
+import { randomUUID } from 'crypto';
+import { test as base, Response, expect } from '@playwright/test';
+import { createClient, RedisClientType } from 'redis';
+
+type RedisClientFixture = {
+  redisClient: RedisClientType;
+};
+
+type RedisRequestIdFixture = {
+  redisRequestId: string;
+  nonBlockingNavigateWithRequestId: (path: string) => Promise<Response | null>
+}
+
+type RedisReceiverPageFixture = {
+  pagePath: string;
+}
+
+export type RedisReceiverControllerFixture = {
+  sendRedisValue: (key: string, value: unknown) => Promise<void>;
+  sendRedisItemValue: (itemIndex: Number, value: unknown) => Promise<void>;
+  matchPageSnapshot: (snapshotPath: string) => Promise<void>;
+}
+
+const redisControlledTest = base.extend<RedisRequestIdFixture, RedisClientFixture>({
+  redisClient: [async ({}, use, workerInfo) => {
+    console.log(`Creating Redis Client at Worker ${workerInfo.workerIndex}`)
+    const url = process.env.REDIS_URL || 'redis://localhost:6379';
+    const client = createClient({ url });
+    await client.connect();
+    await use(client as RedisClientType);
+    await client.close();
+  }, { scope: 'worker' }],
+
+  redisRequestId: async ({}, use) => {
+    await use(randomUUID());
+  },
+
+  nonBlockingNavigateWithRequestId: async ({ redisRequestId, page }, use) => {
+    await use((path) => page.goto(`${path}?request_id=${redisRequestId}`, { waitUntil: "commit" }))
+  },
+});
+
+const redisReceiverPageController = redisControlledTest.extend<RedisReceiverControllerFixture>({
+  sendRedisValue: async({ redisClient, redisRequestId }, use) => {
+    await use(async(key, value) => {
+      await redisClient.xAdd(`stream:${redisRequestId}`, '*', { [`:${key}`]: JSON.stringify(value) });
+    })
+  },
+  sendRedisItemValue: async({ sendRedisValue }, use) => {
+    await use(async(itemIndex, value) => {
+      await sendRedisValue(`Item${itemIndex}`, value);
+    })
+  },
+  matchPageSnapshot: async({ page }, use) => {
+    await use(async(snapshotPath) => {
+      await expect(page.locator('.redis-receiver-container:visible')).toBeVisible();
+      await expect(page.locator('.redis-receiver-container:visible').first()).toMatchAriaSnapshot({ name: `${snapshotPath}.aria.yml` });
+    })
+  },
+})
+
+const redisReceiverPageTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
+  pagePath: [async({ nonBlockingNavigateWithRequestId }, use) => {
+    const pagePath = '/redis_receiver_for_testing';
+    await nonBlockingNavigateWithRequestId(pagePath);
+    await use(pagePath);
+  }, { auto: true }]
+})
+
+const redisReceiverInsideRouterPageTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
+  pagePath: [async({ nonBlockingNavigateWithRequestId }, use) => {
+    const pagePath = '/server_router/redis-receiver-for-testing';
+    await nonBlockingNavigateWithRequestId(pagePath);
+    await use(pagePath);
+  }, { auto: true }]
+})
+
+const redisReceiverPageAfterNavigationTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
+  pagePath: [async({ nonBlockingNavigateWithRequestId, page }, use) => {
+    await nonBlockingNavigateWithRequestId('/server_router/simple-server-component');
+    await expect(page.getByText("Post 1")).toBeVisible({ timeout: 3000 });
+    await page.getByText("Redis Receiver For Testing").click();
+    await use('/server_router/redis-receiver-for-testing');
+  }, { auto: true }]
+})
+
+export { 
+  redisControlledTest,
+  redisReceiverPageTest,
+  redisReceiverInsideRouterPageTest,
+  redisReceiverPageAfterNavigationTest,
+ };
diff --git a/react_on_rails_pro/spec/dummy/e2e-tests/streaming.spec.ts b/react_on_rails_pro/spec/dummy/e2e-tests/streaming.spec.ts
@@ -1,51 +1,39 @@
-import { randomUUID } from 'crypto';
-import { test, expect, Page } from '@playwright/test';
-import { createClient } from 'redis';
-
-const createRedisClient = async () => {
-  const url = process.env.REDIS_URL || 'redis://localhost:6379';
-  const client = createClient({ url });
-  await client.connect();
-  return client;
-}
-
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
-
-const assertPageState = async(page: Page, sentValues: Number[]) => {
-  const nonSentValues = [1,2,3,4,5].filter(v => !sentValues.includes(v));
-
-  await Promise.all(sentValues.map(async (v) => {
-    await expect(page.getByText(`Value of "Item${v}": Value${v}`)).toBeVisible();
-    await expect(page.getByText(`Waiting for the key "Item${v}"`)).not.toBeVisible();
-  }));
-
-  await Promise.all(nonSentValues.map(async (v) => {
-    await expect(page.getByText(`Value of "Item${v}": Value${v}`)).not.toBeVisible()
-    await expect(page.getByText(`Waiting for the key "Item${v}"`)).toBeVisible()
-  }));
-}
-
-test('incrementally render RedisReciever page', async ({ page }) => {
-  const requestId = randomUUID();
-  await page.goto(`http://localhost:3000/redis_receiver_for_testing?request_id=${requestId}`, { waitUntil: "commit" });
-
-  const sentValues: Number[] = [];
-  await assertPageState(page, sentValues);
-
-  const redisClient = await createRedisClient();
-  redisClient.xAdd(`stream:${requestId}`, '*', { ':Item1': JSON.stringify('Value1') });
-  sentValues.push(1);
-  await assertPageState(page, sentValues);
-
-  redisClient.xAdd(`stream:${requestId}`, '*', { ':Item4': JSON.stringify('Value4') });
-  sentValues.push(4);
-  await assertPageState(page, sentValues);
-
-  redisClient.xAdd(`stream:${requestId}`, '*', { ':Item2': JSON.stringify('Value2') });
-  sentValues.push(2);
-  await assertPageState(page, sentValues);
-
-  redisClient.xAdd(`stream:${requestId}`, '*', { ':Item3': JSON.stringify('Value3') });
-  sentValues.push(3);
-  await assertPageState(page, sentValues);
-});
+import {
+  redisReceiverPageTest,
+  redisReceiverInsideRouterPageTest,
+  redisReceiverPageAfterNavigationTest,
+} 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
+//   - Any update chunk won't affect previously rendered parts of the page
+//   - Rendered component won't get back to its fallback component at any stage of the page
+//   - Snapshot testing saves huge number of complex assertions
+([
+  ['RedisReceiver', redisReceiverPageTest],
+  ['RedisReceiver inside router page', redisReceiverInsideRouterPageTest],
+  ['RedisReceiver inside router after navigation', redisReceiverPageAfterNavigationTest],
+] as const).forEach(([pageName, test]) => {
+  test(`snapshot for 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');
+  })
+})
diff --git a/react_on_rails_pro/spec/dummy/playwright.config.ts b/react_on_rails_pro/spec/dummy/playwright.config.ts
@@ -12,6 +12,11 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  expect: {
+    toMatchAriaSnapshot: {
+      pathTemplate: '__snapshots__/{testFilePath}/{arg}{ext}',
+    },
+  },
   testDir: './e2e-tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -29,7 +34,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('')`. */
-    // baseURL: 'http://localhost:3000',
+    baseURL: 'http://localhost:3000/',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client";`
	`2`	`+`
`1`	`3`	`/*`
`2`	`4`	`* Copyright (c) 2025 Shakacode LLC`
`3`	`5`	`*`