test: move ipc.test.js to Playwright

test/e2e-playwright/ipc.test.js

@@ -0,0 +1,353 @@
+"use strict";
+
+const os = require("os");
+const net = require("net");
+const path = require("path");
+const http = require("http");
+const webpack = require("webpack");
+const { test } = require("@playwright/test");
+const { expect } = require("@playwright/test");
+const { describe } = require("@playwright/test");
+const httpProxy = require("http-proxy");
+const Server = require("../../lib/Server");
+const config = require("../fixtures/client-config/webpack.config");
+const sessionSubscribe = require("../helpers/session-subscribe");
+const port1 = require("../ports-map").ipc;
+
+const webSocketServers = ["ws", "sockjs"];
+
+describe("web socket server URL", () => {
+  for (const webSocketServer of webSocketServers) {
+    const websocketURLProtocol = webSocketServer === "ws" ? "ws" : "http";
+
+    test(`should work with the "ipc" option using "true" value ("${webSocketServer}")`, async ({
+      page,
+    }) => {
+      const devServerHost = "127.0.0.1";
+      const proxyHost = devServerHost;
+      const proxyPort = port1;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        webSocketServer,
+        ipc: true,
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const proxy = httpProxy.createProxyServer({
+          target: { socketPath: server.options.ipc },
+        });
+
+        const proxyServer = http.createServer((request, response) => {
+          // You can define here your custom logic to handle the request
+          // and then proxy the request.
+          proxy.web(request, response);
+        });
+
+        proxyServer.on("upgrade", (request, socket, head) => {
+          proxy.ws(request, socket, head);
+        });
+
+        return proxyServer.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on("console", (message) => {
+            consoleMessages.push(message);
+          })
+          .on("pageerror", (error) => {
+            pageErrors.push(error);
+          });
+
+        const webSocketRequests = [];
+
+        if (webSocketServer === "ws") {
+          const session = await page.context().newCDPSession(page);
+
+          session.on("Network.webSocketCreated", (payload) => {
+            webSocketRequests.push(payload);
+          });
+
+          await session.send("Target.setAutoAttach", {
+            autoAttach: true,
+            flatten: true,
+            waitForDebuggerOnStart: true,
+          });
+
+          sessionSubscribe(session);
+        } else {
+          page.on("request", (request) => {
+            if (/\/ws\//.test(request.url())) {
+              webSocketRequests.push({ url: request.url() });
+            }
+          });
+        }
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: "networkidle0",
+        });
+
+        const webSocketRequest = webSocketRequests[0];
+
+        expect(webSocketRequest.url).toContain(
+          `${websocketURLProtocol}://${devServerHost}:${proxyPort}/ws`,
+        );
+        expect(
+          JSON.stringify(consoleMessages.map((message) => message.text())),
+        ).toMatchSnapshot();
+        expect(JSON.stringify(pageErrors)).toMatchSnapshot();
+      } catch (error) {
+        throw error;
+      } finally {
+        proxy.close();
+
+        await server.stop();
+      }
+    });
+
+    test(`should work with the "ipc" option using "string" value ("${webSocketServer}")`, async ({
+      page,
+    }) => {
+      const isWindows = process.platform === "win32";
+      const pipePrefix = isWindows ? "\\\\.\\pipe\\" : os.tmpdir();
+      const pipeName = `webpack-dev-server.${process.pid}-1.sock`;
+      const ipc = path.join(pipePrefix, pipeName);
+
+      const devServerHost = "127.0.0.1";
+      const proxyHost = devServerHost;
+      const proxyPort = port1;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        webSocketServer,
+        ipc,
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const proxy = httpProxy.createProxyServer({
+          target: { socketPath: ipc },
+        });
+
+        const proxyServer = http.createServer((request, response) => {
+          // You can define here your custom logic to handle the request
+          // and then proxy the request.
+          proxy.web(request, response);
+        });
+
+        proxyServer.on("upgrade", (request, socket, head) => {
+          proxy.ws(request, socket, head);
+        });
+
+        return proxyServer.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on("console", (message) => {
+            consoleMessages.push(message);
+          })
+          .on("pageerror", (error) => {
+            pageErrors.push(error);
+          });
+
+        const webSocketRequests = [];
+
+        if (webSocketServer === "ws") {
+          const session = await page.context().newCDPSession(page);
+
+          session.on("Network.webSocketCreated", (payload) => {
+            webSocketRequests.push(payload);
+          });
+
+          await session.send("Target.setAutoAttach", {
+            autoAttach: true,
+            flatten: true,
+            waitForDebuggerOnStart: true,
+          });
+
+          sessionSubscribe(session);
+        } else {
+          page.on("request", (request) => {
+            if (/\/ws\//.test(request.url())) {
+              webSocketRequests.push({ url: request.url() });
+            }
+          });
+        }
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: "networkidle0",
+        });
+
+        const webSocketRequest = webSocketRequests[0];
+
+        expect(webSocketRequest.url).toContain(
+          `${websocketURLProtocol}://${devServerHost}:${proxyPort}/ws`,
+        );
+        expect(
+          JSON.stringify(consoleMessages.map((message) => message.text())),
+        ).toMatchSnapshot();
+        expect(JSON.stringify(pageErrors)).toMatchSnapshot();
+      } catch (error) {
+        throw error;
+      } finally {
+        proxy.close();
+
+        await server.stop();
+      }
+    });
+
+    // TODO un skip after implement new API
+    test.skip(`should work with the "ipc" option using "string" value and remove old ("${webSocketServer}")`, async ({
+      page,
+    }) => {
+      const isWindows = process.platform === "win32";
+      const localRelative = path.relative(process.cwd(), `${os.tmpdir()}/`);
+      const pipePrefix = isWindows ? "\\\\.\\pipe\\" : localRelative;
+      const pipeName = `webpack-dev-server.${process.pid}-2.sock`;
+      const ipc = path.join(pipePrefix, pipeName);
+
+      const ipcServer = await new Promise((resolve, reject) => {
+        const server = net.Server();
+
+        server.on("error", (error) => {
+          reject(error);
+        });
+
+        return server.listen(ipc, () => {
+          resolve();
+        });
+      });
+
+      const devServerHost = "127.0.0.1";
+      const proxyHost = devServerHost;
+      const proxyPort = port1;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        webSocketServer,
+        host: devServerHost,
+        ipc,
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const proxy = httpProxy.createProxyServer({
+          target: { socketPath: ipc },
+        });
+
+        const proxyServer = http.createServer((request, response) => {
+          // You can define here your custom logic to handle the request
+          // and then proxy the request.
+          proxy.web(request, response);
+        });
+
+        proxyServer.on("upgrade", (request, socket, head) => {
+          proxy.ws(request, socket, head);
+        });
+
+        return proxyServer.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on("console", (message) => {
+            consoleMessages.push(message);
+          })
+          .on("pageerror", (error) => {
+            pageErrors.push(error);
+          });
+
+        const webSocketRequests = [];
+
+        if (webSocketServer === "ws") {
+          const session = await page.target().createCDPSession();
+
+          session.on("Network.webSocketCreated", (payload) => {
+            webSocketRequests.push(payload);
+          });
+
+          await session.send("Target.setAutoAttach", {
+            autoAttach: true,
+            flatten: true,
+            waitForDebuggerOnStart: true,
+          });
+
+          sessionSubscribe(session);
+        } else {
+          page.on("request", (request) => {
+            if (/\/ws\//.test(request.url())) {
+              webSocketRequests.push({ url: request.url() });
+            }
+          });
+        }
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: "networkidle0",
+        });
+
+        const webSocketRequest = webSocketRequests[0];
+
+        expect(webSocketRequest.url).toContain(
+          `${websocketURLProtocol}://${devServerHost}:${proxyPort}/ws`,
+        );
+        expect(
+          JSON.stringify(consoleMessages.map((message) => message.text())),
+        ).toMatchSnapshot();
+        expect(JSON.stringify(pageErrors)).toMatchSnapshot();
+      } catch (error) {
+        throw error;
+      } finally {
+        proxy.close();
+
+        await new Promise((resolve, reject) => {
+          ipcServer.close((error) => {
+            if (error) {
+              reject(error);
+
+              return;
+            }
+
+            resolve();
+          });
+        });
+        await server.stop();
+      }
+    });
+  }
+});

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-string-value-sockjs-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-string-value-sockjs-2-chromium-darwin.txt

@@ -0,0 +1 @@
+[]

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-string-value-ws-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-string-value-ws-2-chromium-darwin.txt

@@ -0,0 +1 @@
+[]

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-true-value-sockjs-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-true-value-sockjs-2-chromium-darwin.txt

@@ -0,0 +1 @@
+[]

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-true-value-ws-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/ipc.test.js-snapshots/web-socket-server-URL-should-work-with-the-ipc-option-using-true-value-ws-2-chromium-darwin.txt

@@ -0,0 +1 @@
+[]