add tests for rsc payload fetching

Author: AbanoubGhadban

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

@@ -1,5 +1,5 @@
 import { randomUUID } from 'crypto';
-import { test as base, Response, expect } from '@playwright/test';
+import { test as base, Response, expect, Request } from '@playwright/test';
 import { createClient, RedisClientType } from 'redis';
 
 type RedisClientFixture = {
@@ -20,6 +20,7 @@ export type RedisReceiverControllerFixture = {
   sendRedisItemValue: (itemIndex: Number, value: unknown) => Promise<void>;
   matchPageSnapshot: (snapshotPath: string) => Promise<void>;
   waitForConsoleMessage: (msg: string) => Promise<void>;
+  getNetworkRequests: (requestUrlPattern: RegExp) => Promise<Request[]>;
 }
 
 const redisControlledTest = base.extend<RedisRequestIdFixture, RedisClientFixture>({
@@ -72,6 +73,11 @@ const redisReceiverPageController = redisControlledTest.extend<RedisReceiverCont
         predicate: (consoleMsg) => consoleMsg.text().includes(msg),
       })
     })
+  },
+  getNetworkRequests: async({ page }, use) => {
+    await use(async(requestUrlPattern) => {
+      return (await page.requests()).filter(request => request.url().match(requestUrlPattern))
+    })
   }
 })
 
@@ -114,7 +120,8 @@ const redisReceiverPageAfterNavigationTest = redisReceiverPageController.extend<
   }, { auto: true }]
 })
 
-export { 
+export {
+  redisReceiverPageController,
   redisReceiverPageTest,
   redisReceiverInsideRouterPageTest,
   redisReceiverPageAfterNavigationTest,

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

@@ -1,5 +1,6 @@
-import { expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import {
+  redisReceiverPageController,
   redisReceiverPageTest,
   redisReceiverInsideRouterPageTest,
   redisReceiverPageAfterNavigationTest,
@@ -67,3 +68,19 @@ import {
     await matchPageSnapshot('stage5');
   })
 })
+
+redisReceiverInsideRouterPageTest('no RSC payload request is made when the page is server side rendered', async ({ getNetworkRequests }) => {
+  await expect(await getNetworkRequests(/rsc_payload/)).toHaveLength(0);
+})
+
+redisReceiverPageAfterNavigationTest('RSC payload request is made on navigation', async ({ getNetworkRequests }) => {
+  await expect(await getNetworkRequests(/rsc_payload/)).toHaveLength(1);
+})
+
+redisReceiverPageController('client side rendered router fetches RSC payload', async ({ page, getNetworkRequests }) => {
+  await page.goto('/server_router_client_render/simple-server-component');
+
+  await expect(page.getByText('Post 1')).toBeVisible();
+  await expect(page.getByText('Toggle')).toBeVisible();
+  await expect(await getNetworkRequests(/rsc_payload/)).toHaveLength(1);
+})