How to cleanup cypress cy.intercept requests queue?

Question

I'm testing several filters (they are on backend) for a dashboard consecutevely using spy function written in before(() => {...}) block:

function aliasQuery(
  request: CyHttpMessages.IncomingHttpRequest,
  operationName: string,
): void {
  const { body } = request;
  if (body.operationName === operationName) {
    request.alias = operationName;
  }
}

export function spyOnGraphQL(operationName: string): void {
  cy.fixture('hosts').then(({ graphQLHostname }) => {
    cy.intercept(ApiMethods.Post, graphQLHostname, (request) => {
      aliasQuery(request, operationName);
    });
  });
}

Then inside for loop I use

cy.wait(`@${operationName}`).should(({response}) => {...})

to check filters one by one.

There's trouble though, after using every filter and getting results I need to reset all filters by sending another graphql request, this request's query name matches the filter's query name, so when cy.wait is called again it catches reset filters request which breaks everything.It goes like this:

• Applying filter 1 (graphql request 1)
• Using cy.wait , it catches request 1
• Resetting filters (graphql request 2)
• Applying filter 2 (graphql request 3)
• Using cy.wait , it catches request 2 --> That's where the problems begin

Is there a way to clean up requests caught by cy.intercept before applying a new filter? Or at least distinguish reset request from filter request using request payload for instance?

Answer 1

I didn't find a way to clean up the request queue, but I was able to use an extra callback to ignore some requests by giving them different alias.

function aliasQuery(
  request: CyHttpMessages.IncomingHttpRequest,
  operationName: string,
  callback?: TypeAliasQueryCallback,
): void {
  const { body } = request;

  if (body.operationName === operationName) {
    request.alias = operationName;

    if (typeof callback === 'function') {
      callback(request);
    }
  }
}

export function spyOnGraphQL(
  operationName: string,
  callback?: TypeAliasQueryCallback,
): void {
  cy.fixture('hosts').then(({ graphQLHostname }) => {
    cy.intercept(ApiMethods.Post, graphQLHostname, (request) => {
      aliasQuery(request, operationName, callback);
    });
  });
}

export function ignoreResetRequest(
  request: CyHttpMessages.IncomingHttpRequest,
): void {
  const { body } = request;

  // Checking if the filters are sent (resetting sends empty array)
  if (!body.variables.filter.and.length) {
    request.alias = 'ignored';
  }
}

spyOnGraphQL('some_operation_name', ignoreResetRequest);

Answer 2

You can use the times option to make sure your intercept only matches once and redefined it later when you are expecting the request. Example:

cy.intercept({ url: /\/api\/.*\/path\/.*/, times: 1 }).as("fetchingMyData")
cy.wait("@fetchingMyData").then(() => { ... }) // the first wait


cy.intercept({ url: /\/api\/.*\/path\/.*/, times: 1 }).as("fetchingMyData2") // this resets the alias and the intercepted requests so that any request made before this point won't be considered.
cy.wait("@fetchingMyData2").then(() => { ... }) // the second wait

Have a look at the options in the docs for more info: https://docs.cypress.io/api/commands/intercept#routeMatcher-RouteMatcher