Replace streaming flaky tests with Playwright E2E tests

.circleci/config.yml

@@ -343,6 +343,56 @@ 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
+      - image: cimg/redis:6.2.6
+    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: install playwright dependencies
+          working_directory: react_on_rails_pro/spec/dummy
+          command: yarn playwright install --with-deps
+      - 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/test-results/results.xml
+      - store_artifacts:
+          path: react_on_rails_pro/spec/dummy/playwright-report
+
 workflows:
   version: 2
   build-and-test:
@@ -374,3 +424,7 @@ workflows:
           requires:
             - install-package-ruby-gems
             - build-dummy-app-webpack-test-bundles
+      - dummy-app-node-renderer-e2-tests:
+          requires:
+            - install-package-ruby-gems
+            - build-dummy-app-webpack-test-bundles

packages/react-on-rails-pro/src/RSCRoute.tsx

@@ -13,6 +13,7 @@
  */
 
 /// <reference types="react/experimental" />
+"use client";
 
 import * as React from 'react';
 import { useRSC } from './RSCProvider.tsx';

react_on_rails_pro/spec/dummy/.gitignore

@@ -1,2 +1,9 @@
 # React on Rails Pro license file
 config/react_on_rails_pro_license.key
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage0.aria.yml

@@ -0,0 +1,9 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - button "Hide Redis Items"
+  - 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"

react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage1.aria.yml

@@ -0,0 +1,9 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - button "Hide Redis Items"
+  - 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"

react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage2.aria.yml

@@ -0,0 +1,9 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - button "Hide Redis Items"
+  - 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"

react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage3.aria.yml

@@ -0,0 +1,9 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - button "Hide Redis Items"
+  - 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"

react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage4.aria.yml

@@ -0,0 +1,9 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - button "Hide Redis Items"
+  - 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"

react_on_rails_pro/spec/dummy/__snapshots__/streaming.spec.ts/stage5.aria.yml

@@ -0,0 +1,9 @@
+- main:
+  - heading "A list of items received from Redis:" [level=1]
+  - button "Hide Redis Items"
+  - 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"

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

@@ -69,6 +69,42 @@ 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}" => "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
+    ensure
+      begin
+        redis&.close
+      rescue StandardError => close_err
+        Rails.logger.warn "Failed to close Redis: #{close_err.message}"
+      end
+    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.blank?
+
+    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, asyncToggleContainer: params[:async_toggle_container] }, 
+    prerender: true, 
+    trace: true, 
+    id: "RedisReceiver-react-component-0") %>
+<hr/>
+
+<h1>React Rails Server Streaming Redis Receiver</h1>

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/>

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/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} />}

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

@@ -0,0 +1,56 @@
+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, itemIndex }) => {
+  const value = await getValue(`Item${itemIndex}`);
+  return <li className={`redis-item${itemIndex}`}>Value of "Item{itemIndex + 1}": {value}</li>
+}
+
+const RedisItemWithWrapper = ({ getValue, itemIndex }) => (
+  <section className={`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>
+)
+
+// 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 childrenTitle={childrenTitle}>{children}</ToggleContainer>
+}
+
+const RedisReceiver = ({ requestId, asyncToggleContainer }, railsContext) => {
+  const { getValue, close } = listenToRequestData(requestId);
+
+  if ('addPostSSRHook' in railsContext) {
+    railsContext.addPostSSRHook(close);
+  }
+
+  const UsedToggleContainer = asyncToggleContainer ? AsyncToggleContainer : ToggleContainer;
+
+  return () => (
+    <ErrorBoundary>
+      <main className='redis-receiver-container'>
+        <h1 className="redis-receiver-header">A list of items received from Redis:</h1>
+        <Suspense fallback={<div>Loading ToggleContainer</div>}>
+          <UsedToggleContainer
+            childrenTitle="Redis Items"
+            {...(toggleContainerGetValueParam ? { getValue } : {})}
+          >
+            <ol className='redis-items-container'>
+              {
+                [0,1,2,3,4].map(index => <RedisItemWithWrapper key={index} getValue={getValue} itemIndex={index} />)
+              }
+            </ol>
+          </UsedToggleContainer>
+        </Suspense>
+      </main>
+    </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