add redis receiver component and add a e2e test for it

Author: AbanoubGhadban

.circleci/config.yml

@@ -343,6 +343,51 @@ jobs:
       - store_artifacts:
           path: react_on_rails_pro/spec/dummy/yarn-error.log
 
+  # TODO: DRY with previous job
+  dummy-app-node-renderer-e2-tests:
+    docker:
+      - image: *docker_image
+    steps:
+      - checkout
+      - run: *print-system-info
+      - restore_cache: *restore-package-gem-cache
+      - restore_cache: *restore-package-node-modules-cache
+      - restore_cache: *restore-dummy-app-node-modules-cache
+      - restore_cache: *restore-dummy-app-gem-cache
+      - run: rm -rf react_on_rails_pro/spec/dummy/public/webpack
+      - run: rm -rf react_on_rails_pro/spec/dummy/ssr-generated
+      - restore_cache: *restore-dummy-app-webpack-bundle-cache
+      - run: *install-dummy-app-ruby-gems
+      - run: *install-package-node-modules
+      - run: *install-latest-chrome
+      - run: *install-dummy-app-node-modules
+      - run:
+          name: Generate file-system based entrypoints (Pro)
+          working_directory: react_on_rails_pro
+          command: cd spec/dummy && bundle exec rake react_on_rails:generate_packs
+      - run:
+          name: Run Pro Node renderer in a background
+          working_directory: react_on_rails_pro
+          command: cd spec/dummy && yarn run node-renderer
+          background: true
+      - run:
+          name: run rails server in background (Pro dummy app)
+          working_directory: react_on_rails_pro
+          command: cd spec/dummy && RAILS_ENV=test rails server
+          background: true
+      - run:
+          name: wait for rails server to start
+          command: |
+            while ! curl -s http://localhost:3000 > /dev/null; do sleep 1; done
+      - run:
+          name: Run playwright tests (Pro dummy app)
+          working_directory: react_on_rails_pro/spec/dummy
+          command: yarn e2e-test
+      - store_test_results:
+          path: react_on_rails_pro/spec/dummy/results.xml
+      - store_artifacts:
+          path: react_on_rails_pro/spec/dummy/playwright-report
+
 workflows:
   version: 2
   build-and-test:

react_on_rails_pro/e2e-tests/example.spec.ts

@@ -1,18 +1,51 @@
-import { test, expect } from '@playwright/test';
+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('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+  const requestId = randomUUID();
+  await page.goto(`http://localhost:3000/redis_receiver_for_testing?request_id=${requestId}`, { waitUntil: "commit" });
 
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
-});
+  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);
 
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+  redisClient.xAdd(`stream:${requestId}`, '*', { ':Item4': JSON.stringify('Value4') });
+  sentValues.push(4);
+  await assertPageState(page, sentValues);
 
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
+  redisClient.xAdd(`stream:${requestId}`, '*', { ':Item2': JSON.stringify('Value2') });
+  sentValues.push(2);
+  await assertPageState(page, sentValues);
 
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+  redisClient.xAdd(`stream:${requestId}`, '*', { ':Item3': JSON.stringify('Value3') });
+  sentValues.push(3);
+  await assertPageState(page, sentValues);
 });

react_on_rails_pro/package.json

@@ -90,7 +90,7 @@
     "pino-pretty": "^13.0.0",
     "prettier": "^3.2.5",
     "react-on-rails": "link:.yalc/react-on-rails",
-    "redis": "^5.0.1",
+    "redis": "^5.8.3",
     "release-it": "^17.6.0",
     "sentry-testkit": "^5.0.6",
     "touch": "^3.1.0",
@@ -122,6 +122,7 @@
     "postinstall": "test -f post-yarn-install.local && ./post-yarn-install.local || true",
     "link-source": "cd ../packages/react-on-rails && yarn && yalc publish",
     "test": "nps test",
+    "e2e-test": "playwright test",
     "prepack": "nps build.prepack",
     "prepare": "nps build.prepack",
     "prepublishOnly": "nps build",

react_on_rails_pro/playwright.config.ts

@@ -22,7 +22,10 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.ci ? [
+    ['html'],
+    ['junit', { outputFile: 'test-results/results.xml' }]
+  ] : 'html',
   /* 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('')`. */

react_on_rails_pro/spec/dummy/app/controllers/pages_controller.rb

