test(e2e): More e2e test improvements (#2163)

.gitignore

@@ -14,4 +14,5 @@ node_modules
 .eslintcache
 
 test/fixtures/reload-config/main.css
+test/fixtures/reload-config-2/main.css
 !/test/fixtures/contentbase-config/public/node_modules

client-src/clients/SockJSClient.js

@@ -10,6 +10,11 @@ module.exports = class SockJSClient extends BaseClient {
   constructor(url) {
     super();
     this.sock = new SockJS(url);
+
+    this.sock.onerror = (err) => {
+      // TODO: use logger to log the error event once client and client-src
+      // are reorganized to have the same directory structure
+    };
   }
 
   static getClientPath(options) {

client-src/clients/WebsocketClient.js

@@ -11,6 +11,11 @@ module.exports = class WebsocketClient extends BaseClient {
   constructor(url) {
     super();
     this.client = new WebSocket(url.replace(/^http/, 'ws'));
+
+    this.client.onerror = (err) => {
+      // TODO: use logger to log the error event once client and client-src
+      // are reorganized to have the same directory structure
+    };
   }
 
   static getClientPath(options) {

test/e2e/ClientOptions.test.js

@@ -10,7 +10,7 @@ const [port1, port2, port3] = require('../ports-map').ClientOptions;
 const { beforeBrowserCloseDelay } = require('../helpers/puppeteer-constants');
 
 describe('Client code', () => {
-  function startProxy(port) {
+  function startProxy(port, cb) {
     const proxy = express();
     proxy.use(
       '/',
@@ -20,7 +20,7 @@ describe('Client code', () => {
         changeOrigin: true,
       })
     );
-    return proxy.listen(port);
+    return proxy.listen(port, cb);
   }
 
   beforeAll((done) => {
@@ -45,8 +45,8 @@ describe('Client code', () => {
   describe('behind a proxy', () => {
     let proxy;
 
-    beforeAll(() => {
-      proxy = startProxy(port2);
+    beforeAll((done) => {
+      proxy = startProxy(port2, done);
     });
 
     afterAll((done) => {
@@ -55,15 +55,14 @@ describe('Client code', () => {
       });
     });
 
-    it('responds with a 200', (done) => {
-      {
-        const req = request(`http://localhost:${port2}`);
-        req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
-      }
-      {
-        const req = request(`http://localhost:${port1}`);
-        req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
-      }
+    it('responds with a 200 on proxy port', (done) => {
+      const req = request(`http://localhost:${port2}`);
+      req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
+    });
+
+    it('responds with a 200 on non-proxy port', (done) => {
+      const req = request(`http://localhost:${port1}`);
+      req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
     });
 
     it('requests websocket through the proxy with proper port number', (done) => {

test/e2e/Progress.test.js

@@ -5,15 +5,15 @@
 */
 const fs = require('fs');
 const { resolve } = require('path');
-const reloadConfig = require('../fixtures/reload-config/webpack.config');
+const reloadConfig = require('../fixtures/reload-config-2/webpack.config');
 const runBrowser = require('../helpers/run-browser');
 const port = require('../ports-map').Progress;
 const {
   reloadReadyDelay,
   completeReloadDelay,
 } = require('../helpers/puppeteer-constants');
 
-const cssFilePath = resolve(__dirname, '../fixtures/reload-config/main.css');
+const cssFilePath = resolve(__dirname, '../fixtures/reload-config-2/main.css');
 
 describe('client progress', () => {
   let testServer;

test/fixtures/reload-config-2/foo.js

@@ -0,0 +1,4 @@
+'use strict';
+
+// eslint-disable-next-line import/no-unresolved
+require('./main.css');

test/fixtures/reload-config-2/webpack.config.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = {
+  mode: 'development',
+  context: __dirname,
+  entry: './foo.js',
+  output: {
+    path: '/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+  node: false,
+};