test: add e2e tests for reconnect

client-src/socket.js

@@ -1,6 +1,7 @@
 /* global __webpack_dev_server_client__ */
 
 import WebSocketClient from "./clients/WebSocketClient.js";
+import { log } from "./utils/log.js";
 
 // this WebsocketClient is here as a default fallback, in case the client is not injected
 /* eslint-disable camelcase */
@@ -43,6 +44,8 @@ const socket = function initSocket(url, handlers, reconnect) {
 
       retries += 1;
 
+      log.info("Trying to reconnect...");
+
       setTimeout(() => {
         socket(url, handlers);
       }, retryInMs);

test/e2e/__snapshots__/client-reconnect.test.js.snap.webpack4

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`client.reconnect option specified as false should not try to reconnect: console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+]
+`;
+
+exports[`client.reconnect option specified as false should not try to reconnect: page errors 1`] = `Array []`;
+
+exports[`client.reconnect option specified as false should not try to reconnect: response status 1`] = `200`;
+
+exports[`client.reconnect option specified as number should try to reconnect 2 times: console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+]
+`;
+
+exports[`client.reconnect option specified as number should try to reconnect 2 times: page errors 1`] = `Array []`;
+
+exports[`client.reconnect option specified as number should try to reconnect 2 times: response status 1`] = `200`;
+
+exports[`client.reconnect option specified as true should try to reconnect unlimited times: console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+]
+`;
+
+exports[`client.reconnect option specified as true should try to reconnect unlimited times: page errors 1`] = `Array []`;
+
+exports[`client.reconnect option specified as true should try to reconnect unlimited times: response status 1`] = `200`;

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`client.reconnect option specified as false should not try to reconnect: console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+]
+`;
+
+exports[`client.reconnect option specified as false should not try to reconnect: page errors 1`] = `Array []`;
+
+exports[`client.reconnect option specified as false should not try to reconnect: response status 1`] = `200`;
+
+exports[`client.reconnect option specified as number should try to reconnect 2 times: console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+]
+`;
+
+exports[`client.reconnect option specified as number should try to reconnect 2 times: page errors 1`] = `Array []`;
+
+exports[`client.reconnect option specified as number should try to reconnect 2 times: response status 1`] = `200`;
+
+exports[`client.reconnect option specified as true should try to reconnect unlimited times: console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+  "WebSocket connection to 'ws://127.0.0.1:8106/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED",
+  "[webpack-dev-server] JSHandle@object",
+  "[webpack-dev-server] Trying to reconnect...",
+]
+`;
+
+exports[`client.reconnect option specified as true should try to reconnect unlimited times: page errors 1`] = `Array []`;
+
+exports[`client.reconnect option specified as true should try to reconnect unlimited times: response status 1`] = `200`;

test/e2e/client-reconnect.test.js

@@ -0,0 +1,167 @@
+"use strict";
+
+const webpack = require("webpack");
+const Server = require("../../lib/Server");
+const config = require("../fixtures/reload-config/webpack.config");
+const runBrowser = require("../helpers/run-browser");
+const port = require("../ports-map")["compress-option"];
+
+describe("client.reconnect option", () => {
+  describe("specified as true", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server({ port, client: { reconnect: true } }, compiler);
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+    });
+
+    it("should try to reconnect unlimited times", async () => {
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://127.0.0.1:${port}/main`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      await server.stop();
+      // Can't wait to check for unlimited times so wait only for 5-6 retries
+      // eslint-disable-next-line no-restricted-properties
+      await page.waitForTimeout(1000 * Math.pow(2, 5) + Math.random() * 100);
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+
+  describe("specified as false", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server({ port, client: { reconnect: false } }, compiler);
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+    });
+
+    it("should not try to reconnect", async () => {
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://127.0.0.1:${port}/main`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      await server.stop();
+      // Can't wait to check for unlimited times so wait only for 5-6 retries
+      // eslint-disable-next-line no-restricted-properties
+      await page.waitForTimeout(1000 * Math.pow(2, 2) + Math.random() * 100);
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+
+  describe("specified as number", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server({ port, client: { reconnect: 2 } }, compiler);
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+    });
+
+    it("should try to reconnect 2 times", async () => {
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://127.0.0.1:${port}/main`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      await server.stop();
+      // eslint-disable-next-line no-restricted-properties
+      await page.waitForTimeout(1000 * Math.pow(2, 2) + Math.random() * 100);
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+});