Pausing and resuming intercepted requests on demand

What would you like?

I’d like ability to pause intercepted request indefinitely and then resume it at will when I need with response which I need.

Why is this needed?

I’m using @xstate/test for testing. It generates scenarios based on states and events with different paths. Problem I encounter is that when scenario includes race condition, I can’t guarantee order of execution inside application. For example, I have two requests: A and B. In one scenario A should settle first, and in another B should settle first.

Approaches I tried to solve this problem:

• Inspect each scenario beforehand and add delay to every interception, according to their precedence. This works, but only with pretty significant delays (more than a second). This leads to very long time of execution.
• Return promise within intercept callback and resolve this promise outside. For some reason this didn’t work as expected at all - requests are still passing through.

Another issue that I have is that there can be multiple responses for request, depending on scenario. Right now I have to inspect each scenario beforehand and stub responses. I’d like to do it on demand when I need to settle response.

If we abstract from model based testing, I’d like to write something like this:

beforeEach(function() {
  // intercept request and pause it until resolved
  cy.intercept('/api/a').as('a');
  cy.intercept('/api/b').as('b');
  cy.visit('http://localhost:3000');
});

it('should resolve A first', () => {
  // assert loading state
  cy.wait('@a').then(/* resolve somehow with specific response */);
  // assert `a` result and `b` loading state
  cy.wait('@b').then(/* resolve somehow with specific response */);
  // assert `b` result
})

it('should resolve B first', () => {
  // assert loading state
  cy.wait('@b').then(/* resolve somehow with specific response */);
  // assert `b` result and `a` loading state
  cy.wait('@b').then(/* resolve somehow with specific response */);
  // assert `a` result
})

[ezhikov]

It may be helpful to see the solutions with cy.intercept() that you already tried and the errors that you’re encountering rather than the proposed solution upfront.

there might be some bug/something we can document better

I’ll make suitable demo to illustrate what I want to achieve this weekend

[m-janicki]

Hi, I think I’ve faced a very similar issue. My app is allowing user to ask for data with some custom filter, the query is passed via http request. The user can ask multiple times in a row for data with different filters, but only the most recent query is meaningful. So with scenario below

1. User asks for data with filter A
2. User asks for data with filter B
3. Server responds with data filtered by B (dataB)
4. Server responds with data filtered by A (dataA)

App is supposed to ignore the 4th point (as opposed to loading the dataA into the app).

I couldn’t find a way to force the order of responses, other than adding a delay. Something like

  it("handles delayed, obsolete responses", () => {
    cy.intercept("/api/data?filter=example-A", {
      delay: 700,
      body: dataA
    }).as("delayed");

    cy.intercept("/api/data?filter=example-B", dataB);

    cy.visit('http://localhost:3000');

    cy.get("[data-cy=filter]").type("example-A{enter}");
    cy.get("[data-cy=filter]").type("example-B{enter}");

    cy.wait("@delayed");
    // now assert if app body matches dataB
  });

Now this solution is a bit sketchy - it is slow, and doesn’t really guarantee the order of responses.