test(e2e): improve puppeteer argument flags

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);
+            });
           });
         });
       });

test/e2e/ClientOptions.test.js

@@ -7,6 +7,7 @@ const testServer = require('../helpers/test-server');
 const config = require('../fixtures/client-config/webpack.config');
 const runBrowser = require('../helpers/run-browser');
 const [port1, port2, port3] = require('../ports-map').ClientOptions;
+const { beforeBrowserCloseDelay } = require('../helpers/puppeteer-constants');
 
 describe('Client code', () => {
   function startProxy(port) {
@@ -70,13 +71,15 @@ describe('Client code', () => {
         page
           .waitForRequest((requestObj) => requestObj.url().match(/sockjs-node/))
           .then((requestObj) => {
-            browser.close().then(() => {
-              expect(
-                requestObj
-                  .url()
-                  .includes(`http://localhost:${port1}/sockjs-node`)
-              ).toBeTruthy();
-              done();
+            page.waitFor(beforeBrowserCloseDelay).then(() => {
+              browser.close().then(() => {
+                expect(
+                  requestObj
+                    .url()
+                    .includes(`http://localhost:${port1}/sockjs-node`)
+                ).toBeTruthy();
+                done();
+              });
             });
           });
         page.goto(`http://localhost:${port2}/main`);
@@ -111,13 +114,15 @@ describe('Client complex inline script path', () => {
             requestObj.url().match(/foo\/test\/bar/)
           )
           .then((requestObj) => {
-            browser.close().then(() => {
-              expect(
-                requestObj
-                  .url()
-                  .includes(`http://myhost.test:${port2}/foo/test/bar/`)
-              ).toBeTruthy();
-              done();
+            page.waitFor(beforeBrowserCloseDelay).then(() => {
+              browser.close().then(() => {
+                expect(
+                  requestObj
+                    .url()
+                    .includes(`http://myhost.test:${port2}/foo/test/bar/`)
+                ).toBeTruthy();
+                done();
+              });
             });
           });
         page.goto(`http://localhost:${port2}/main`);
@@ -152,13 +157,15 @@ describe('Client complex inline script path with sockPort', () => {
             requestObj.url().match(/foo\/test\/bar/)
           )
           .then((requestObj) => {
-            browser.close().then(() => {
-              expect(
-                requestObj
-                  .url()
-                  .includes(`http://localhost:${port3}/foo/test/bar`)
-              ).toBeTruthy();
-              done();
+            page.waitFor(beforeBrowserCloseDelay).then(() => {
+              browser.close().then(() => {
+                expect(
+                  requestObj
+                    .url()
+                    .includes(`http://localhost:${port3}/foo/test/bar`)
+                ).toBeTruthy();
+                done();
+              });
             });
           });
 
@@ -194,13 +201,15 @@ describe('Client complex inline script path with sockPort, no sockPath', () => {
         page
           .waitForRequest((requestObj) => requestObj.url().match(/sockjs-node/))
           .then((requestObj) => {
-            browser.close().then(() => {
-              expect(
-                requestObj
-                  .url()
-                  .includes(`http://localhost:${port3}/sockjs-node`)
-              ).toBeTruthy();
-              done();
+            page.waitFor(beforeBrowserCloseDelay).then(() => {
+              browser.close().then(() => {
+                expect(
+                  requestObj
+                    .url()
+                    .includes(`http://localhost:${port3}/sockjs-node`)
+                ).toBeTruthy();
+                done();
+              });
             });
           });
         page.goto(`http://localhost:${port2}/main`);
@@ -232,13 +241,15 @@ describe('Client complex inline script path with sockHost', () => {
         page
           .waitForRequest((requestObj) => requestObj.url().match(/sockjs-node/))
           .then((requestObj) => {
-            browser.close().then(() => {
-              expect(
-                requestObj
-                  .url()
-                  .includes(`http://myhost.test:${port2}/sockjs-node`)
-              ).toBeTruthy();
-              done();
+            page.waitFor(beforeBrowserCloseDelay).then(() => {
+              browser.close().then(() => {
+                expect(
+                  requestObj
+                    .url()
+                    .includes(`http://myhost.test:${port2}/sockjs-node`)
+                ).toBeTruthy();
+                done();
+              });
             });
           });
         page.goto(`http://localhost:${port2}/main`);
@@ -286,38 +297,47 @@ describe('Client console.log', () => {
     },
   ];
 
-  for (const { title, options } of cases) {
-    it(title, () => {
+  cases.forEach(({ title, options }) => {
+    it(title, (done) => {
       const res = [];
       const testOptions = Object.assign({}, baseOptions, options);
 
       // TODO: use async/await when Node.js v6 support is dropped
-      return Promise.resolve()
+      Promise.resolve()
         .then(() => {
           return new Promise((resolve) => {
             testServer.startAwaitingCompilation(config, testOptions, resolve);
           });
         })
-        .then(runBrowser)
+        .then(() => {
+          // make sure the previous Promise is not passing along strange arguments to runBrowser
+          return runBrowser();
+        })
         .then(({ page, browser }) => {
           return new Promise((resolve) => {
             page.goto(`http://localhost:${port2}/main`);
             page.on('console', ({ _text }) => {
               res.push(_text);
             });
-            setTimeout(() => {
-              browser.close().then(() => {
-                expect(res).toMatchSnapshot();
-                resolve();
+            // wait for load before closing the browser
+            page.waitForNavigation({ waitUntil: 'load' }).then(() => {
+              page.waitFor(beforeBrowserCloseDelay).then(() => {
+                browser.close().then(() => {
+                  resolve();
+                });
               });
-            }, 1000);
+            });
           });
         })
         .then(() => {
           return new Promise((resolve) => {
             testServer.close(resolve);
           });
+        })
+        .then(() => {
+          expect(res).toMatchSnapshot();
+          done();
         });
     });
-  }
+  });
 });

test/e2e/Iframe.test.js

@@ -4,6 +4,7 @@ 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').Iframe;
+const { beforeBrowserCloseDelay } = require('../helpers/puppeteer-constants');
 
 // iframe mode should be tested while still supported, because
 // its sources differ from those of inline mode, which can cause unexpected
@@ -46,38 +47,46 @@ describe('Client iframe console.log', () => {
     },
   ];
 
-  for (const { title, options } of cases) {
-    it(title, () => {
+  cases.forEach(({ title, options }) => {
+    it(title, (done) => {
       const res = [];
       const testOptions = Object.assign({}, baseOptions, options);
 
       // TODO: use async/await when Node.js v6 support is dropped
-      return Promise.resolve()
+      Promise.resolve()
         .then(() => {
           return new Promise((resolve) => {
             testServer.startAwaitingCompilation(config, testOptions, resolve);
           });
         })
-        .then(runBrowser)
+        .then(() => {
+          // make sure the previous Promise is not passing along strange arguments to runBrowser
+          return runBrowser();
+        })
         .then(({ page, browser }) => {
           return new Promise((resolve) => {
             page.goto(`http://localhost:${port}/webpack-dev-server/main`);
             page.on('console', ({ _text }) => {
               res.push(_text);
             });
-            setTimeout(() => {
-              browser.close().then(() => {
-                expect(res).toMatchSnapshot();
-                resolve();
+            page.waitForNavigation({ waitUntil: 'load' }).then(() => {
+              page.waitFor(beforeBrowserCloseDelay).then(() => {
+                browser.close().then(() => {
+                  resolve();
+                });
               });
-            }, 3000);
+            });
           });
         })
         .then(() => {
           return new Promise((resolve) => {
             testServer.close(resolve);
           });
+        })
+        .then(() => {
+          expect(res).toMatchSnapshot();
+          done();
         });
     });
-  }
+  });
 });