From 6a4e7fe9654a3508e9c6e57b2b1a73aad20ae011 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Wed, 15 Dec 2021 18:31:36 +0100 Subject: [PATCH 1/7] meta: use ESBuild to bundle E2E tests --- .eslintrc.js | 5 ++++- bin/endtoend-build-tests | 11 +++++----- .../chaos-monkey/{main.js => main.mjs} | 11 +++++----- test/endtoend/create-react-app/src/App.js | 3 +-- .../i18n-drag-drop/DeepFrozenStore.mjs} | 4 ++-- .../i18n-drag-drop/{main.js => main.mjs} | 11 +++++----- test/endtoend/providers/{main.js => main.mjs} | 17 +++++++------- .../endtoend/thumbnails/{main.js => main.mjs} | 11 +++++----- .../{main.js => main.mjs} | 6 ++--- .../transloadit/{main.js => main.mjs} | 17 ++++++-------- test/endtoend/tus-dashboard/main.js | 18 --------------- test/endtoend/tus-dashboard/main.mjs | 17 ++++++++++++++ .../tus-drag-drop/{main.js => main.mjs} | 8 +++---- test/endtoend/typescript/main.ts | 5 +---- test/endtoend/typescript/package.json | 6 ----- test/endtoend/url-plugin/main.js | 22 ------------------- test/endtoend/url-plugin/main.mjs | 21 ++++++++++++++++++ test/endtoend/xhr-limit/{main.js => main.mjs} | 6 ++--- 18 files changed, 93 insertions(+), 106 deletions(-) rename test/endtoend/chaos-monkey/{main.js => main.mjs} (73%) rename test/{resources/DeepFrozenStore.js => endtoend/i18n-drag-drop/DeepFrozenStore.mjs} (90%) rename test/endtoend/i18n-drag-drop/{main.js => main.mjs} (65%) rename test/endtoend/providers/{main.js => main.mjs} (64%) rename test/endtoend/thumbnails/{main.js => main.mjs} (77%) rename test/endtoend/transloadit-assembly-options/{main.js => main.mjs} (90%) rename test/endtoend/transloadit/{main.js => main.mjs} (69%) delete mode 100644 test/endtoend/tus-dashboard/main.js create mode 100644 test/endtoend/tus-dashboard/main.mjs rename test/endtoend/tus-drag-drop/{main.js => main.mjs} (70%) delete mode 100644 test/endtoend/typescript/package.json delete mode 100644 test/endtoend/url-plugin/main.js create mode 100644 test/endtoend/url-plugin/main.mjs rename test/endtoend/xhr-limit/{main.js => main.mjs} (79%) diff --git a/.eslintrc.js b/.eslintrc.js index a352242072..e022b35ccd 100644 --- a/.eslintrc.js +++ b/.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, }, diff --git a/bin/endtoend-build-tests b/bin/endtoend-build-tests index daf0dfd080..3d3520b1ba 100755 --- a/bin/endtoend-build-tests +++ b/bin/endtoend-build-tests @@ -18,10 +18,9 @@ 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 "${__root}/test/endtoend/$t/main.mjs" \ + --bundle \ + --outfile="${__root}/test/endtoend/$t/dist/bundle.js" done # Speeecial tests that need custom builds. @@ -33,5 +32,7 @@ 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 + esbuild "${__root}/test/endtoend/typescript/main.ts" \ + --bundle \ + --outfile="${__root}/test/endtoend/typescript/dist/bundle.js" popd diff --git a/test/endtoend/chaos-monkey/main.js b/test/endtoend/chaos-monkey/main.mjs similarity index 73% rename from test/endtoend/chaos-monkey/main.js rename to test/endtoend/chaos-monkey/main.mjs index 392243e64c..b8747bf5dd 100644 --- a/test/endtoend/chaos-monkey/main.js +++ b/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) { diff --git a/test/endtoend/create-react-app/src/App.js b/test/endtoend/create-react-app/src/App.js index 01dac34efb..f29f2d6b17 100644 --- a/test/endtoend/create-react-app/src/App.js +++ b/test/endtoend/create-react-app/src/App.js @@ -10,8 +10,7 @@ import '@uppy/core/dist/style.css' import '@uppy/dashboard/dist/style.css' /* eslint-enable import/no-extraneous-dependencies */ -const isOnTravis = process.env.REACT_APP_ON_TRAVIS -const endpoint = isOnTravis ? 'http://companion.test:1080' : 'http://localhost:1080' +const endpoint = 'http://localhost:1080' class App extends Component { constructor (props) { diff --git a/test/resources/DeepFrozenStore.js b/test/endtoend/i18n-drag-drop/DeepFrozenStore.mjs similarity index 90% rename from test/resources/DeepFrozenStore.js rename to test/endtoend/i18n-drag-drop/DeepFrozenStore.mjs index 4b06f69903..59d3262107 100644 --- a/test/resources/DeepFrozenStore.js +++ b/test/endtoend/i18n-drag-drop/DeepFrozenStore.mjs @@ -1,4 +1,4 @@ -const deepFreeze = require('deep-freeze') +import deepFreeze from 'deep-freeze' /* eslint-disable no-underscore-dangle */ @@ -41,6 +41,6 @@ class DeepFrozenStore { } } -module.exports = function defaultStore () { +export default function defaultStore () { return new DeepFrozenStore() } diff --git a/test/endtoend/i18n-drag-drop/main.js b/test/endtoend/i18n-drag-drop/main.mjs similarity index 65% rename from test/endtoend/i18n-drag-drop/main.js rename to test/endtoend/i18n-drag-drop/main.mjs index bbe9602375..2d4d6ae01d 100644 --- a/test/endtoend/i18n-drag-drop/main.js +++ b/test/endtoend/i18n-drag-drop/main.mjs @@ -1,8 +1,9 @@ -const Uppy = require('@uppy/core') -const DragDrop = require('@uppy/drag-drop') -const XHRUpload = require('@uppy/xhr-upload') -const ProgressBar = require('@uppy/progress-bar') -const DeepFrozenStore = require('../../resources/DeepFrozenStore.js') +import Uppy from '@uppy/core' +import DragDrop from '@uppy/drag-drop' +import XHRUpload from '@uppy/xhr-upload' +import ProgressBar from '@uppy/progress-bar' + +import DeepFrozenStore from './DeepFrozenStore.mjs' const uppyi18n = new Uppy({ id: 'uppyi18n', diff --git a/test/endtoend/providers/main.js b/test/endtoend/providers/main.mjs similarity index 64% rename from test/endtoend/providers/main.js rename to test/endtoend/providers/main.mjs index 5da58d3c06..bf6773fa2b 100644 --- a/test/endtoend/providers/main.js +++ b/test/endtoend/providers/main.mjs @@ -1,13 +1,12 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const GoogleDrive = require('@uppy/google-drive') -const Instagram = require('@uppy/instagram') -const Dropbox = require('@uppy/dropbox') -const Box = require('@uppy/box') -const Tus = require('@uppy/tus') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import GoogleDrive from '@uppy/google-drive' +import Instagram from '@uppy/instagram' +import Dropbox from '@uppy/dropbox' +import Box from '@uppy/box' +import Tus from '@uppy/tus' -const isOnTravis = !!(process.env.TRAVIS && process.env.CI) -const companionUrl = isOnTravis ? 'http://companion.test:3030' : 'http://localhost:3020' +const companionUrl = 'http://localhost:3020' window.uppy = new Uppy({ id: 'uppyProvider', diff --git a/test/endtoend/thumbnails/main.js b/test/endtoend/thumbnails/main.mjs similarity index 77% rename from test/endtoend/thumbnails/main.js rename to test/endtoend/thumbnails/main.mjs index 8ffcc571d8..14eac14a40 100644 --- a/test/endtoend/thumbnails/main.js +++ b/test/endtoend/thumbnails/main.mjs @@ -1,12 +1,11 @@ -/* eslint-disable */ -const Uppy = require('@uppy/core') -const ThumbnailGenerator = require('@uppy/thumbnail-generator') -const FileInput = require('@uppy/file-input') +import Uppy from '@uppy/core' +import ThumbnailGenerator from '@uppy/thumbnail-generator' +import FileInput from '@uppy/file-input' const uppyThumbnails = new Uppy({ id: 'uppyThumbnails', autoProceed: false, - debug: true + debug: true, }) uppyThumbnails.use(ThumbnailGenerator, {}) @@ -27,7 +26,7 @@ uppyThumbnails.on('thumbnail:error', (file, err) => { document.body.appendChild(el) }) -uppyThumbnails.on('thumbnail:generated', (file, preview) => { +uppyThumbnails.on('thumbnail:generated', (file) => { const img = new Image() img.src = file.preview img.className = 'file-preview' diff --git a/test/endtoend/transloadit-assembly-options/main.js b/test/endtoend/transloadit-assembly-options/main.mjs similarity index 90% rename from test/endtoend/transloadit-assembly-options/main.js rename to test/endtoend/transloadit-assembly-options/main.mjs index 7a648e98e2..6b5cc873a7 100644 --- a/test/endtoend/transloadit-assembly-options/main.js +++ b/test/endtoend/transloadit-assembly-options/main.mjs @@ -1,6 +1,6 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const Transloadit = require('@uppy/transloadit') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import Transloadit from '@uppy/transloadit' function initUppyTransloadit (transloaditKey) { const uppyTransloadit = new Uppy({ diff --git a/test/endtoend/transloadit/main.js b/test/endtoend/transloadit/main.mjs similarity index 69% rename from test/endtoend/transloadit/main.js rename to test/endtoend/transloadit/main.mjs index 361fd1f9dd..9f6a470079 100644 --- a/test/endtoend/transloadit/main.js +++ b/test/endtoend/transloadit/main.mjs @@ -1,6 +1,6 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const Transloadit = require('@uppy/transloadit') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import Transloadit from '@uppy/transloadit' function initUppyTransloadit (transloaditKey) { const uppyTransloadit = new Uppy({ @@ -33,15 +33,12 @@ function initUppyTransloadit (transloaditKey) { uppyTransloadit.on('transloadit:result', (stepName, result) => { // use transloadit encoding result here. - console.log('Result here ====>', stepName, result) - console.log('Cropped image url is here ====>', result.url) - const img = new Image() img.onload = function onload () { - const result = document.createElement('div') - result.setAttribute('id', 'uppy-result') - result.textContent = 'ok' - document.body.appendChild(result) + const resultDiv = document.createElement('div') + resultDiv.setAttribute('id', 'uppy-result') + resultDiv.textContent = 'ok' + document.body.appendChild(resultDiv) } img.src = result.url }) diff --git a/test/endtoend/tus-dashboard/main.js b/test/endtoend/tus-dashboard/main.js deleted file mode 100644 index 832c2cc7d2..0000000000 --- a/test/endtoend/tus-dashboard/main.js +++ /dev/null @@ -1,18 +0,0 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const Tus = require('@uppy/tus') - -const isOnTravis = !!(process.env.TRAVIS && process.env.CI) -const endpoint = isOnTravis ? 'http://companion.test:1080' : 'http://localhost:1080' - -const uppyDashboard = new Uppy({ - id: 'uppyDashboard', - debug: true, -}) - -uppyDashboard - .use(Dashboard, { - target: '#uppyDashboard', - inline: true, - }) - .use(Tus, { endpoint: `${endpoint}/files/` }) diff --git a/test/endtoend/tus-dashboard/main.mjs b/test/endtoend/tus-dashboard/main.mjs new file mode 100644 index 0000000000..cafdeb8fb2 --- /dev/null +++ b/test/endtoend/tus-dashboard/main.mjs @@ -0,0 +1,17 @@ +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import Tus from '@uppy/tus' + +const endpoint = 'http://localhost:1080' + +const uppyDashboard = new Uppy({ + id: 'uppyDashboard', + debug: true, +}) + +uppyDashboard + .use(Dashboard, { + target: '#uppyDashboard', + inline: true, + }) + .use(Tus, { endpoint: `${endpoint}/files/` }) diff --git a/test/endtoend/tus-drag-drop/main.js b/test/endtoend/tus-drag-drop/main.mjs similarity index 70% rename from test/endtoend/tus-drag-drop/main.js rename to test/endtoend/tus-drag-drop/main.mjs index decd93b09d..b1bfb40b21 100644 --- a/test/endtoend/tus-drag-drop/main.js +++ b/test/endtoend/tus-drag-drop/main.mjs @@ -1,7 +1,7 @@ -const Uppy = require('@uppy/core') -const DragDrop = require('@uppy/drag-drop') -const Tus = require('@uppy/tus') -const ProgressBar = require('@uppy/progress-bar') +import Uppy from '@uppy/core' +import DragDrop from '@uppy/drag-drop' +import Tus from '@uppy/tus' +import ProgressBar from '@uppy/progress-bar' // const endpoint = 'http://localhost:1080' const endpoint = 'https://tusd.tusdemo.net' diff --git a/test/endtoend/typescript/main.ts b/test/endtoend/typescript/main.ts index fdee12bed4..d36ee63b05 100644 --- a/test/endtoend/typescript/main.ts +++ b/test/endtoend/typescript/main.ts @@ -11,10 +11,7 @@ import { Form, } from 'uppy' -declare let process: { env: Record } - -const isOnTravis = !!(process.env.TRAVIS && process.env.CI) -const TUS_ENDPOINT = `http://${isOnTravis ? 'companion.test' : 'localhost'}:1080/files/` +const TUS_ENDPOINT = 'http://localhost:1080/files/' const uppy = new Core({ debug: true, diff --git a/test/endtoend/typescript/package.json b/test/endtoend/typescript/package.json deleted file mode 100644 index 5b92a82ffe..0000000000 --- a/test/endtoend/typescript/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "private": true, - "dependencies": { - "uppy": "file:../../../packages/uppy" - } -} diff --git a/test/endtoend/url-plugin/main.js b/test/endtoend/url-plugin/main.js deleted file mode 100644 index ed629dc70f..0000000000 --- a/test/endtoend/url-plugin/main.js +++ /dev/null @@ -1,22 +0,0 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const Url = require('@uppy/url') -const Tus = require('@uppy/tus') - -const isOnTravis = !!(process.env.TRAVIS && process.env.CI) -const companionUrl = isOnTravis ? 'http://companion.test:3030' : 'http://localhost:3030' -const endpoint = isOnTravis ? 'http://companion.test:1080' : 'http://localhost:1080' - -window.uppy = new Uppy({ - id: 'uppyProvider', - debug: true, -}) - .use(Dashboard, { - target: '#uppyDashboard', - inline: true, - }) - .use(Url, { - target: Dashboard, - companionUrl, - }) - .use(Tus, { endpoint: `${endpoint}/files/` }) diff --git a/test/endtoend/url-plugin/main.mjs b/test/endtoend/url-plugin/main.mjs new file mode 100644 index 0000000000..66ada6b63e --- /dev/null +++ b/test/endtoend/url-plugin/main.mjs @@ -0,0 +1,21 @@ +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import Url from '@uppy/url' +import Tus from '@uppy/tus' + +const companionUrl = 'http://localhost:3030' +const endpoint = 'http://localhost:1080' + +window.uppy = new Uppy({ + id: 'uppyProvider', + debug: true, +}) + .use(Dashboard, { + target: '#uppyDashboard', + inline: true, + }) + .use(Url, { + target: Dashboard, + companionUrl, + }) + .use(Tus, { endpoint: `${endpoint}/files/` }) diff --git a/test/endtoend/xhr-limit/main.js b/test/endtoend/xhr-limit/main.mjs similarity index 79% rename from test/endtoend/xhr-limit/main.js rename to test/endtoend/xhr-limit/main.mjs index ac33d940d5..91858a42c4 100644 --- a/test/endtoend/xhr-limit/main.js +++ b/test/endtoend/xhr-limit/main.mjs @@ -1,6 +1,6 @@ -const Uppy = require('@uppy/core') -const FileInput = require('@uppy/file-input') -const XHRUpload = require('@uppy/xhr-upload') +import Uppy from '@uppy/core' +import FileInput from '@uppy/file-input' +import XHRUpload from '@uppy/xhr-upload' function startXHRLimitTest (endpoint) { const uppy = new Uppy({ From 585158b2640f9b2442c6efe6704d5dc070db695e Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Wed, 15 Dec 2021 18:48:19 +0100 Subject: [PATCH 2/7] fix linter warnings --- package.json | 1 - test/endtoend/chaos-monkey/test.js | 9 ++++----- test/endtoend/create-react-app/src/App.js | 6 +++--- test/endtoend/create-react-app/test.js | 2 +- test/endtoend/i18n-drag-drop/test.js | 4 ++-- test/endtoend/thumbnails/test.js | 2 +- test/endtoend/transloadit-assembly-options/test.js | 2 +- test/endtoend/transloadit/test.js | 2 +- test/endtoend/tus-drag-drop/test.js | 4 ++-- test/endtoend/typescript/test.js | 2 +- test/endtoend/utils.js | 2 +- yarn.lock | 14 +------------- 12 files changed, 18 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 4d375efd3b..f585a47ddd 100644 --- a/package.json +++ b/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", diff --git a/test/endtoend/chaos-monkey/test.js b/test/endtoend/chaos-monkey/test.js index 17e537773c..b33b4b8141 100644 --- a/test/endtoend/chaos-monkey/test.js +++ b/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)) }, } diff --git a/test/endtoend/create-react-app/src/App.js b/test/endtoend/create-react-app/src/App.js index f29f2d6b17..8fe040ac64 100644 --- a/test/endtoend/create-react-app/src/App.js +++ b/test/endtoend/create-react-app/src/App.js @@ -43,7 +43,7 @@ class App extends Component { } render () { - const { showInlineDashboard } = this.state + const { showInlineDashboard, open } = this.state return (

React Examples

@@ -77,11 +77,11 @@ class App extends Component {

Modal Dashboard