Home/ Questions/Q 4656
Answered
Anonymous
Asked: 2023-02-08T12:54:32+00:00

Cypress: Stub response for same route with three different responses

I have a single endpoint in the application. We hit the same api for each request with different action in the params.

URL:

/application/api

Sample Request Payload 1:

{
  "action": "CARD_TRANSACTION_HISTORY",
  "data": {
    "date_from": "2018-12-01",
    "date_to": "2018-12-31",
    "total": 5
  },
  "meta": {}
}

Sample Request Payload 2:

{
  "action": "CARD_BALANCE",
  "data": {
    "date_from": "2018-12-01",
    "date_to": "2018-12-31",
    "total": 5
  },
  "meta": {}
}

Sample Request Payload 3:

{
  "action": "CURRENCY_RATES",
  "data": {
    "date_from": "2018-12-01",
    "date_to": "2018-12-31",
    "total": 5
  },
  "meta": {}
}

the action in above request changes for different requests.

When the dashboard page is loaded, we trigger 3 concurrent AJAX POST requests with different actions.

Problem with cypress is you can only specify one response for a route, and other way to handle this is make sequential requests (which we can’t do)

Even if we write response as a function it gets called only once.

Any ideas on how we can mock data on the basis of payload?

Share

1 Answer

  1. Best Answer

    One way to handle this situation in Cypress is to create a separate stub for each request payload. Here’s an example:

    cy.route({
  method: "POST",
  url: "/application/api",
  request: {
    body: {
      "action": "CARD_TRANSACTION_HISTORY",
      "data": {
        "date_from": "2018-12-01",
        "date_to": "2018-12-31",
        "total": 5
      },
      "meta": {}
    }
  },
  response: "fixture:transaction_history.json"
});

cy.route({
  method: "POST",
  url: "/application/api",
  request: {
    body: {
      "action": "CARD_BALANCE",
      "data": {
        "date_from": "2018-12-01",
        "date_to": "2018-12-31",
        "total": 5
      },
      "meta": {}
    }
  },
  response: "fixture:balance.json"
});

cy.route({
  method: "POST",
  url: "/application/api",
  request: {
    body: {
      "action": "CURRENCY_RATES",
      "data": {
        "date_from": "2018-12-01",
        "date_to": "2018-12-31",
        "total": 5
      },
      "meta": {}
    }
  },
  response: "fixture:currency_rates.json"
});

    With this setup, you can specify a different response for each request based on the request payload. The stub will match the request payload exactly, so you don’t need to worry about requests with different payloads getting the same response.

    • 0

Leave an answer

You must login to add an answer.

Need An Account,