meta: use ESBuild to bundle in E2E test suite (#3375)

* use ESBuild to bundle E2E tests

* fix linter warnings

* Update create-react-app deps

* list test suites dynamically

.eslintrc.js

@@ -228,11 +228,14 @@ module.exports = {
     },
 
     {
-      files: ['test/endtoend/*/*.js'],
+      files: ['test/endtoend/*/*.mjs', 'test/endtoend/*/*.ts'],
       rules: {
         // we mostly import @uppy stuff in these files.
         'import/no-extraneous-dependencies': ['off'],
       },
+    },
+    {
+      files: ['test/endtoend/*/*.js'],
       env: {
         mocha: true,
       },

bin/endtoend-build-tests

@@ -8,30 +8,30 @@ set -o xtrace
 # Set magic variables for current file & dir
 __dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 __file="${__dir}/$(basename "${BASH_SOURCE[0]}")"
-__base="$(basename ${__file} .sh)"
+__base="$(basename "${__file}" .sh)"
 __root="$(cd "$(dirname "${__dir}")" && pwd)"
+__e2eSuites="${__root}/test/endtoend"
 
-# Tests using a simple build setup.
-tests="chaos-monkey i18n-drag-drop providers thumbnails transloadit transloadit-assembly-options tus-drag-drop url-plugin xhr-limit"
-
-for t in $tests; do
-  mkdir -p "${__root}/test/endtoend/$t/dist"
-  cp "${__root}/packages/uppy/dist/uppy.min.css" "${__root}/test/endtoend/$t/dist"
-  cp "${__root}/test/endtoend/$t/index.html" "${__root}/test/endtoend/$t/dist"
-  browserify "${__root}/test/endtoend/$t/main.js" \
-    -o "${__root}/test/endtoend/$t/dist/bundle.js" \
-    -t @goto-bus-stop/envify \
-    -t babelify
+ESBUILD="$(corepack yarn workspace @uppy-tests/end2end bin esbuild)"
+
+for t in $(cd "$__e2eSuites" && ls -d */ | cut -f1 -d'/'); do
+  if [ "$t" = "tmp" ]; then continue; fi
+  if [ "$t" = "create-react-app" ]; then continue; fi
+
+  mkdir -p "${__e2eSuites}/$t/dist"
+  cp "${__root}/packages/uppy/dist/uppy.min.css" "${__e2eSuites}/$t/dist"
+  cp "${__e2eSuites}/$t/index.html" "${__e2eSuites}/$t/dist"
+
+  entryPointName="main.mjs"
+  if [ "$t" = "typescript" ]; then entryPointName="main.ts"; fi
+
+  "$ESBUILD" "${__e2eSuites}/$t/$entryPointName" \
+    --bundle --target=es2017 \
+    --outfile="${__e2eSuites}/$t/dist/bundle.js"
 done
 
 # Speeecial tests that need custom builds.
-pushd "${__root}/test/endtoend/create-react-app"
+pushd "${__e2eSuites}/create-react-app"
   npm install
   REACT_APP_ON_TRAVIS="${TRAVIS:-}" npm run build
 popd
-pushd "${__root}/test/endtoend/typescript"
-  mkdir -p dist
-  cp "${__root}/packages/uppy/dist/uppy.min.css" dist/
-  cp index.html dist/
-  browserify main.ts -t @goto-bus-stop/envify -p [ tsify --target ES3 ] -o dist/bundle.js
-popd

package.json

@@ -47,7 +47,6 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/register": "^7.10.5",
     "@goto-bus-stop/envify": "^5.0.0",
-    "@jamen/lorem": "^0.2.0",
     "@size-limit/preset-big-lib": "7.0.4",
     "@types/jasmine": "file:./private/@types/jasmine",
     "@types/jasminewd2": "file:./private/@types/jasmine",

test/endtoend/chaos-monkey/main.js → test/endtoend/chaos-monkey/main.mjs

@@ -1,10 +1,9 @@
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const Tus = require('@uppy/tus')
-const canvasToBlob = require('@uppy/utils/lib/canvasToBlob')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import Tus from '@uppy/tus'
+import canvasToBlob from '@uppy/utils/lib/canvasToBlob'
 
-const isOnTravis = !!(process.env.TRAVIS && process.env.CI)
-const endpoint = isOnTravis ? 'http://companion.test:1081' : 'http://localhost:1081'
+const endpoint = 'http://localhost:1081'
 
 let id = 0
 window.setup = function setup (options) {

test/endtoend/chaos-monkey/test.js

@@ -1,6 +1,5 @@
-/* global browser, expect  */
+/* global browser */
 const crypto = require('crypto')
-const lorem = require('@jamen/lorem')
 const { selectFakeFile } = require('../utils')
 
 const testURL = 'http://localhost:4567/chaos-monkey'
@@ -23,12 +22,12 @@ describe('Chaos monkey', function test () {
     const types = ['application/octet-stream', 'text/plain']
     const generate = {
       'application/octet-stream' () {
-        const len = Math.round(Math.random() * 5000000)
+        const len = Math.round(Math.random() * 5_000_000)
         return crypto.randomBytes(len)
       },
       'text/plain' () {
-        const len = Math.round(Math.random() * 5000000)
-        return Buffer.from(lorem(len))
+        const len = Math.round(Math.random() * 5_000_000 / 'Lorem ipsum'.length)
+        return Buffer.from('Lorem ipsum'.repeat(len))
       },
     }