@@ -69,6 +69,36 @@ def rsc_posts_page_over_redis
     raise "Redis thread timed out"
   end
 
+  def redis_receiver
+    @request_id = SecureRandom.uuid
+
+    redis_thread = Thread.new do
+      redis = ::Redis.new
+      5.times do |index|
+        sleep 1
+        redis.xadd("stream:#{@request_id}", { ":Item#{index + 1}" => "Value of Item#{index + 1}".to_json })
+      end
+    rescue StandardError => e
+      Rails.logger.error "Error writing Items to Redis: #{e.message}"
+      Rails.logger.error e.backtrace.join("\n")
+      raise e
+    end
+
+    stream_view_containing_react_components(template: "/pages/redis_receiver")
+
+    return if redis_thread.join(10)
+
+    Rails.logger.error "Redis thread timed out"
+    raise "Redis thread timed out"
+  end
+
+  def redis_receiver_for_testing
+    @request_id = params[:request_id]
+    raise "request_id is required at the url" if @request_id.empty?
+
+    stream_view_containing_react_components(template: "/pages/redis_receiver")
+  end
+
   def async_on_server_sync_on_client
     @render_on_server = true
     stream_view_containing_react_components(template: "/pages/async_on_server_sync_on_client")

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

@@ -0,0 +1,8 @@
+<%= stream_react_component("RedisReceiver", 
+    props: { requestId: @request_id }, 
+    prerender: true, 
+    trace: true, 
+    id: "RedisReceiver-react-component-0") %>
+<hr/>
+
+<h1>React Rails Server Streaming Redis Receiver</h1>

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

@@ -0,0 +1,35 @@
+import React, { Suspense } from 'react';
+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 RedisItemWithWrapper = ({ getValue, redisKey }) => (
+  <Suspense fallback={<p>Waiting for the key "{redisKey}"</p>}>
+    <RedisItem getValue={getValue} redisKey={redisKey} />
+  </Suspense>
+)
+
+const RedisReceiver = ({ requestId }, railsContext) => {
+  const { getValue, close } = listenToRequestData(requestId);
+
+  if ('addPostSSRHook' in railsContext) {
+    railsContext.addPostSSRHook(close);
+  }
+
+  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>
+    </ErrorBoundary>
+  )
+}
+
+export default RedisReceiver;

react_on_rails_pro/spec/dummy/config/routes.rb

@@ -20,6 +20,8 @@
   get "apollo_graphql" => "pages#apollo_graphql", as: :apollo_graphql
   get "lazy_apollo_graphql" => "pages#lazy_apollo_graphql", as: :lazy_apollo_graphql
   get "console_logs_in_async_server" => "pages#console_logs_in_async_server", as: :console_logs_in_async_server
+  get "redis_receiver" => "pages#redis_receiver", as: :redis_receiver
+  get "redis_receiver_for_testing" => "pages#redis_receiver_for_testing", as: :redis_receiver_for_testing
   get "stream_async_components" => "pages#stream_async_components", as: :stream_async_components
   get "stream_async_components_for_testing" => "pages#stream_async_components_for_testing",
       as: :stream_async_components_for_testing

react_on_rails_pro/yarn.lock

@@ -1604,32 +1604,32 @@
     "@pnpm/network.ca-file" "^1.0.1"
     config-chain "^1.1.11"
 
-"@redis/bloom@5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@redis/bloom/-/bloom-5.0.1.tgz#5f4c6bb2cce3908a4c3d246c69187321db9e1818"
-  integrity sha512-F7L+rnuJvq/upKaVoEgsf8VT7g5pLQYWRqSUOV3uO4vpVtARzSKJ7CLyJjVsQS+wZVCGxsLMh8DwAIDcny1B+g==
+"@redis/bloom@5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@redis/bloom/-/bloom-5.8.3.tgz#c0f04cba102eeb3a68792a599f7c320915eba366"
+  integrity sha512-1eldTzHvdW3Oi0TReb8m1yiFt8ZwyF6rv1NpZyG5R4TpCwuAdKQetBKoCw7D96tNFgsVVd6eL+NaGZZCqhRg4g==
 
