test: update WebSocket handling in client tests to use CDP sessions

Author: bjohansebas

test/e2e/__snapshots__/client.test.js.snap.webpack5

@@ -6,16 +6,38 @@ exports[`client option configure client entry should disable client entry: page
 
 exports[`client option configure client entry should disable client entry: response status 1`] = `200`;
 
-exports[`client option default behaviour responds with a 200 status code for /ws path: console messages 1`] = `[]`;
+exports[`client option configure client entry should disable client entry: webSockets 1`] = `[]`;
 
-exports[`client option default behaviour responds with a 200 status code for /ws path: page errors 1`] = `[]`;
+exports[`client option default behaviour responds with a 200 status code for / path: console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+]
+`;
 
-exports[`client option default behaviour responds with a 200 status code for /ws path: response status 1`] = `200`;
+exports[`client option default behaviour responds with a 200 status code for / path: page errors 1`] = `[]`;
+
+exports[`client option default behaviour responds with a 200 status code for / path: response status 1`] = `200`;
+
+exports[`client option default behaviour responds with a 200 status code for / path: webSockets 1`] = `
+[
+  "ws://localhost:8104/ws",
+]
+`;
 
 exports[`client option override client entry should disable client entry: response status 1`] = `200`;
 
-exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: console messages 1`] = `[]`;
+exports[`client option should respect path option responds with a websocket with the /foo/test/bar path: console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+]
+`;
 
-exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: page errors 1`] = `[]`;
+exports[`client option should respect path option responds with a websocket with the /foo/test/bar path: page errors 1`] = `[]`;
 
-exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: response status 1`] = `200`;
+exports[`client option should respect path option responds with a websocket with the /foo/test/bar path: webSockets 1`] = `
+[
+  "ws://localhost:8104/foo/test/bar",
+]
+`;

test/e2e/client.test.js

@@ -2,8 +2,9 @@
 
 const webpack = require("webpack");
 const Server = require("../../lib/Server");
-const config = require("../fixtures/simple-config-other/webpack.config");
+const config = require("../fixtures/provide-plugin-ws-config/webpack.config");
 const runBrowser = require("../helpers/run-browser");
+const sessionSubscribe = require("../helpers/session-subscribe");
 const port = require("../ports-map")["client-option"];
 
 describe("client option", () => {
@@ -42,7 +43,7 @@ describe("client option", () => {
       await server.stop();
     });
 
-    it("responds with a 200 status code for /ws path", async () => {
+    it("responds with a 200 status code for / path", async () => {
       page
         .on("console", (message) => {
           consoleMessages.push(message);
@@ -51,7 +52,22 @@ describe("client option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://localhost:${port}/ws`, {
+      const webSocketRequests = [];
+      const session = await page.target().createCDPSession();
+
+      session.on("Network.webSocketCreated", (test) => {
+        webSocketRequests.push(test);
+      });
+
+      await session.send("Target.setAutoAttach", {
+        autoAttach: true,
+        flatten: true,
+        waitForDebuggerOnStart: true,
+      });
+
+      sessionSubscribe(session);
+
+      const response = await page.goto(`http://localhost:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -60,6 +76,10 @@ describe("client option", () => {
 
       expect(response.status()).toMatchSnapshot("response status");
 
+      expect(webSocketRequests.map((request) => request.url)).toMatchSnapshot(
+        "webSockets",
+      );
+
       expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
         "console messages",
       );
@@ -110,7 +130,7 @@ describe("client option", () => {
       await server.stop();
     });
 
-    it("responds with a 200 status code for /foo/test/bar path", async () => {
+    it("responds with a websocket with the /foo/test/bar path", async () => {
       page
         .on("console", (message) => {
           consoleMessages.push(message);
@@ -119,14 +139,28 @@ describe("client option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(
-        `http://localhost:${port}/foo/test/bar`,
-        {
-          waitUntil: "networkidle0",
-        },
-      );
+      const webSocketRequests = [];
+      const session = await page.target().createCDPSession();
 
-      expect(response.status()).toMatchSnapshot("response status");
+      session.on("Network.webSocketCreated", (test) => {
+        webSocketRequests.push(test);
+      });
+
+      await session.send("Target.setAutoAttach", {
+        autoAttach: true,
+        flatten: true,
+        waitForDebuggerOnStart: true,
+      });
+
+      sessionSubscribe(session);
+
+      await page.goto(`http://localhost:${port}/`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(webSocketRequests.map((request) => request.url)).toMatchSnapshot(
+        "webSockets",
+      );
 
       expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
         "console messages",
@@ -177,10 +211,27 @@ describe("client option", () => {
           pageErrors.push(error);
         });
 
+      const webSocketRequests = [];
+      const session = await page.target().createCDPSession();
+
+      session.on("Network.webSocketCreated", (test) => {
+        webSocketRequests.push(test);
+      });
+
+      await session.send("Target.setAutoAttach", {
+        autoAttach: true,
+        flatten: true,
+        waitForDebuggerOnStart: true,
+      });
+
+      sessionSubscribe(session);
+
       const response = await page.goto(`http://localhost:${port}/main.js`, {
         waitUntil: "networkidle0",
       });
 
+      expect(webSocketRequests).toMatchSnapshot("webSockets");
+
       expect(response.status()).toMatchSnapshot("response status");
 
       expect(await response.text()).not.toMatch(/client\/index\.js/);