Merge pull request #4227 from overleaf/ae-enable-file-upload-test

Enable file drop/paste upload tests

GitOrigin-RevId: 90d4fc3621cee7142c1016aa8637bea2620b6ad0

services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.test.js

@@ -1,4 +1,5 @@
 import { expect } from 'chai'
+import * as sinon from 'sinon'
 import React, { useEffect } from 'react'
 import {
   screen,
@@ -330,9 +331,12 @@ describe('<FileTreeModalCreateFile/>', function () {
     ).to.be.true
   })
 
-  // eslint-disable-next-line mocha/no-skipped-tests
-  it.skip('uploads a new file', async function () {
-    fetchMock.post('express:/project/:projectId/linked_file', () => 204)
+  it('uploads a dropped file', async function () {
+    const xhr = sinon.useFakeXMLHttpRequest()
+    const requests = []
+    xhr.onCreate = request => {
+      requests.push(request)
+    }
 
     render(
       <FileTreeContext {...contextProps}>
@@ -347,14 +351,54 @@ describe('<FileTreeModalCreateFile/>', function () {
 
     expect(dropzone).not.to.be.null
 
-    // https://github.com/jsdom/jsdom/issues/1568 - no paste
     fireEvent.drop(dropzone, {
       dataTransfer: {
         files: [new File(['test'], 'test.tex', { type: 'text/plain' })],
       },
     })
 
-    expect(fetchMock.called('express:/project/:projectId/upload')).to.be.true
+    await waitFor(() => expect(requests).to.have.length(1))
+
+    const [request] = requests
+    expect(request.url).to.equal('/project/test-project/upload')
+    expect(request.method).to.equal('POST')
+
+    xhr.restore()
+  })
+
+  it('uploads a pasted file', async function () {
+    const xhr = sinon.useFakeXMLHttpRequest()
+    const requests = []
+    xhr.onCreate = request => {
+      requests.push(request)
+    }
+
+    render(
+      <FileTreeContext {...contextProps}>
+        <OpenWithMode mode="upload" />
+      </FileTreeContext>
+    )
+
+    // the submit button should not be present
+    expect(screen.queryByRole('button', { name: 'Create' })).to.be.null
+
+    const dropzone = screen.getByLabelText('File Uploader')
+
+    expect(dropzone).not.to.be.null
+
+    fireEvent.paste(dropzone, {
+      clipboardData: {
+        files: [new File(['test'], 'test.tex', { type: 'text/plain' })],
+      },
+    })
+
+    await waitFor(() => expect(requests).to.have.length(1))
+
+    const [request] = requests
+    expect(request.url).to.equal('/project/test-project/upload')
+    expect(request.method).to.equal('POST')
+
+    xhr.restore()
   })
 })