cypress use same endpoint with different response (testing http race condition)

Question

I try to intercept two similar requests but two different responses in delay between each responses.

1. send a first request to the /endpoint with delay in response like 3000ms
2. second request to the same /endpoint with delay in response 1000ms

both requests have different response, something difficult to overwrite interceptor here

        cy.intercept('POST', '/validate', (req) => {
            req.reply({
                delay: 3000,
                fixture: 'invalidData.json'
            });
        })

        cy.intercept('POST', '/validate', (req) => {
            req.reply({
                delay: 1000,
                fixture: 'validData.json'
            });
        })

Answer 1

You can supply an array of routeHandlers in the order you want them applied

it('test the same route multiple times', () => {
  let request = 0;
  const replies = [
    {delay: 3000, fixture: 'invalidData.json'},
    {delay: 1000, fixture: 'validData.json'},
  ]
  cy.intercept('POST', '/validate', (req) => {
    req.reply(replies[request++])
  });

  cy.visit(...);

})

Answer 2

See Gleb Bahmutov's answer here
Change fixture response in cypress for the same url with intercept

Use the times option to restrict how many calls the intercept will catch.

But note, the last added intercept is checked first so you probably need to reverse the order.

cy.intercept({method: 'POST', url: '/validate', times: 1}, (req) => {
  req.reply({
    delay: 1000,
    fixture: 'validData.json'
  });
})

cy.intercept({method: 'POST', url: '/validate', times: 1}, (req) => {
  req.reply({
    delay: 3000,
    fixture: 'invalidData.json'
  });
})

---

Example app

<script>
  setTimeout(() => {
    fetch('/validate', { method: 'POST'})
      .then(res => res.json())
      .then(res => console.log('1st', res))
  }, 100)
  setTimeout(() => {
    fetch('/validate', { method: 'POST'})
      .then(res => res.json())
      .then(res => console.log('2nd', res))
  }, 200)
</script>

Console outputs in expected order, with different fixture data

2nd {data: 'valid'}
1st {data: 'invalid'}

Answer 3

You can use Gleb's example here as a starting point. We'll be using a variable out of scope of the intercept to keep track of requests.

it('some test', () => {
  let requestCount = 0;
  cy.intercept('POST', '/validate', (req) => {
    requestCount++;
    req.reply({
      delay: requestCount === 1 ? 1000 : 3000,
      fixture: requestCount === 1 ? 'validData.json' : 'invalidData.json'
    });
  });
  // rest of test
})

You can modify your logic to return different delays / fixtures if the ternary provided does not accomplish your goal.

Answer 4

Similar requests means you can distinguish them, so do that by any property within the request.

cy.intercept('POST', '/validate', (req) => {
  if (req.body.any.property.only.of.my.first.request === true) {
    req.reply({
      delay: 1000,
      fixture: 'validData.json'
    });
  } else {
    req.reply({
      delay: 3000,
      fixture: 'invalidData.json'
    });
  }
})