test(e2e): improve puppeteer argument flags (webpack#2127)

Author: knagaitsev

jest.config.js

@@ -8,4 +8,5 @@ module.exports = {
   testMatch: ['**/test/**/*.test.js'],
   setupFilesAfterEnv: ['<rootDir>/setupTest.js'],
   globalSetup: '<rootDir>/globalSetupTest.js',
+  testSequencer: '<rootDir>/test/testSequencer.js',
 };

lib/servers/SockJSServer.js

@@ -49,6 +49,11 @@ module.exports = class SockJSServer extends BaseServer {
   }
 
   send(connection, message) {
+    // prevent cases where the server is trying to send data while connection is closing
+    if (connection.readyState !== 1) {
+      return;
+    }
+
     connection.write(message);
   }
 

lib/servers/WebsocketServer.js

@@ -20,6 +20,11 @@ module.exports = class WebsocketServer extends BaseServer {
   }
 
   send(connection, message) {
+    // prevent cases where the server is trying to send data while connection is closing
+    if (connection.readyState !== 1) {
+      return;
+    }
+
     connection.send(message);
   }
 

test/e2e/Client.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 'use strict';
 
 /* eslint-disable
@@ -9,6 +13,10 @@ const testServer = require('../helpers/test-server');
 const reloadConfig = require('../fixtures/reload-config/webpack.config');
 const runBrowser = require('../helpers/run-browser');
 const port = require('../ports-map').Client;
+const {
+  reloadReadyDelay,
+  completeReloadDelay,
+} = require('../helpers/puppeteer-constants');
 
 const cssFilePath = resolve(__dirname, '../fixtures/reload-config/main.css');
 
@@ -53,7 +61,7 @@ describe('reload', () => {
             host: '0.0.0.0',
             inline: true,
             watchOptions: {
-              poll: 500,
+              poll: true,
             },
           },
           mode.options
@@ -91,27 +99,29 @@ describe('reload', () => {
                       }
                       req.continue();
                     });
-                    fs.writeFileSync(
-                      cssFilePath,
-                      'body { background-color: rgb(255, 0, 0); }'
-                    );
-                    page.waitFor(10000).then(() => {
-                      page
-                        .evaluate(() => {
-                          const body = document.body;
-                          const bgColor = getComputedStyle(body)[
-                            'background-color'
-                          ];
-                          return bgColor;
-                        })
-                        .then((color2) => {
-                          browser.close().then(() => {
-                            expect(color).toEqual('rgb(0, 0, 255)');
-                            expect(color2).toEqual('rgb(255, 0, 0)');
-                            expect(refreshed).toEqual(mode.shouldRefresh);
-                            done();
+                    page.waitFor(reloadReadyDelay).then(() => {
+                      fs.writeFileSync(
+                        cssFilePath,
+                        'body { background-color: rgb(255, 0, 0); }'
+                      );
+                      page.waitFor(completeReloadDelay).then(() => {
+                        page
+                          .evaluate(() => {
+                            const body = document.body;
+                            const bgColor = getComputedStyle(body)[
+                              'background-color'
+                            ];
+                            return bgColor;
+                          })
+                          .then((color2) => {
+                            browser.close().then(() => {
+                              expect(color).toEqual('rgb(0, 0, 255)');
+                              expect(color2).toEqual('rgb(255, 0, 0)');
+                              expect(refreshed).toEqual(mode.shouldRefresh);
+                              done();
+                            });
                           });
-                        });
+                      });
                     });
                   });
                 });

test/e2e/ClientMode.test.js

@@ -4,6 +4,10 @@ const testServer = require('../helpers/test-server');
 const config = require('../fixtures/client-config/webpack.config');
 const runBrowser = require('../helpers/run-browser');
 const port = require('../ports-map').ClientMode;
+const {
+  initConsoleDelay,
+  awaitServerCloseDelay,
+} = require('../helpers/puppeteer-constants');
 
 describe('clientMode', () => {
   const modes = [
@@ -54,17 +58,29 @@ describe('clientMode', () => {
               res.push(_text);
             });
 
-            setTimeout(() => {
+            page.waitFor(initConsoleDelay).then(() => {
               testServer.close(() => {
                 // make sure the client gets the close message
-                setTimeout(() => {
+                page.waitFor(awaitServerCloseDelay).then(() => {
                   browser.close().then(() => {
+                    for (let i = res.length - 1; i >= 0; i--) {
+                      if (res[i] === '[WDS] Disconnected!') {
+                        break;
+                      } else if (
+                        res[i] === 'close' ||
+                        res[i].includes('net::ERR_CONNECTION_REFUSED')
+                      ) {
+                        // remove additional logging for the now failing connection,
+                        // since this could be a variable number of error messages
+                        res.splice(i, 1);
+                      }
+                    }
                     expect(res).toMatchSnapshot();
                     done();
                   });
-                }, 1000);
+                });
               });
-            }, 3000);
+            });
           });
         });
       });