hedgedoc/frontend/cypress/e2e/fileUpload.spec.ts

/*
 * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
const fakeUuid = '77fdcf1c-35fa-4a65-bdcf-1c35fa8a65d5'

describe('File upload', () => {
  beforeEach(() => {
    cy.visitTestNote()
    cy.fixture('demo.png').as('demoImage')
  })

  describe('works', () => {
    beforeEach(() => {
      cy.intercept(
        {
          method: 'POST',
          url: '/api/private/media'
        },
        {
          statusCode: 201,
          body: {
            uuid: fakeUuid,
            fileName: 'demo.png'
          }
        }
      )
    })
    it('via button', () => {
      cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
      cy.getByCypressId('toolbar.uploadImage').should('be.visible')
      cy.getByCypressId('toolbar.uploadImage.input').selectFile(
        {
          contents: '@demoImage',
          fileName: 'demo.png',
          mimeType: 'image/png'
        },
        { force: true }
      )
      cy.get('.cm-line').contains(`![demo.png](http://127.0.0.1:3001/media/${fakeUuid})`)
    })

    it('via paste', () => {
      cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
      cy.fixture('demo.png').then((image: string) => {
        const pasteEvent = {
          clipboardData: {
            files: [Cypress.Blob.base64StringToBlob(image, 'image/png')],
            getData: () => ''
          }
        }
        cy.get('.cm-content').trigger('paste', pasteEvent)
        cy.get('.cm-line').contains(`![](http://127.0.0.1:3001/media/${fakeUuid})`)
      })
    })

    it('via drag and drop', () => {
      cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
      cy.get('.cm-content').selectFile(
        {
          contents: '@demoImage',
          fileName: 'demo.png',
          mimeType: 'image/png'
        },
        { action: 'drag-drop', force: true }
      )
      cy.get('.cm-line').contains(`![demo.png](http://127.0.0.1:3001/media/${fakeUuid})`)
    })
  })

  describe('fails', () => {
    it('with 400 - generic error', () => {
      cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
      cy.intercept(
        {
          method: 'POST',
          url: '/api/private/media'
        },
        {
          statusCode: 400
        }
      )
      cy.getByCypressId('toolbar.uploadImage').should('be.visible')
      cy.getByCypressId('toolbar.uploadImage.input').selectFile(
        {
          contents: '@demoImage',
          fileName: 'demo.png',
          mimeType: 'image/png'
        },
        { force: true }
      )
      cy.get('.cm-line')
        .should(($el) => {
          expect($el.text().trim()).equal('')
        })
      cy.getByCypressId('notification-toast').should('be.visible')
    })

    it('with 413 - file size error', () => {
      cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
      cy.intercept(
        {
          method: 'POST',
          url: '/api/private/media'
        },
        {
          statusCode: 413
        }
      )
      cy.getByCypressId('toolbar.uploadImage').should('be.visible')
      cy.getByCypressId('toolbar.uploadImage.input').selectFile(
        {
          contents: '@demoImage',
          fileName: 'demo.png',
          mimeType: 'image/png'
        },
        { force: true }
      )
      cy.get('.cm-line')
        .should(($el) => {
          expect($el.text().trim()).equal('')
        })
      cy.getByCypressId('notification-toast').should('be.visible')
    })
  })

  it('lets text paste still work', () => {
    cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
    const testText = 'a long test text'

    const pasteEvent: Event = Object.assign(new Event('paste', { bubbles: true, cancelable: true }), {
      clipboardData: {
        files: [],
        getData: () => testText
      }
    })

    cy.get('.cm-content').trigger('paste', pasteEvent)
    cy.get('.cm-line').contains(`${testText}`)
  })
})