Delaying Intercept responses in Cypress - reactjs

Question

I am writing cypress tests, and I want to test a feature of our program which will display data as it begins to appear. This could be a list with several hundred elements, and in order to speed it up, we break the request up into multiple requests.
The first request will fetch the first 50 items, the second request the next 100, etc.
I want to ensure that after the first request returns, the list contains 50 items, and that after the second request returns, the list contains 150 items.
What I don't know how to do, is reliably delay the intercept responses so that I can return the first 50, check the list length, then allow more data to come in.
This is what I have so far:
const baseUrl = 'https://example.io/listData*'
const document = 'public_document_10101'
cy.intercept(
{
url: baseUrl,
query: {
limit: '50',
'document': document
},
},
{ fixture: 'first-response.js' }
).as('firstResponse')
cy.intercept(
{
url: baseUrl,
query: {
limit: '100',
skip: '50',
'document': document
},
},
{ fixture: 'second-response.js' }
).as('secondResponse')
I don't believe that something like cy.wait('#firstResponse') will do what I want, as this doesn't prevent the second one from return at all. I'm open to using a delay of some kind, however it would be really nice if there was a wait to completely block it until I say so.

Answer 1

You can also use setDelay. Cypress Docs
cy.intercept({ url: 'http://localhost:3001/**', middleware: true }, (req) => {
req.on('response', (res) => {
// Wait for delay in milliseconds before sending the response to the client.
res.setDelay(1000)
})
})

Answer 2

This looks like the functionality you want Throttle or delay response all incoming responses
// Code from Real World App (RWA)
// cypress/support/index.ts
import { isMobile } from './utils'
import './commands'
// Throttle API responses for mobile testing to simulate real world conditions
if (isMobile()) {
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)
})
})
}
Or maybe Static Response object with fixture property and delay property
{
/**
* Serve a fixture as the response body.
*/
fixture?: string
/**
* Serve a static string/JSON object as the response body.
*/
body?: string | object | object[]
/**
* HTTP headers to accompany the response.
* #default {}
*/
headers?: { [key: string]: string }
/**
* The HTTP status code to send.
* #default 200
*/
statusCode?: number
/**
* If 'forceNetworkError' is truthy, Cypress will destroy the browser connection
* and send no response. Useful for simulating a server that is not reachable.
* Must not be set in combination with other options.
*/
forceNetworkError?: boolean
/**
* Milliseconds to delay before the response is sent.
*/
delay?: number
/**
* Kilobits per second to send 'body'.
*/
throttleKbps?: number
}