fix CI failure and other tiny improvements

Author: AbanoubGhadban

.circleci/config.yml

@@ -380,6 +380,10 @@ jobs:
           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

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

@@ -94,7 +94,7 @@ def redis_receiver
 
   def redis_receiver_for_testing
     @request_id = params[:request_id]
-    raise "request_id is required at the url" if @request_id.empty?
+    raise "request_id is required at the url" if @request_id.blank?
 
     stream_view_containing_react_components(template: "/pages/redis_receiver")
   end

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

@@ -9,7 +9,7 @@ const RedisItem = async ({ getValue, itemIndex }) => {
 }
 
 const RedisItemWithWrapper = ({ getValue, itemIndex }) => (
-  <section class={`redis-item${itemIndex}-container`}>
+  <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>

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

@@ -17,7 +17,7 @@ type RedisReceiverPageFixture = {
 
 export type RedisReceiverControllerFixture = {
   sendRedisValue: (key: string, value: unknown) => Promise<void>;
-  sendRedisItemValue: (itemIndex: Number, value: unknown) => Promise<void>;
+  sendRedisItemValue: (itemIndex: number, value: unknown) => Promise<void>;
   matchPageSnapshot: (snapshotPath: string) => Promise<void>;
   waitForConsoleMessage: (msg: string) => Promise<void>;
   getNetworkRequests: (requestUrlPattern: RegExp) => Promise<Request[]>;
@@ -33,8 +33,9 @@ const redisControlledTest = base.extend<RedisRequestIdFixture, RedisClientFixtur
     await client.close();
   }, { scope: 'worker' }],
 
-  redisRequestId: async ({}, use) => {
+  redisRequestId: async ({ redisClient }, use) => {
     await use(randomUUID());
+    redisClient.del
   },
 
   nonBlockingNavigateWithRequestId: async ({ redisRequestId, page }, use) => {

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

@@ -22,24 +22,24 @@ import {
   test(`incremental rendering of page: ${pageName}`, async ({ matchPageSnapshot, sendRedisItemValue }) => {
     await matchPageSnapshot('stage0');
 
-    sendRedisItemValue(0, 'Incremental Value1');
+    await sendRedisItemValue(0, 'Incremental Value1');
     await matchPageSnapshot('stage1');
 
-    sendRedisItemValue(3, 'Incremental Value4');
+    await sendRedisItemValue(3, 'Incremental Value4');
     await matchPageSnapshot('stage2');
 
-    sendRedisItemValue(1, 'Incremental Value2');
+    await sendRedisItemValue(1, 'Incremental Value2');
     await matchPageSnapshot('stage3');
 
-    sendRedisItemValue(2, 'Incremental Value3');
+    await sendRedisItemValue(2, 'Incremental Value3');
     await matchPageSnapshot('stage4');
 
-    sendRedisItemValue(4, 'Incremental Value5');
+    await sendRedisItemValue(4, 'Incremental Value5');
     await matchPageSnapshot('stage5');
   });
 
   test(`early hydration of page: ${pageName}`, async ({ page, waitForConsoleMessage, matchPageSnapshot, sendRedisItemValue }) => {
-    waitForConsoleMessage('ToggleContainer with title');
+    await waitForConsoleMessage('ToggleContainer with title');
 
     await page.click('.toggle-button');
     await expect(page.getByText(/Waiting for the key "Item\d"/)).not.toBeVisible();
@@ -52,19 +52,19 @@ import {
     }
     await matchPageSnapshot('stage0');
 
-    sendRedisItemValue(0, 'Incremental Value1');
+    await sendRedisItemValue(0, 'Incremental Value1');
     await matchPageSnapshot('stage1');
 
-    sendRedisItemValue(3, 'Incremental Value4');
+    await sendRedisItemValue(3, 'Incremental Value4');
     await matchPageSnapshot('stage2');
 
-    sendRedisItemValue(1, 'Incremental Value2');
+    await sendRedisItemValue(1, 'Incremental Value2');
     await matchPageSnapshot('stage3');
 
-    sendRedisItemValue(2, 'Incremental Value3');
+    await sendRedisItemValue(2, 'Incremental Value3');
     await matchPageSnapshot('stage4');
 
-    sendRedisItemValue(4, 'Incremental Value5');
+    await sendRedisItemValue(4, 'Incremental Value5');
     await matchPageSnapshot('stage5');
   })
 })

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

@@ -27,7 +27,7 @@ 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: process.env.ci ? [
+  reporter: process.env.CI ? [
     ['html'],
     ['junit', { outputFile: 'test-results/results.xml' }]
   ] : 'html',