test: add e2e tests for proxy option

Author: snitin315

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

@@ -182,6 +182,30 @@ exports[`proxy option as an option is an object with the \`router\` option respe
 
 exports[`proxy option as an option is an object with the \`router\` option respects a proxy option: response text 1`] = `"from proxy1"`;
 
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: sockjs Should receive response: console messages 1`] = `
+Array [
+  "Failed to load resource: the server responded with a status of 426 (Upgrade Required)",
+]
+`;
+
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: sockjs Should receive response: page errors 1`] = `Array []`;
+
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: sockjs Should receive response: response status 1`] = `426`;
+
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: sockjs Should receive response: response text 1`] = `"Upgrade Required"`;
+
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: ws Should receive response: console messages 1`] = `
+Array [
+  "Failed to load resource: the server responded with a status of 426 (Upgrade Required)",
+]
+`;
+
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: ws Should receive response: page errors 1`] = `Array []`;
+
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: ws Should receive response: response status 1`] = `426`;
+
+exports[`proxy option should handles external websocket upgrade with webSocketServerType: ws Should receive response: response text 1`] = `"Upgrade Required"`;
+
 exports[`proxy option should sharing a proxy option respects proxy1 option: console messages 1`] = `Array []`;
 
 exports[`proxy option should sharing a proxy option respects proxy1 option: page errors 1`] = `Array []`;

test/e2e/proxy.test.js

@@ -3,14 +3,14 @@
 const path = require("path");
 const express = require("express");
 // const bodyParser = require("body-parser");
-// const WebSocket = require("ws");
+const WebSocket = require("ws");
 const webpack = require("webpack");
 const runBrowser = require("../helpers/run-browser");
 const Server = require("../../lib/Server");
 const config = require("../fixtures/proxy-config/webpack.config");
-const [port1, port2, port3] = require("../ports-map")["proxy-option"];
+const [port1, port2, port3, port4] = require("../ports-map")["proxy-option"];
 
-// const WebSocketServer = WebSocket.Server;
+const WebSocketServer = WebSocket.Server;
 const staticDirectory = path.resolve(__dirname, "../fixtures/proxy-config");
 
 const proxyOptionPathsAsProperties = {
@@ -966,4 +966,105 @@ describe("proxy option", () => {
       expect(pageErrors).toMatchSnapshot("page errors");
     });
   });
+
+  describe("should handles external websocket upgrade", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+    let ws;
+    let webSocketServer;
+    let responseMessage;
+
+    const webSocketServerTypes = ["sockjs", "ws"];
+
+    webSocketServerTypes.forEach((webSocketServerType) => {
+      describe(`with webSocketServerType: ${webSocketServerType}`, () => {
+        beforeEach(async () => {
+          compiler = webpack(config);
+
+          server = new Server(
+            {
+              webSocketServer: webSocketServerType,
+              proxy: [
+                {
+                  context: "/",
+                  target: `http://localhost:${port4}`,
+                  ws: true,
+                },
+              ],
+              port: port3,
+            },
+            compiler
+          );
+
+          await server.start();
+
+          webSocketServer = new WebSocketServer({ port: port4 });
+          webSocketServer.on("connection", (connection) => {
+            connection.on("message", (message) => {
+              connection.send(message);
+            });
+          });
+
+          ws = new WebSocket(`ws://localhost:${port3}/proxy3/socket`);
+
+          ws.on("message", (message) => {
+            responseMessage = message.toString();
+          });
+
+          ws.on("open", () => {
+            ws.send("foo");
+          });
+
+          ({ page, browser } = await runBrowser());
+
+          pageErrors = [];
+          consoleMessages = [];
+        });
+
+        afterEach(async () => {
+          webSocketServer.close();
+
+          for (const client of webSocketServer.clients) {
+            client.terminate();
+          }
+
+          await browser.close();
+          await server.stop();
+        });
+
+        it("Should receive response", async () => {
+          page
+            .on("console", (message) => {
+              consoleMessages.push(message);
+            })
+            .on("pageerror", (error) => {
+              pageErrors.push(error);
+            });
+
+          const response = await page.goto(
+            `http://localhost:${port3}/proxy3/socket`,
+            {
+              waitUntil: "networkidle0",
+            }
+          );
+
+          expect(responseMessage).toEqual("foo");
+
+          expect(response.status()).toMatchSnapshot("response status");
+
+          expect(await response.text()).toMatchSnapshot("response text");
+
+          expect(
+            consoleMessages.map((message) => message.text())
+          ).toMatchSnapshot("console messages");
+
+          expect(pageErrors).toMatchSnapshot("page errors");
+        });
+      });
+    });
+  });
 });