How to wait for server response that changes by the request

[MattSom]

I have a test that clicks for a button on the UI that'll trigger the server to create a custom Mail object in the db. So I wait(1000) so that the server has time to create it:

it('should be able to send a email', () => {
...
  cy.get('[data-cy=forgot-password-submit]')
    .click()

  cy.wait(1000)

  cy.mhGetAllMails()
    .should('have.length', 1)

The docs suggests that instead of waiting:

cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }])
cy.get('#fetch').click()
cy.wait(4000) // <--- this is unnecessary
cy.get('table tr').should('have.length', 2)

just do this:

// Alternatively a better solution to this problem is by waiting explicitly for an aliased route.
cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }]).as(
  'getUsers'
)
cy.get('#fetch').click()
cy.wait('@getUsers') // <--- wait explicitly for this route to finish
cy.get('table tr').should('have.length', 2)

But what if my clicking changes the actual data that the get request will return?

Without the click it would return nothing as there are no mails created. So I figure intercepting the request could easily resolve, but return a 0 instead of 1.

[jjhelguero]

Check the Network tab in your dev tools for the request that is sent from your cy.get('#fetch').click() to see all the details, including the response sent back from the server. You can either choose to:

• mock the response( ie cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }])) and not let it hit the server
• spy on the request( ie cy.intercept('GET', '/users')) and let it hit the server
• intercept and change the response sent from server
• and many other scenarios

Either way using the cy.wait() on your .alias() will work the same for either approach.

If you are worried about the data retrieved from the request you can spy on request.