mardi 30 mars 2021

Cypress: How to test upload a folder with files and subfolders?

I'm having an issue to test uploading a folder with files and subfolders. If I add folder structure to the fixture then cy.fixture() command doesn't recognize that is a directory that I want to upload but it looks inside the directory to find the files. I have tries also to use the cy.readFile() but I couldn't make it to work.

I have tried to create drag and drop command like this:

Cypress.Commands.add('dragAndDropFolder', (fileUrl, type = '') => {
  return cy.readFile(fileUrl, 'binary')
    .then(Cypress.Blob.binaryStringToArrayBuffer)
    .then(blob => {
      const nameSegments = fileUrl.split('/');
      const name = nameSegments[nameSegments.length - 1];
      const testFile = new File([blob], name, { type });
      const event = {
        dataTransfer: {
          isDirectory: true,
          isFile: false,
          fullPath: `#${fileUrl}`,
          files: [testFile],
          items: [{ kind: 'file', type }],
          types: ['Files'],
        },
      };
      return cy
        .get('[data-test-dropzone="true"]')
        .first()
        .trigger('dragenter', event)
        .trigger('drop', event);
    });
});

Another thing I have tried to use a our different functionality which is simple upload button and the attachFile() plugin:

cy.readFile('client/testfolder', 'binary').then(file => {
          cy.get('#multiple_file_uploads_input').attachFile(file)
        });

Drag and drop functionality is written in Elixir and this is how data transfer looks like:

{
      isDirectory: true,
      isFile: false,
      fullPath: '#{path}',
      createReader() {
        return {
          sentEntries: false,
          readEntries(callback) {
            if (!this.sentEntries) {
              this.sentEntries = true;
              callback([#{Enum.join(entries, ",")}]);
            } else {
              callback([]);
            }
          },
        };
      },
    }

Aucun commentaire:

Enregistrer un commentaire