test(e2e): read the SSE protocol raw off a real server

A plain http reader against the running middleware covers what the
fake-response units simulated: the keep-alive handshake headers, real
heartbeat frames on real timers, and the catch-up sync reaching only
the newly connecting client while already-attached ones stay quiet.
The three fake-timer/fake-response equivalents leave hot.test.js; what
remains there has no end-to-end path (pure parsing, HTTP/2 headers,
forced pairing edges, progress throttling).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: bjohansebas

test/e2e/protocol.test.js

@@ -0,0 +1,110 @@
+import http from "node:http";
+
+import createHotApp from "../helpers/hot-app";
+
+jest.setTimeout(120000);
+
+/**
+ * Open a raw SSE connection and collect frames as they arrive.
+ * @param {string} url SSE endpoint url
+ * @returns {Promise<{ headers: EXPECTED_ANY, frames: string[], close: () => void }>} reader
+ */
+function openSseReader(url) {
+  return new Promise((resolve, reject) => {
+    const request = http.get(url, (res) => {
+      /** @type {string[]} */
+      const frames = [];
+      res.setEncoding("utf8");
+      res.on("data", (chunk) => {
+        for (const line of chunk.split("\n")) {
+          if (line.startsWith("data: ")) {
+            frames.push(line.slice("data: ".length));
+          }
+        }
+      });
+      resolve({
+        headers: res.headers,
+        frames,
+        close: () => request.destroy(),
+      });
+    });
+    request.on("error", reject);
+  });
+}
+
+/**
+ * @param {string[]} frames collected frames
+ * @param {(frame: string) => boolean} predicate match
+ * @param {number=} timeout give-up timeout
+ * @returns {Promise<void>} resolved when a frame matches
+ */
+async function waitForFrame(frames, predicate, timeout = 30000) {
+  const start = Date.now();
+
+  while (Date.now() - start < timeout) {
+    if (frames.some((frame) => predicate(frame))) {
+      return;
+    }
+
+    await new Promise((resolve) => {
+      setTimeout(resolve, 50);
+    });
+  }
+
+  throw new Error(`No frame matched.\nSeen:\n${frames.join("\n")}`);
+}
+
+// eslint-disable-next-line jsdoc/reject-any-type
+/** @typedef {any} EXPECTED_ANY */
+
+describe("SSE protocol (raw)", () => {
+  let app;
+  /** @type {{ close: () => void }[]} */
+  let readers = [];
+
+  afterEach(async () => {
+    for (const reader of readers) {
+      reader.close();
+    }
+    readers = [];
+    if (app) {
+      const closing = app;
+      app = undefined;
+      await closing.close();
+    }
+  });
+
+  it("keeps the HTTP/1 connection alive and heartbeats it", async () => {
+    app = await createHotApp({
+      code: "document.title = 'x';",
+      hot: { heartbeat: 100 },
+    });
+
+    const reader = await openSseReader(`${app.url}__webpack_hmr`);
+    readers.push(reader);
+
+    expect(reader.headers.connection).toBe("keep-alive");
+    expect(reader.headers["content-type"]).toBe(
+      "text/event-stream;charset=utf-8",
+    );
+
+    // Real timers, real frames.
+    await waitForFrame(reader.frames, (frame) => frame === "💓");
+  });
+
+  it("catch-up syncs only the newly connecting client", async () => {
+    app = await createHotApp({ code: "document.title = 'x';" });
+
+    const early = await openSseReader(`${app.url}__webpack_hmr`);
+    readers.push(early);
+    await waitForFrame(early.frames, (frame) => frame.includes('"sync"'));
+    early.frames.length = 0;
+
+    // A later client gets the catch-up sync; the connected one must not.
+    const late = await openSseReader(`${app.url}__webpack_hmr`);
+    readers.push(late);
+    await waitForFrame(late.frames, (frame) => frame.includes('"sync"'));
+
+    expect(early.frames.some((frame) => frame.includes('"sync"'))).toBe(false);
+  });
+});

test/hot.test.js

@@ -165,37 +165,6 @@ describe("hot middleware (unit)", () => {
       jest.useRealTimers();
     });
 
-    it("emits a heartbeat at the configured interval", () => {
-      const stream = createEventStream(1000, noopLogger);
-      const writes = [];
-      const fakeRes = {
-        writableEnded: false,
-        write: (chunk) => writes.push(chunk),
-        writeHead: () => {},
-        end: () => {},
-      };
-      const fakeReq = {
-        httpVersion: "1.1",
-        socket: { setKeepAlive: () => {} },
-        on: () => {},
-      };
-
-      stream.handler(fakeReq, fakeRes);
-      writes.length = 0;
-      jest.advanceTimersByTime(1000);
-
-      expect(writes.some((w) => w.includes("💓"))).toBe(true);
-
-      stream.close();
-    });
-
-    it("sets Connection: keep-alive for HTTP/1 clients", () => {
-      const stream = createEventStream(5000, noopLogger);
-      const { headers } = attachClient(stream, { httpVersion: "1.1" });
-      expect(headers.Connection).toBe("keep-alive");
-      stream.close();
-    });
-
     it("does not set Connection: keep-alive for HTTP/2 clients", () => {
       const stream = createEventStream(5000, noopLogger);
       const { headers } = attachClient(stream, { httpVersion: "2.0" });
@@ -366,22 +335,6 @@ describe("createHot", () => {
     hot.close();
   });
 
-  it("does not re-send the catch-up sync to already connected clients", () => {
-    const compiler = makeFakeCompiler();
-    const hot = createHot(compiler, {});
-    const { writes: firstWrites } = attachClient({ handler: hot.handle });
-
-    compiler.emitDone(makeFakeStats());
-    firstWrites.length = 0;
-
-    const { writes: secondWrites } = attachClient({ handler: hot.handle });
-
-    expect(secondWrites.some((w) => w.includes('"action":"sync"'))).toBe(true);
-    expect(firstWrites.some((w) => w.includes('"action":"sync"'))).toBe(false);
-
-    hot.close();
-  });
-
   it("pairs bundles by name when the compilation order changes", () => {
     const compiler = makeFakeCompiler();
     const hot = createHot(compiler, {});