From f91b984e443aa06e3a735b7025707fcfc85fcd86 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Mon, 5 Jan 2026 19:18:48 +0200
Subject: [PATCH] wait for results to be available before testing

---
 .../src/routes/raw-stream/client-call.tsx     | 158 +++++++++---
 .../basic/tests/raw-stream.spec.ts            | 236 ++++++++----------
 2 files changed, 226 insertions(+), 168 deletions(-)

diff --git a/e2e/react-start/basic/src/routes/raw-stream/client-call.tsx b/e2e/react-start/basic/src/routes/raw-stream/client-call.tsx
index 1fc7d049900..8179d56808e 100644
--- a/e2e/react-start/basic/src/routes/raw-stream/client-call.tsx
+++ b/e2e/react-start/basic/src/routes/raw-stream/client-call.tsx
@@ -1,29 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import * as React from 'react'
 import {
-  singleRawStreamFn,
-  multipleRawStreamsFn,
-  jsonEndsFirstFn,
-  rawEndsFirstFn,
-  largeBinaryFn,
-  mixedStreamingFn,
-  textHintPureTextFn,
-  textHintPureBinaryFn,
-  textHintMixedFn,
-  binaryHintTextFn,
-  binaryHintBinaryFn,
-  interleavedStreamsFn,
-  burstPauseBurstFn,
-  threeStreamsFn,
-  emptyStreamFn,
-  errorStreamFn,
-  createStreamConsumer,
-  consumeBinaryStream,
-  collectBytes,
-  compareBytes,
-  TEST7_EXPECTED,
-  TEST8_EXPECTED,
-  TEST9_EXPECTED,
   TEST10_EXPECTED,
   TEST11_EXPECTED,
   TEST12_STREAM_A_EXPECTED,
@@ -32,6 +9,29 @@ import {
   TEST14_STREAM_A_EXPECTED,
   TEST14_STREAM_B_EXPECTED,
   TEST14_STREAM_C_EXPECTED,
+  TEST7_EXPECTED,
+  TEST8_EXPECTED,
+  TEST9_EXPECTED,
+  binaryHintBinaryFn,
+  binaryHintTextFn,
+  burstPauseBurstFn,
+  collectBytes,
+  compareBytes,
+  consumeBinaryStream,
+  createStreamConsumer,
+  emptyStreamFn,
+  errorStreamFn,
+  interleavedStreamsFn,
+  jsonEndsFirstFn,
+  largeBinaryFn,
+  mixedStreamingFn,
+  multipleRawStreamsFn,
+  rawEndsFirstFn,
+  singleRawStreamFn,
+  textHintMixedFn,
+  textHintPureBinaryFn,
+  textHintPureTextFn,
+  threeStreamsFn,
 } from '../../raw-stream-fns'
 
 export const Route = createFileRoute('/raw-stream/client-call')({
@@ -88,7 +88,12 @@ function ClientCallTests() {
         >
           {loading.test1 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test1-result">{JSON.stringify(results.test1)}</pre>
+        <pre
+          className={results.test1 ? '' : 'hidden'}
+          data-testid="test1-result"
+        >
+          {JSON.stringify(results.test1)}
+        </pre>
       </div>
 
       {/* Test 2: Multiple Raw Streams */}
@@ -108,7 +113,12 @@ function ClientCallTests() {
         >
           {loading.test2 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test2-result">{JSON.stringify(results.test2)}</pre>
+        <pre
+          className={results.test2 ? '' : 'hidden'}
+          data-testid="test2-result"
+        >
+          {JSON.stringify(results.test2)}
+        </pre>
       </div>
 
       {/* Test 3: JSON Ends First */}
@@ -128,7 +138,12 @@ function ClientCallTests() {
         >
           {loading.test3 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test3-result">{JSON.stringify(results.test3)}</pre>
+        <pre
+          className={results.test3 ? '' : 'hidden'}
+          data-testid="test3-result"
+        >
+          {JSON.stringify(results.test3)}
+        </pre>
       </div>
 
       {/* Test 4: Raw Ends First */}
@@ -148,7 +163,12 @@ function ClientCallTests() {
         >
           {loading.test4 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test4-result">{JSON.stringify(results.test4)}</pre>
+        <pre
+          className={results.test4 ? '' : 'hidden'}
+          data-testid="test4-result"
+        >
+          {JSON.stringify(results.test4)}
+        </pre>
       </div>
 
       {/* Test 5: Large Binary */}
@@ -172,7 +192,12 @@ function ClientCallTests() {
         >
           {loading.test5 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test5-result">{JSON.stringify(results.test5)}</pre>
+        <pre
+          className={results.test5 ? '' : 'hidden'}
+          data-testid="test5-result"
+        >
+          {JSON.stringify(results.test5)}
+        </pre>
       </div>
 
       {/* Test 6: Mixed Streaming */}
@@ -192,7 +217,12 @@ function ClientCallTests() {
         >
           {loading.test6 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test6-result">{JSON.stringify(results.test6)}</pre>
+        <pre
+          className={results.test6 ? '' : 'hidden'}
+          data-testid="test6-result"
+        >
+          {JSON.stringify(results.test6)}
+        </pre>
       </div>
 
       {/* Hint Tests Section */}
@@ -224,7 +254,12 @@ function ClientCallTests() {
         >
           {loading.test7 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test7-result">{JSON.stringify(results.test7)}</pre>
+        <pre
+          className={results.test7 ? '' : 'hidden'}
+          data-testid="test7-result"
+        >
+          {JSON.stringify(results.test7)}
+        </pre>
       </div>
 
       {/* Test 8: Text Hint with Pure Binary */}
@@ -247,7 +282,12 @@ function ClientCallTests() {
         >
           {loading.test8 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test8-result">{JSON.stringify(results.test8)}</pre>
+        <pre
+          className={results.test8 ? '' : 'hidden'}
+          data-testid="test8-result"
+        >
+          {JSON.stringify(results.test8)}
+        </pre>
       </div>
 
       {/* Test 9: Text Hint with Mixed Content */}
@@ -270,7 +310,12 @@ function ClientCallTests() {
         >
           {loading.test9 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test9-result">{JSON.stringify(results.test9)}</pre>
+        <pre
+          className={results.test9 ? '' : 'hidden'}
+          data-testid="test9-result"
+        >
+          {JSON.stringify(results.test9)}
+        </pre>
       </div>
 
       {/* Test 10: Binary Hint with Text Data */}
@@ -295,7 +340,12 @@ function ClientCallTests() {
         >
           {loading.test10 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test10-result">{JSON.stringify(results.test10)}</pre>
+        <pre
+          className={results.test10 ? '' : 'hidden'}
+          data-testid="test10-result"
+        >
+          {JSON.stringify(results.test10)}
+        </pre>
       </div>
 
       {/* Test 11: Binary Hint with Binary Data */}
@@ -318,7 +368,12 @@ function ClientCallTests() {
         >
           {loading.test11 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test11-result">{JSON.stringify(results.test11)}</pre>
+        <pre
+          className={results.test11 ? '' : 'hidden'}
+          data-testid="test11-result"
+        >
+          {JSON.stringify(results.test11)}
+        </pre>
       </div>
 
       {/* Multiplexing Tests Section */}
@@ -352,7 +407,12 @@ function ClientCallTests() {
         >
           {loading.test12 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test12-result">{JSON.stringify(results.test12)}</pre>
+        <pre
+          className={results.test12 ? '' : 'hidden'}
+          data-testid="test12-result"
+        >
+          {JSON.stringify(results.test12)}
+        </pre>
       </div>
 
       {/* Test 13: Burst-Pause-Burst */}
@@ -375,7 +435,12 @@ function ClientCallTests() {
         >
           {loading.test13 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test13-result">{JSON.stringify(results.test13)}</pre>
+        <pre
+          className={results.test13 ? '' : 'hidden'}
+          data-testid="test13-result"
+        >
+          {JSON.stringify(results.test13)}
+        </pre>
       </div>
 
       {/* Test 14: Three Concurrent Streams */}
@@ -406,7 +471,12 @@ function ClientCallTests() {
         >
           {loading.test14 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test14-result">{JSON.stringify(results.test14)}</pre>
+        <pre
+          className={results.test14 ? '' : 'hidden'}
+          data-testid="test14-result"
+        >
+          {JSON.stringify(results.test14)}
+        </pre>
       </div>
 
       {/* Edge Case Tests Section */}
@@ -435,7 +505,12 @@ function ClientCallTests() {
         >
           {loading.test15 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test15-result">{JSON.stringify(results.test15)}</pre>
+        <pre
+          className={results.test15 ? '' : 'hidden'}
+          data-testid="test15-result"
+        >
+          {JSON.stringify(results.test15)}
+        </pre>
       </div>
 
       {/* Test 16: Stream Error */}
@@ -467,7 +542,12 @@ function ClientCallTests() {
         >
           {loading.test16 ? 'Loading...' : 'Run Test'}
         </button>
-        <pre data-testid="test16-result">{JSON.stringify(results.test16)}</pre>
+        <pre
+          className={results.test16 ? '' : 'hidden'}
+          data-testid="test16-result"
+        >
+          {JSON.stringify(results.test16)}
+        </pre>
       </div>
     </div>
   )
diff --git a/e2e/react-start/basic/tests/raw-stream.spec.ts b/e2e/react-start/basic/tests/raw-stream.spec.ts
index b47b6c0c22b..5b0c6a0fffb 100644
--- a/e2e/react-start/basic/tests/raw-stream.spec.ts
+++ b/e2e/react-start/basic/tests/raw-stream.spec.ts
@@ -27,14 +27,14 @@ test.describe('RawStream - Client RPC Tests', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test1-btn').click()
+    await page
+      .getByTestId('test1-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
 
-    await expect(page.getByTestId('test1-result')).toContainText(
-      'chunk1chunk2chunk3',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test1-result')).toContainText(
-      'Single stream test',
-    )
+    const result = await page.getByTestId('test1-result').textContent()
+
+    expect(result).toContain('chunk1chunk2chunk3')
+    expect(result).toContain('Single stream test')
   })
 
   test('Multiple raw streams - returns multiple independent streams', async ({
@@ -47,17 +47,15 @@ test.describe('RawStream - Client RPC Tests', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test2-btn').click()
+    await page
+      .getByTestId('test2-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
 
-    await expect(page.getByTestId('test2-result')).toContainText(
-      'stream1-astream1-b',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test2-result')).toContainText(
-      'stream2-astream2-b',
-    )
-    await expect(page.getByTestId('test2-result')).toContainText(
-      'Multiple streams test',
-    )
+    const result = await page.getByTestId('test2-result').textContent()
+
+    expect(result).toContain('stream1-astream1-b')
+    expect(result).toContain('stream2-astream2-b')
+    expect(result).toContain('Multiple streams test')
   })
 
   test('JSON ends before raw stream - handles timing correctly', async ({
@@ -70,15 +68,14 @@ test.describe('RawStream - Client RPC Tests', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test3-btn').click()
+    await page
+      .getByTestId('test3-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test3-result').textContent()
 
-    await expect(page.getByTestId('test3-result')).toContainText(
-      'slow-1slow-2slow-3slow-4',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test3-result')).toContainText(
-      'JSON ends first test',
-    )
-    await expect(page.getByTestId('test3-result')).toContainText('hasTimestamp')
+    expect(result).toContain('slow-1slow-2slow-3slow-4')
+    expect(result).toContain('JSON ends first test')
+    expect(result).toContain('hasTimestamp')
   })
 
   test('Raw stream ends before JSON - handles timing correctly', async ({
@@ -91,16 +88,14 @@ test.describe('RawStream - Client RPC Tests', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test4-btn').click()
+    await page
+      .getByTestId('test4-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test4-result').textContent()
 
-    await expect(page.getByTestId('test4-result')).toContainText('fast-done', {
-      timeout: 10000,
-    })
-    await expect(page.getByTestId('test4-result')).toContainText(
-      'deferred-json-data',
-    )
-    await expect(page.getByTestId('test4-result')).toContainText(
-      'Raw ends first test',
-    )
+    expect(result).toContain('fast-done')
+    expect(result).toContain('deferred-json-data')
+    expect(result).toContain('Raw ends first test')
   })
 
   test('Large binary data - handles 3KB of binary correctly', async ({
@@ -113,17 +108,14 @@ test.describe('RawStream - Client RPC Tests', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test5-btn').click()
+    await page
+      .getByTestId('test5-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test5-result').textContent()
 
-    await expect(page.getByTestId('test5-result')).toContainText(
-      '"sizeMatch":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test5-result')).toContainText(
-      '"actualSize":3072',
-    )
-    await expect(page.getByTestId('test5-result')).toContainText(
-      'Large binary test',
-    )
+    expect(result).toContain('"sizeMatch":true')
+    expect(result).toContain('"actualSize":3072')
+    expect(result).toContain('Large binary test')
   })
 
   test('Mixed streaming - Promise and RawStream together', async ({ page }) => {
@@ -134,17 +126,14 @@ test.describe('RawStream - Client RPC Tests', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test6-btn').click()
+    await page
+      .getByTestId('test6-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test6-result').textContent()
 
-    await expect(page.getByTestId('test6-result')).toContainText(
-      'immediate-value',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test6-result')).toContainText(
-      'deferred-value',
-    )
-    await expect(page.getByTestId('test6-result')).toContainText(
-      'mixed-raw-1mixed-raw-2',
-    )
+    expect(result).toContain('immediate-value')
+    expect(result).toContain('deferred-value')
+    expect(result).toContain('mixed-raw-1mixed-raw-2')
   })
 })
 
@@ -268,17 +257,14 @@ test.describe('RawStream - Hint Parameter (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test7-btn').click()
+    await page
+      .getByTestId('test7-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test7-result').textContent()
 
-    await expect(page.getByTestId('test7-result')).toContainText(
-      '"match":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test7-result')).toContainText(
-      'Hello, World! This is text.',
-    )
-    await expect(page.getByTestId('test7-result')).toContainText(
-      'Text hint with pure text',
-    )
+    expect(result).toContain('"match":true')
+    expect(result).toContain('Hello, World! This is text.')
+    expect(result).toContain('Text hint with pure text')
   })
 
   test('Text hint with pure binary - fallback to base64', async ({ page }) => {
@@ -289,14 +275,13 @@ test.describe('RawStream - Hint Parameter (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test8-btn').click()
+    await page
+      .getByTestId('test8-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test8-result').textContent()
 
-    await expect(page.getByTestId('test8-result')).toContainText(
-      '"match":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test8-result')).toContainText(
-      '"expectedLength":12',
-    )
+    expect(result).toContain('"match":true')
+    expect(result).toContain('"expectedLength":12')
   })
 
   test('Text hint with mixed content - handles both', async ({ page }) => {
@@ -307,14 +292,13 @@ test.describe('RawStream - Hint Parameter (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test9-btn').click()
+    await page
+      .getByTestId('test9-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test9-result').textContent()
 
-    await expect(page.getByTestId('test9-result')).toContainText(
-      '"match":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test9-result')).toContainText(
-      '"expectedLength":30',
-    )
+    expect(result).toContain('"match":true')
+    expect(result).toContain('"expectedLength":30')
   })
 
   test('Binary hint with text data - uses base64', async ({ page }) => {
@@ -325,14 +309,13 @@ test.describe('RawStream - Hint Parameter (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test10-btn').click()
+    await page
+      .getByTestId('test10-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test10-result').textContent()
 
-    await expect(page.getByTestId('test10-result')).toContainText(
-      '"match":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test10-result')).toContainText(
-      'This is text but using binary hint',
-    )
+    expect(result).toContain('"match":true')
+    expect(result).toContain('This is text but using binary hint')
   })
 
   test('Binary hint with binary data - uses base64', async ({ page }) => {
@@ -343,14 +326,13 @@ test.describe('RawStream - Hint Parameter (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test11-btn').click()
+    await page
+      .getByTestId('test11-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+    const result = await page.getByTestId('test11-result').textContent()
 
-    await expect(page.getByTestId('test11-result')).toContainText(
-      '"match":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test11-result')).toContainText(
-      '"expectedLength":6',
-    )
+    expect(result).toContain('"match":true')
+    expect(result).toContain('"expectedLength":6')
   })
 })
 
@@ -490,14 +472,14 @@ test.describe('RawStream - Multiplexing Tests (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test12-btn').click()
+    await page
+      .getByTestId('test12-result')
+      .waitFor({ state: 'visible', timeout: 15000 })
+    const result = await page.getByTestId('test12-result').textContent()
 
     // Both streams should have matching bytes
-    await expect(page.getByTestId('test12-result')).toContainText(
-      '"match":true',
-      { timeout: 15000 },
-    )
+    expect(result).toContain('"match":true')
     // Verify both streams match
-    const result = await page.getByTestId('test12-result').textContent()
     const parsed = JSON.parse(result || '{}')
     expect(parsed.streamA?.match).toBe(true)
     expect(parsed.streamB?.match).toBe(true)
@@ -513,14 +495,13 @@ test.describe('RawStream - Multiplexing Tests (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test13-btn').click()
+    await page
+      .getByTestId('test13-result')
+      .waitFor({ state: 'visible', timeout: 15000 })
+    const result = await page.getByTestId('test13-result').textContent()
 
-    await expect(page.getByTestId('test13-result')).toContainText(
-      '"match":true',
-      { timeout: 15000 },
-    )
-    await expect(page.getByTestId('test13-result')).toContainText(
-      'Burst-pause-burst test',
-    )
+    expect(result).toContain('"match":true')
+    expect(result).toContain('Burst-pause-burst test')
   })
 
   test('Three concurrent streams - different timing patterns', async ({
@@ -533,14 +514,14 @@ test.describe('RawStream - Multiplexing Tests (RPC)', () => {
     await page.waitForTimeout(HYDRATION_WAIT)
 
     await page.getByTestId('test14-btn').click()
+    await page
+      .getByTestId('test14-result')
+      .waitFor({ state: 'visible', timeout: 15000 })
+    const result = await page.getByTestId('test14-result').textContent()
 
     // All three streams should match
-    await expect(page.getByTestId('test14-result')).toContainText(
-      '"match":true',
-      { timeout: 15000 },
-    )
+    expect(result).toContain('"match":true')
     // Verify all three streams match
-    const result = await page.getByTestId('test14-result').textContent()
     const parsed = JSON.parse(result || '{}')
     expect(parsed.fast?.match).toBe(true)
     expect(parsed.slow?.match).toBe(true)
@@ -631,16 +612,14 @@ test.describe('RawStream - Edge Cases (RPC)', () => {
 
     await page.getByTestId('test15-btn').click()
 
-    await expect(page.getByTestId('test15-result')).toContainText(
-      '"isEmpty":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test15-result')).toContainText(
-      '"byteCount":0',
-    )
-    await expect(page.getByTestId('test15-result')).toContainText(
-      'Empty stream test',
-    )
+    await page
+      .getByTestId('test15-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+
+    const result = await page.getByTestId('test15-result').textContent()
+    expect(result).toContain('"isEmpty":true')
+    expect(result).toContain('"byteCount":0')
+    expect(result).toContain('Empty stream test')
   })
 
   test('Stream error - propagates error to client', async ({ page }) => {
@@ -652,15 +631,14 @@ test.describe('RawStream - Edge Cases (RPC)', () => {
 
     await page.getByTestId('test16-btn').click()
 
-    await expect(page.getByTestId('test16-result')).toContainText(
-      '"errorCaught":true',
-      { timeout: 10000 },
-    )
-    await expect(page.getByTestId('test16-result')).toContainText(
-      'Intentional stream error',
-    )
-    await expect(page.getByTestId('test16-result')).toContainText(
-      'Error stream test',
-    )
+    await page
+      .getByTestId('test16-result')
+      .waitFor({ state: 'visible', timeout: 10000 })
+
+    const result = await page.getByTestId('test16-result').textContent()
+
+    expect(result).toContain('"errorCaught":true')
+    expect(result).toContain('Intentional stream error')
+    expect(result).toContain('Error stream test')
   })
 })