From a19587be4c827ca1eb5a45c61d5a933bd6fb0ef7 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 6 Oct 2021 18:01:22 +0530 Subject: [PATCH] test: add e2e tests for reconnect --- client-src/socket.js | 3 + .../client-reconnect.test.js.snap.webpack4 | 62 +++++++ .../client-reconnect.test.js.snap.webpack5 | 62 +++++++ test/e2e/client-reconnect.test.js | 167 ++++++++++++++++++ 4 files changed, 294 insertions(+) create mode 100644 test/e2e/__snapshots__/client-reconnect.test.js.snap.webpack4 create mode 100644 test/e2e/__snapshots__/client-reconnect.test.js.snap.webpack5 create mode 100644 test/e2e/client-reconnect.test.js diff --git a/client-src/socket.js b/client-src/socket.js index 0fcb0b3f9c..a4bc8f8255 100644 --- a/client-src/socket.js +++ b/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); diff --git a/test/e2e/__snapshots__/client-reconnect.test.js.snap.webpack4 b/test/e2e/__snapshots__/client-reconnect.test.js.snap.webpack4 new file mode 100644 index 0000000000..0ade8f8fbf --- /dev/null +++ b/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`; diff --git a/test/e2e/__snapshots__/client-reconnect.test.js.snap.webpack5 b/test/e2e/__snapshots__/client-reconnect.test.js.snap.webpack5 new file mode 100644 index 0000000000..0ade8f8fbf --- /dev/null +++ b/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`; diff --git a/test/e2e/client-reconnect.test.js b/test/e2e/client-reconnect.test.js new file mode 100644 index 0000000000..152154d367 --- /dev/null +++ b/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"); + }); + }); +});