angularcypresscypress-intercept

Cypress: Prepare HttpProgressEvent


In Cypress, I'm able to intercept HTTP call and return arbitrary HttpResponse by using intercept command:

cy.intercept("POST", 'some/url', {
  statusCode: 200,
  // etc.
});

Is it possible to similarly prepare response in a form of HttpProgressEvent?

I developed file upload using this tutorial, specifically

const req = new HttpRequest('GET', 'someUrl, {
  reportProgress: true
});
this.http.request(req)
  .subscribe(...);  //here all the handling stuff is located

and since the file is quite large, I'd like to see some loading marker in the UI and also to test, that it is displayed, using Cypress.


Solution

  • For an e2e test, you would query the marker in the UI with a cy.get() query.

    To make sure the progress is not too fast for the test, or is consistently slow enough for the the test to see the marker, you would use a throttle on the cy.intercept for example Throttle or delay response all incoming responses.

    // Throttle API responses to simulate real-world conditions
    beforeEach(() => {
      cy.intercept(
        {
          url: 'http://localhost:3001/**',
          middleware: true,
        },
        (req) => {
          req.on('response', (res) => {
            // Throttle the response to 1 Mbps to simulate a
            // mobile 3G connection
            res.setThrottle(1000)
          })
        }
      )
    })