e2e: upgrade to Cypress 10 (#3896)

Refs: https://docs.cypress.io/guides/references/migration-guide

e2e/cypress.config.mjs

@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  defaultCommandTimeout: 16000,
+
+  e2e: {
+    baseUrl: 'http://localhost:1234',
+    specPattern: 'cypress/integration/*.spec.ts',
+
+    // eslint-disable-next-line no-unused-vars
+    setupNodeEvents (on, config) {
+      // implement node event listeners here
+    },
+  },
+})

e2e/cypress/integration/dashboard-compressor.spec.ts

@@ -22,13 +22,13 @@ function uglierBytes (text) {
 describe('dashboard-compressor', () => {
   beforeEach(() => {
     cy.visit('/dashboard-compressor')
-    cy.get('.uppy-Dashboard-input').as('file-input')
+    cy.get('.uppy-Dashboard-input:first').as('file-input')
   })
 
   it('should compress images', () => {
     const sizeBeforeCompression = []
 
-    cy.get('@file-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('@file-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
 
     cy.get('.uppy-Dashboard-Item-statusSize').each((element) => {
       const text = element.text()

e2e/cypress/integration/dashboard-transloadit.spec.ts

@@ -1,14 +1,14 @@
 describe('Dashboard with Transloadit', () => {
   beforeEach(() => {
     cy.visit('/dashboard-transloadit')
-    cy.get('.uppy-Dashboard-input').as('file-input')
+    cy.get('.uppy-Dashboard-input:first').as('file-input')
     cy.intercept('/assemblies').as('createAssemblies')
     cy.intercept('/assemblies/*').as('assemblies')
     cy.intercept('/resumable/*').as('resumable')
   })
 
   it('should upload cat image successfully', () => {
-    cy.get('@file-input').attachFile('images/cat.jpg')
+    cy.get('@file-input').selectFile('cypress/fixtures/images/cat.jpg', { force:true })
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     cy.wait('@assemblies')
@@ -18,7 +18,7 @@ describe('Dashboard with Transloadit', () => {
   })
 
   it('should close assembly polling when cancelled', () => {
-    cy.get('@file-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('@file-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     cy.intercept({
@@ -45,7 +45,7 @@ describe('Dashboard with Transloadit', () => {
   })
 
   it('should not emit error if upload is cancelled right away', () => {
-    cy.get('@file-input').attachFile('images/cat.jpg')
+    cy.get('@file-input').selectFile('cypress/fixtures/images/cat.jpg', { force:true })
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     const handler = cy.spy()

e2e/cypress/integration/dashboard-tus.spec.ts

@@ -10,14 +10,14 @@ type Tus = BaseTus & {
 describe('Dashboard with Tus', () => {
   beforeEach(() => {
     cy.visit('/dashboard-tus')
-    cy.get('.uppy-Dashboard-input').as('file-input')
+    cy.get('.uppy-Dashboard-input:first').as('file-input')
     cy.intercept('/files/*').as('tus')
     cy.intercept('http://localhost:3020/url/*').as('url')
     cy.intercept('http://localhost:3020/search/unsplash/*').as('unsplash')
   })
 
   it('should upload cat image successfully', () => {
-    cy.get('@file-input').attachFile('images/cat.jpg')
+    cy.get('@file-input').selectFile('cypress/fixtures/images/cat.jpg', { force:true })
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     cy.wait('@tus')
@@ -26,7 +26,7 @@ describe('Dashboard with Tus', () => {
   })
 
   it('should start exponential backoff when receiving HTTP 429', () => {
-    cy.get('@file-input').attachFile(['images/baboon.png'])
+    cy.get('@file-input').selectFile('cypress/fixtures/images/baboon.png', { force:true })
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     cy.intercept(

e2e/cypress/integration/dashboard-ui.spec.ts

@@ -1,11 +1,11 @@
 describe('dashboard-ui', () => {
   beforeEach(() => {
     cy.visit('/dashboard-ui')
-    cy.get('.uppy-Dashboard-input').as('file-input')
+    cy.get('.uppy-Dashboard-input:first').as('file-input')
   })
 
   it('should render thumbnails', () => {
-    cy.get('@file-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('@file-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
     cy.get('.uppy-Dashboard-Item-previewImg')
       .should('have.length', 2)
       .each((element) => expect(element).attr('src').to.include('blob:'))

e2e/cypress/integration/dashboard-vue.spec.ts

@@ -6,7 +6,7 @@ describe('dashboard-vue', () => {
   // Only Vue 3 works in Parcel if you use SFC's but Vue 3 is broken in Uppy:
   // https://github.com/transloadit/uppy/issues/2877
   xit('should render in Vue 3 and show thumbnails', () => {
-    cy.get('@file-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('@file-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
     cy.get('.uppy-Dashboard-Item-previewImg')
       .should('have.length', 2)
       .each((element) => expect(element).attr('src').to.include('blob:'))

e2e/cypress/integration/react.spec.ts

@@ -1,21 +1,21 @@
 describe('@uppy/react', () => {
   beforeEach(() => {
     cy.visit('/react')
-    cy.get('#dashboard .uppy-Dashboard-input').as('dashboard-input')
-    cy.get('#modal .uppy-Dashboard-input').as('modal-input')
+    cy.get('#dashboard .uppy-Dashboard-input:first').as('dashboard-input')
+    cy.get('#modal .uppy-Dashboard-input:first').as('modal-input')
     cy.get('#drag-drop .uppy-DragDrop-input').as('dragdrop-input')
   })
 
   it('should render Dashboard in React and show thumbnails', () => {
-    cy.get('@dashboard-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('@dashboard-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
     cy.get('#dashboard .uppy-Dashboard-Item-previewImg')
       .should('have.length', 2)
       .each((element) => expect(element).attr('src').to.include('blob:'))
   })
 
   it('should render Modal in React and show thumbnails', () => {
     cy.get('#open').click()
-    cy.get('@modal-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('@modal-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
     cy.get('#modal .uppy-Dashboard-Item-previewImg')
       .should('have.length', 2)
       .each((element) => expect(element).attr('src').to.include('blob:'))
@@ -25,7 +25,7 @@ describe('@uppy/react', () => {
     const spy = cy.spy()
 
     cy.window().then(({ uppy }) => uppy.on('thumbnail:generated', spy))
-    cy.get('@dragdrop-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('@dragdrop-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
     // not sure how I can accurately wait for the thumbnail
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(1000).then(() => expect(spy).to.be.called)

e2e/cypress/support/commands.ts

@@ -25,9 +25,6 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 //
 
-/* eslint-disable-next-line import/no-extraneous-dependencies */
-import 'cypress-file-upload'
-
 import { createFakeFile } from './createFakeFile'
 
 Cypress.Commands.add('createFakeFile', createFakeFile)

e2e/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

e2e/package.json

@@ -45,8 +45,7 @@
     "@uppy/zoom": "workspace:^"
   },
   "devDependencies": {
-    "cypress": "^9.0.0",
-    "cypress-file-upload": "^5.0.8",
+    "cypress": "^10.0.0",
     "deep-freeze": "^0.0.1",
     "parcel": "^2.0.1",
     "prompts": "^2.4.2",

e2e/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2020",
     "lib": ["es2020", "dom"],
-    "types": ["cypress", "cypress-file-upload"]
+    "types": ["cypress"]
   },
   "include": ["cypress/**/*.ts"]
 }

yarn.lock

@@ -16816,18 +16816,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress-file-upload@npm:^5.0.8":
-  version: 5.0.8
-  resolution: "cypress-file-upload@npm:5.0.8"
-  peerDependencies:
-    cypress: ">3.0.0"
-  checksum: 9c70ca7e0bb137d0ec0b8d38987219ce15b26ac3a40e3ed4e78e6ad4690392eab905586848eec6ad8edd42ee480e68ccc63007b2ebd0a02f4b3eca116ff017e3
-  languageName: node
-  linkType: hard
-
-"cypress@npm:^9.0.0":
-  version: 9.7.0
-  resolution: "cypress@npm:9.7.0"
+"cypress@npm:^10.0.0":
+  version: 10.3.1
+  resolution: "cypress@npm:10.3.1"
   dependencies:
     "@cypress/request": ^2.88.10
     "@cypress/xvfb": ^1.2.4
@@ -16873,7 +16864,7 @@ __metadata:
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: 45df7c85bc7ec2e187153ff2b98bf5106d2313d70e2367a5742b5269a9e82d3fdd730d5bbc32ac8da72aeb120a52f9384c2ba4e2fc86b532f68440f22d700fc9
+  checksum: 7c76157195ec9409b9665aa9f7698ffd221c74c17f5026769fa20f90a60869cc8274282fa5b9b65e495429839f7a0ba05d69cf12a8af7a318ebcd704f96156c2
   languageName: node
   linkType: hard
 
@@ -17979,8 +17970,7 @@ __metadata:
     "@uppy/webcam": "workspace:^"
     "@uppy/xhr-upload": "workspace:^"
     "@uppy/zoom": "workspace:^"
-    cypress: ^9.0.0
-    cypress-file-upload: ^5.0.8
+    cypress: ^10.0.0
     deep-freeze: ^0.0.1
     parcel: ^2.0.1
     prompts: ^2.4.2