Fix end to end test failures on CI (#2341)

Co-authored-by: Artur Paikin <artur@arturpaikin.com>

packages/@uppy/dashboard/src/components/AddFiles.js

@@ -65,7 +65,11 @@ class AddFiles extends Component {
 
   renderMyDeviceAcquirer = () => {
     return (
-      <div class="uppy-DashboardTab" role="presentation">
+      <div
+        class="uppy-DashboardTab"
+        role="presentation"
+        data-uppy-acquirer-id="MyDevice"
+      >
         <button
           type="button"
           class="uppy-DashboardTab-btn"
@@ -111,7 +115,11 @@ class AddFiles extends Component {
 
   renderAcquirer = (acquirer) => {
     return (
-      <div class="uppy-DashboardTab" role="presentation">
+      <div
+        class="uppy-DashboardTab"
+        role="presentation"
+        data-uppy-acquirer-id={acquirer.id}
+      >
         <button
           type="button"
           class="uppy-DashboardTab-btn"

test/endtoend/chaos-monkey/main.js

@@ -3,6 +3,7 @@ require('whatwg-fetch')
 const Uppy = require('@uppy/core')
 const Dashboard = require('@uppy/dashboard')
 const Tus = require('@uppy/tus')
+const canvasToBlob = require('@uppy/utils/lib/canvasToBlob')
 
 const isOnTravis = !!(process.env.TRAVIS && process.env.CI)
 const endpoint = isOnTravis ? 'http://companion.test:1081' : 'http://localhost:1081'
@@ -20,7 +21,7 @@ window.setup = function (options) {
     limit: options.limit
   })
   uppy.on('file-added', (file) => {
-    randomColorImage(function (blob) {
+    randomColorImage().then(function (blob) {
       uppy.setFileState(file.id, { preview: URL.createObjectURL(blob) })
     })
   })
@@ -28,12 +29,12 @@ window.setup = function (options) {
   return uppy
 }
 
-function randomColorImage (callback) {
+function randomColorImage () {
   const canvas = document.createElement('canvas')
   canvas.width = 140
   canvas.height = 140
   const context = canvas.getContext('2d')
   context.fillStyle = '#xxxxxx'.replace(/x/g, () => '0123456789ABCDEF'[Math.floor(Math.random() * 16)])
   context.fillRect(0, 0, 140, 140)
-  canvas.toBlob(callback)
+  return canvasToBlob(canvas)
 }

test/endtoend/create-react-app/test.js

@@ -53,7 +53,7 @@ describe('React: Dashboard', () => {
     await toggle()
 
     // open GDrive panel
-    const gdriveButton = await $('.uppy-DashboardTab:nth-child(1) button')
+    const gdriveButton = await $('.uppy-DashboardTab[data-uppy-acquirer-id="GoogleDrive"] button')
     await gdriveButton.click()
     await browser.pause(500)
 

test/endtoend/wdio.local.conf.js

@@ -2,11 +2,16 @@ const base = require('./wdio.base.conf')
 const args = require('minimist')(process.argv.slice(2))
 
 // Use "npm run test:endtoend:local -- -b chrome" to test in chrome
+// "npm run test:endtoend:local -- -b ie" to test in internet explorer
 // "npm run test:endtoend:local -- -b firefox -b chrome" to test in FF and chrome
 const capabilities = []
 if (args.b) {
   if (!Array.isArray(args.b)) args.b = [args.b]
   args.b.forEach((browserName) => {
+    // no clue how to write a single argument with internal spaces on windows, so support an alias with no spaces
+    if (browserName === 'ie') {
+      browserName = 'internet explorer'
+    }
     capabilities.push({ browserName })
   })
 }