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'} -
{JSON.stringify(results.test1)}
+
+ {JSON.stringify(results.test1)}
+
{/* Test 2: Multiple Raw Streams */}
@@ -108,7 +113,12 @@ function ClientCallTests() {
>
{loading.test2 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test2)}
+
+ {JSON.stringify(results.test2)}
+
{/* Test 3: JSON Ends First */}
@@ -128,7 +138,12 @@ function ClientCallTests() {
>
{loading.test3 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test3)}
+
+ {JSON.stringify(results.test3)}
+
{/* Test 4: Raw Ends First */}
@@ -148,7 +163,12 @@ function ClientCallTests() {
>
{loading.test4 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test4)}
+
+ {JSON.stringify(results.test4)}
+
{/* Test 5: Large Binary */}
@@ -172,7 +192,12 @@ function ClientCallTests() {
>
{loading.test5 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test5)}
+
+ {JSON.stringify(results.test5)}
+
{/* Test 6: Mixed Streaming */}
@@ -192,7 +217,12 @@ function ClientCallTests() {
>
{loading.test6 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test6)}
+
+ {JSON.stringify(results.test6)}
+
{/* Hint Tests Section */}
@@ -224,7 +254,12 @@ function ClientCallTests() {
>
{loading.test7 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test7)}
+
+ {JSON.stringify(results.test7)}
+
{/* Test 8: Text Hint with Pure Binary */}
@@ -247,7 +282,12 @@ function ClientCallTests() {
>
{loading.test8 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test8)}
+
+ {JSON.stringify(results.test8)}
+
{/* Test 9: Text Hint with Mixed Content */}
@@ -270,7 +310,12 @@ function ClientCallTests() {
>
{loading.test9 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test9)}
+
+ {JSON.stringify(results.test9)}
+
{/* Test 10: Binary Hint with Text Data */}
@@ -295,7 +340,12 @@ function ClientCallTests() {
>
{loading.test10 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test10)}
+
+ {JSON.stringify(results.test10)}
+
{/* Test 11: Binary Hint with Binary Data */}
@@ -318,7 +368,12 @@ function ClientCallTests() {
>
{loading.test11 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test11)}
+
+ {JSON.stringify(results.test11)}
+
{/* Multiplexing Tests Section */}
@@ -352,7 +407,12 @@ function ClientCallTests() {
>
{loading.test12 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test12)}
+
+ {JSON.stringify(results.test12)}
+
{/* Test 13: Burst-Pause-Burst */}
@@ -375,7 +435,12 @@ function ClientCallTests() {
>
{loading.test13 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test13)}
+
+ {JSON.stringify(results.test13)}
+
{/* Test 14: Three Concurrent Streams */}
@@ -406,7 +471,12 @@ function ClientCallTests() {
>
{loading.test14 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test14)}
+
+ {JSON.stringify(results.test14)}
+
{/* Edge Case Tests Section */}
@@ -435,7 +505,12 @@ function ClientCallTests() {
>
{loading.test15 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test15)}
+
+ {JSON.stringify(results.test15)}
+
{/* Test 16: Stream Error */}
@@ -467,7 +542,12 @@ function ClientCallTests() {
>
{loading.test16 ? 'Loading...' : 'Run Test'}
- {JSON.stringify(results.test16)}
+
+ {JSON.stringify(results.test16)}
+
)
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')
})
})