fix e2e

Author: sommeeeer

examples/app-router/app/streaming/route.ts

@@ -23,7 +23,10 @@ const encoder = new TextEncoder();
 
 async function* makeIterator() {
   for (let i = 1; i <= 10; i++) {
-    yield encoder.encode(`<p data-testid="iteratorCount">${i}</p>`);
+    const timestamp = Date.now();
+    yield encoder.encode(
+      `<p data-testid="iteratorCount" data-timestamp="${timestamp}">${i}</p>`
+    );
     await sleep(1000);
   }
 }

examples/pages-router/src/pages/api/streaming/index.ts

@@ -25,7 +25,10 @@ const encoder = new TextEncoder();
 
 async function* makeIterator() {
   for (let i = 1; i <= 10; i++) {
-    yield encoder.encode(`<p data-testid="iteratorCount">${i}</p>`);
+    const timestamp = Date.now();
+    yield encoder.encode(
+      `<p data-testid="iteratorCount" data-timestamp="${timestamp}">${i}</p>`
+    );
     await sleep(1000);
   }
 }

packages/tests-e2e/tests/appRouter/streaming.test.ts

@@ -30,13 +30,14 @@ test("streaming should work in route handler", async ({ page }) => {
     seenNumbers.length < ITERATOR_LENGTH &&
     Date.now() - startTime < 11000
   ) {
-    const paragraphs = await page.getByTestId("iteratorCount").allInnerTexts();
-    if (paragraphs.length > seenNumbers.length) {
-      // ensure that the numbers are streamed one by one
-      expect(paragraphs.length).toBe(seenNumbers.length + 1);
+    const elements = await page.getByTestId("iteratorCount").all();
+    if (elements.length > seenNumbers.length) {
+      expect(elements.length).toBe(seenNumbers.length + 1);
+      const newElement = elements[elements.length - 1];
+      const timestamp = await newElement.getAttribute('data-timestamp');
       seenNumbers.push({
-        number: paragraphs[seenNumbers.length],
-        time: Date.now() - startTime,
+        number: await newElement.innerText(),
+        time: parseInt(timestamp || '0', 10)
       });
     }
     await page.waitForTimeout(100);
@@ -46,9 +47,12 @@ test("streaming should work in route handler", async ({ page }) => {
     [...Array(ITERATOR_LENGTH)].map((_, i) => String(i + 1)),
   );
 
-  // verify streaming timing
+  // verify streaming timing using server timestamps
   for (let i = 1; i < seenNumbers.length; i++) {
     const timeDiff = seenNumbers[i].time - seenNumbers[i - 1].time;
-    expect(timeDiff).toBeGreaterThanOrEqual(900);
+    console.log(i, timeDiff);
+    expect(timeDiff).toBeGreaterThanOrEqual(
+      900,
+    );
   }
 });

packages/tests-e2e/tests/pagesRouter/streaming.test.ts

@@ -1,9 +1,9 @@
 import { expect, test } from "@playwright/test";
 
-test("streaming should work in api route", async ({ page }) => {
+test("streaming should work in route handler", async ({ page }) => {
   const ITERATOR_LENGTH = 10;
 
-  const res = await page.goto("/api/streaming", {
+  const res = await page.goto("/streaming", {
     // we set waitUntil: "commit" to ensure that the response is streamed
     // without this option, the response would be buffered and sent all at once
     // we could also drop the `await` aswell, but then we can't see the headers first.
@@ -30,13 +30,14 @@ test("streaming should work in api route", async ({ page }) => {
     seenNumbers.length < ITERATOR_LENGTH &&
     Date.now() - startTime < 11000
   ) {
-    const paragraphs = await page.getByTestId("iteratorCount").allInnerTexts();
-    if (paragraphs.length > seenNumbers.length) {
-      // ensure that the numbers are streamed one by one
-      expect(paragraphs.length).toBe(seenNumbers.length + 1);
+    const elements = await page.getByTestId("iteratorCount").all();
+    if (elements.length > seenNumbers.length) {
+      expect(elements.length).toBe(seenNumbers.length + 1);
+      const newElement = elements[elements.length - 1];
+      const timestamp = await newElement.getAttribute('data-timestamp');
       seenNumbers.push({
-        number: paragraphs[seenNumbers.length],
-        time: Date.now() - startTime,
+        number: await newElement.innerText(),
+        time: parseInt(timestamp || '0', 10)
       });
     }
     await page.waitForTimeout(100);
@@ -46,9 +47,12 @@ test("streaming should work in api route", async ({ page }) => {
     [...Array(ITERATOR_LENGTH)].map((_, i) => String(i + 1)),
   );
 
-  // verify streaming timing
+  // verify streaming timing using server timestamps
   for (let i = 1; i < seenNumbers.length; i++) {
     const timeDiff = seenNumbers[i].time - seenNumbers[i - 1].time;
-    expect(timeDiff).toBeGreaterThanOrEqual(900);
+    console.log(i, timeDiff);
+    expect(timeDiff).toBeGreaterThanOrEqual(
+      800,
+    );
   }
 });