Add puppeteer for e2e browser code tests

Author: rlamana

package.json

@@ -75,13 +75,15 @@
     "html-webpack-plugin": "^3.0.6",
     "husky": "^1.3.1",
     "jest": "^24.0.0",
+    "jest-environment-webdriver": "^0.2.0",
     "jquery": "^3.2.1",
     "less": "^3.7.1",
     "less-loader": "^4.1.0",
     "lint-staged": "^8.1.1",
     "marked": "^0.5.0",
     "nyc": "^12.0.2",
     "prettier": "^1.16.3",
+    "puppeteer": "^1.12.2",
     "rimraf": "^2.6.2",
     "standard-version": "^4.4.0",
     "style-loader": "^0.22.1",

test/Client.test.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const path = require('path');
+const express = require('express');
+const httpProxy = require('http-proxy-middleware');
+const request = require('supertest');
+const runDevServer = require('./helpers/run-webpack-dev-server');
+const runBrowser = require('./helpers/run-browser');
+
+const configPath = path.resolve(
+  __dirname,
+  './fixtures/client-config/webpack.config.js'
+);
+
+function startProxy(port) {
+  const proxy = express();
+  proxy.use(
+    '/',
+    httpProxy({
+      target: 'http://0.0.0.0:8080',
+      ws: true,
+      changeOrigin: true,
+    })
+  );
+  return proxy.listen(port);
+}
+
+describe('Client code', () => {
+  let proxy;
+  let server;
+
+  beforeAll((done) => {
+    server = runDevServer('--host 0.0.0.0 --port 8080', configPath);
+    proxy = startProxy(9090);
+    setTimeout(done, 5000);
+  });
+
+  afterAll((done) => {
+    proxy.close();
+    server.close();
+    done();
+  });
+
+  describe('behind a proxy', () => {
+    jest.setTimeout(20000);
+
+    it('responds with a 200', (done) => {
+      const req = request('http://localhost:9090');
+      req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
+    });
+
+    it('requests websocket through the proxy with proper port number', (done) => {
+      runBrowser().then(({ page, browser }) => {
+        page
+          .waitForRequest((requestObj) => requestObj.url().match(/sockjs-node/))
+          .then((requestObj) => {
+            expect(requestObj.url()).toMatch(
+              /^http:\/\/localhost:9090\/sockjs-node/
+            );
+            browser.close();
+            done();
+          });
+        page.goto('http://localhost:9090/main');
+      });
+    });
+  });
+});

test/cli.test.js

@@ -19,7 +19,7 @@ const certPath = path.join(httpsCertificateDirectory, 'server.crt');
 describe('CLI', () => {
   it('--progress', (done) => {
     runDevServer('--progress')
-      .then((output) => {
+      .onClose.then((output) => {
         expect(output.code).toEqual(0);
         expect(output.stderr.indexOf('0% compiling') >= 0).toBeTruthy();
         done();
@@ -28,7 +28,7 @@ describe('CLI', () => {
   });
   it('--https', (done) => {
     runDevServer('--https')
-      .then((output) => {
+      .onClose.then((output) => {
         expect(output.code).toEqual(0);
         expect(
           output.stdout.indexOf('Project is running at') >= 0
@@ -41,7 +41,7 @@ describe('CLI', () => {
     runDevServer(
       `--https --cacert ${caPath} --pfx ${pfxPath} --key ${keyPath} --cert ${certPath} --pfx-passphrase webpack-dev-server`
     )
-      .then((output) => {
+      .onClose.then((output) => {
         expect(output.code).toEqual(0);
         expect(
           output.stdout.indexOf('Project is running at') >= 0

test/fixtures/client-config/foo.js

@@ -0,0 +1,3 @@
+'use strict';
+
+console.log('Hey.');

test/fixtures/client-config/index.html

@@ -0,0 +1 @@
+<script src="index.js"></script>

test/fixtures/client-config/webpack.config.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  mode: 'development',
+  context: __dirname,
+  entry: './foo.js',
+  output: {
+    path: '/',
+  },
+  node: false,
+};

test/helpers/run-browser.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+function runBrowser(config) {
+  const options = {
+    viewport: {
+      width: 500,
+      height: 500,
+    },
+    userAgent: '',
+    ...config,
+  };
+
+  return new Promise((resolve, reject) => {
+    let page;
+    let browser;
+
+    puppeteer
+      .launch({
+        headless: true,
+      })
+      .then((launchedBrowser) => {
+        browser = launchedBrowser;
+        return browser.newPage();
+      })
+      .then((newPage) => {
+        page = newPage;
+        page.emulate(options);
+        resolve({ page, browser });
+      })
+      .catch(reject);
+  });
+}
+
+module.exports = runBrowser;

test/helpers/run-webpack-dev-server.js

@@ -29,10 +29,9 @@ function runWebackDevServer(testArgs, configPath) {
   }
 
   const args = [webpackDevServerPath, '--config', configPath].concat(testArgs);
+  const child = execa('node', args, { cwd, env });
 
-  return new Promise((resolve, reject) => {
-    const child = execa('node', args, { cwd, env });
-
+  const onClose = new Promise((resolve, reject) => {
     child.on('error', (error) => reject(error));
 
     child.stdout.on('data', (data) => {
@@ -50,6 +49,13 @@ function runWebackDevServer(testArgs, configPath) {
       resolve({ stdout, stderr, code });
     });
   });
+
+  return {
+    onClose,
+    close: () => {
+      child.kill('SIGINT');
+    },
+  };
 }
 
 module.exports = runWebackDevServer;