[Feature] Does upload.() return a promise?

[kyledavelaar]

Desired behavior:

Great library! Thanks for making this. Not sure if this is a bug or could be a new feature. I'd like upload() to wait until the file has been uploaded and then do something like click a button on the page. In the code below it seems that upload() is not waiting for the file to finish uploading before going into the second .then() block.

Current behavior:

cy.fixture('./3row.csv').then(fileContent => { cy.get('input[type="file"]').upload({ fileContent, fileName: './3row.csv', mimeType: 'text/csv' }).then(content => { cy.get('[data-cy="map-headers-container"]').contains('NEXT').click({force: true}); }) }); })

Versions

cypress 3.4

[abramenal]

Hey @kyledavelaar
Thanks for submitting the issue!

We discussed that stuff in #91, here's the answer:

I think the upload process you mention is more about waiting network request to complete – correct me if I'm wrong.
If that is correct, the only way to do it properly is:
https://docs.cypress.io/api/commands/wait.html#Wait-for-a-specific-XHR-to-respond

Does this help to you?

[kyledavelaar]

Hi @abramenal
Thanks for the response. Unfortunately I am not needing to wait for an xhr request but for the file to be uploaded. In my app after I upload the file, I show data on the screen about the file, row mappings (it's a csv file), etc. and I find that when I immediately have cypress look for them after the upload(), they are not there yet. Currently I am doing a cypress.wait(500) but I'd like to avoid that if possible via a promise or something like cypress does with xhr aliases.

[abramenal]

@kyledavelaar
Oh I see what you mean. Yes, then likely I need to go through the Promise chain in order to resolve it properly – will likely pick that up this week.

[kyledavelaar]

Cool thanks so much

…

On Wed, Aug 7, 2019, 12:02 abramenal ***@***.***> wrote: @kyledavelaar <https://github.com/kyledavelaar> Oh I see what you mean. Yes, then likely I need to go through the Promise chain in order to resolve it properly – will likely pick that up this week. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#97?email_source=notifications&email_token=AFOIAGDM24AEVEVICOSPG43QDML4ZA5CNFSM4IJOL6W2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3ZMWPI#issuecomment-519228221>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFOIAGDXBCZ2S3UKINONS3DQDML4ZANCNFSM4IJOL6WQ> .

[abramenal]

@kyledavelaar
Can you tell what version of cypress-file-upload you're using?
Also, what is the size of that CSV you're uploading?
And finally, what is this data-cy="map-headers-container" component?

I feel a bit of misconception here. Ideally you don't need to control the async flow this way – Cypress does that for you for most cases. See
https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Noisy-Promise-demonstration-Not-valid-code

So can you try out this:

cy.fixture('./3row.csv').then(fileContent => {
  cy.
      get('input[type="file"]')
      .upload({ fileContent, fileName: './3row.csv', mimeType: 'text/csv' });
});

cy
  .get('[data-cy="map-headers-container"]')
  .contains('NEXT')
  .click({ force: true });

After that, the problem I see here is that your data-cy="map-headers-container" component might not receive/render data you need immediately when the plugin inserts it (or at least does it in async way). So same thing here, ideally Cypress will resolve async stuff automatically.

If we omit async part, cy.contains command also has timeout value as time for your data to appear (before the whole command gets rejected. See https://docs.cypress.io/api/commands/contains.html#Arguments

Waiting for your reply.

[kyledavelaar]

Sorry was out on holiday and couldn't investigate more. I see what you mean about the way Cypress handles async. To answer your questions I'm using the latest version of cypress-file-upload, the size of the csv is 88 bytes, and the data-attribute is for the container that holds the NEXT button.

[abramenal]

@kyledavelaar is the issue still relevant to you?
If yes, you could take a look on #104 bug description, there is a nice way to do the thing which is likely to be same as yours.
If that does not help still, please reopen this one with details.

[kyledavelaar]

Hi thanks for asking. Feel free to close the issue.

…

On Sat, Sep 21, 2019 at 8:33 AM abramenal ***@***.***> wrote: @kyledavelaar <https://github.com/kyledavelaar> is the issue still relevant to you? If yes, you could take a look on #104 <#104> bug description, there is a nice way to do the thing which is likely to be same as yours. If that does not help still, please reopen this one with details. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#97?email_source=notifications&email_token=AFOIAGAYOVVVSAOW5ZQ3PQ3QKY5C5A5CNFSM4IJOL6W2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7IT7FA#issuecomment-533806996>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFOIAGHWTZ576ZOEZLGGVULQKY5C5ANCNFSM4IJOL6WQ> .

[BavithraDuraisamy]

@kyledavelaar
Can you tell what version of cypress-file-upload you're using?
Also, what is the size of that CSV you're uploading?
And finally, what is this data-cy="map-headers-container" component?

I feel a bit of misconception here. Ideally you don't need to control the async flow this way – Cypress does that for you for most cases. See
https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Noisy-Promise-demonstration-Not-valid-code

So can you try out this:

cy.fixture('./3row.csv').then(fileContent => {
  cy.
      get('input[type="file"]')
      .upload({ fileContent, fileName: './3row.csv', mimeType: 'text/csv' });
});

cy
  .get('[data-cy="map-headers-container"]')
  .contains('NEXT')
  .click({ force: true });

After that, the problem I see here is that your data-cy="map-headers-container" component might not receive/render data you need immediately when the plugin inserts it (or at least does it in async way). So same thing here, ideally Cypress will resolve async stuff automatically.

If we omit async part, cy.contains command also has timeout value as time for your data to appear (before the whole command gets rejected. See https://docs.cypress.io/api/commands/contains.html#Arguments

Waiting for your reply.

i'm getting this error when trying to upload csv file
passed subject element is not valid.

[abramenal]

Hi @BavithraDuraisamy
Let's create a new issue where you describe your setup with code snippets so I can help you quickly