-"@redis/client@5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@redis/client/-/client-5.0.1.tgz#d39d9c0114b865e2186e46b6d891701f46b293ad"
-  integrity sha512-k0EJvlMGEyBqUD3orKe0UMZ66fPtfwqPIr+ZSd853sXj2EyhNtPXSx+J6sENXJNgAlEBhvD+57Dwt0qTisKB0A==
+"@redis/client@5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@redis/client/-/client-5.8.3.tgz#186ebdd30ff874eae35b8d0ea3151137c22802be"
+  integrity sha512-MZVUE+l7LmMIYlIjubPosruJ9ltSLGFmJqsXApTqPLyHLjsJUSAbAJb/A3N34fEqean4ddiDkdWzNu4ZKPvRUg==
   dependencies:
     cluster-key-slot "1.1.2"
 
-"@redis/json@5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@redis/json/-/json-5.0.1.tgz#7eef09a2fac9e6ca6188ec34f9d313d4617f5b5b"
-  integrity sha512-t94HOTk5myfhvaHZzlUzk2hoUvH2jsjftcnMgJWuHL/pzjAJQoZDCUJzjkoXIUjWXuyJixTguaaDyOZWwqH2Kg==
+"@redis/json@5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@redis/json/-/json-5.8.3.tgz#f4efab4245b9f5c1d4ab80ec6f3c13aecb663c1e"
+  integrity sha512-DRR09fy/u8gynHGJ4gzXYeM7D8nlS6EMv5o+h20ndTJiAc7RGR01fdk2FNjnn1Nz5PjgGGownF+s72bYG4nZKQ==
 
-"@redis/search@5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@redis/search/-/search-5.0.1.tgz#805038a010b3d58765c65374d1a730247dfd2a5f"
-  integrity sha512-wipK6ZptY7K68B7YLVhP5I/wYCDUU+mDJMyJiUcQLuOs7/eKOBc8lTXKUSssor8QnzZSPy4A5ulcC5PZY22Zgw==
+"@redis/search@5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@redis/search/-/search-5.8.3.tgz#eb1159d1f6576244f47d779535515e83561ec1a4"
+  integrity sha512-EMIvEeGRR2I0BJEz4PV88DyCuPmMT1rDtznlsHY3cKSDcc9vj0Q411jUnX0iU2vVowUgWn/cpySKjpXdZ8m+5g==
 
-"@redis/time-series@5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@redis/time-series/-/time-series-5.0.1.tgz#b63654dad199fcbcd8315c27d6ae46db9120c211"
-  integrity sha512-k6PgbrakhnohsEWEAdQZYt3e5vSKoIzpKvgQt8//lnWLrTZx+c3ed2sj0+pKIF4FvnSeuXLo4bBWcH0Z7Urg1A==
+"@redis/time-series@5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@redis/time-series/-/time-series-5.8.3.tgz#d20158dceba05fd456f2abc58b05fe16c736d18e"
+  integrity sha512-5Jwy3ilsUYQjzpE7WZ1lEeG1RkqQ5kHtwV1p8yxXHSEmyUbC/T/AVgyjMcm52Olj/Ov/mhDKjx6ndYUi14bXsw==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
@@ -7020,16 +7020,16 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
-redis@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/redis/-/redis-5.0.1.tgz#2eda8388e1350638616fa4b2dc4a9f5dbdfa1911"
-  integrity sha512-J8nqUjrfSq0E8NQkcHDZ4HdEQk5RMYjP3jZq02PE+ERiRxolbDNxPaTT4xh6tdrme+lJ86Goje9yMt9uzh23hQ==
-  dependencies:
-    "@redis/bloom" "5.0.1"
-    "@redis/client" "5.0.1"
-    "@redis/json" "5.0.1"
-    "@redis/search" "5.0.1"
-    "@redis/time-series" "5.0.1"
+redis@^5.8.3:
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/redis/-/redis-5.8.3.tgz#c65d52ff9099579e278bf8ce100efbadafe5580a"
+  integrity sha512-MfSrfV6+tEfTw8c4W0yFp6XWX8Il4laGU7Bx4kvW4uiYM1AuZ3KGqEGt1LdQHeD1nEyLpIWetZ/SpY3kkbgrYw==
+  dependencies:
+    "@redis/bloom" "5.8.3"
+    "@redis/client" "5.8.3"
+    "@redis/json" "5.8.3"
+    "@redis/search" "5.8.3"
+    "@redis/time-series" "5.8.3"
 
 reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
   version "1.0.10"