Search code examples
javascripttypescriptgraphqlcypresse2e-testing

How to cleanup cypress cy.intercept requests queue?


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?


Solution

  • 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