Not able to poll the axios request in cypress test

Question

My axios request polling created for Cypress is not actually polling the request. Could someone please advise how can we fix the problem ?

Note: For some reason I would like to do this with axios only!

In the subscriptionChange.spec.js file..

helperFunctions
                .checkSubscriptionId(apiEndpointUrl, tokenDetails)
                .then((subscriptionId) => {
                  console.log("Sub id data::" + subscriptionId);

                  if (subscriptionId != null) {
                    cy.request({
                      method: "POST",
                      url:
                        apiEndpointUrl +
                        `/someurl/v1/subscription/${subscriptionId}/change`,
                      headers: {
                        Authorization: "Bearer " + tokenDetails,
                      },
                      body: {
                        userId: userId,
                        planCode: "plus_annual",
                      },
                    }).then((resp) => {
                      console.log("Change Subscription response ::" + resp);
                      const planName = resp.body.subscriptionChange.plan.name;
                      const planCode = resp.body.subscriptionChange.plan.code;
                      expect(resp.status).to.eq(200);
                      expect(planCode).to.contain("plus_annual");
                      expect(planName).to.contain("Plus Annual");
                    });
                  }
                });

helperFunctions.js

class helperFunctions {
  checkSubscriptionId = async (apiEndpointUrl, tokenDetails, retryNo = 0) => {
    const options = {
      headers: {
        Authorization: "Bearer " + tokenDetails,
      },
    };

    return await axios
      .get(apiEndpointUrl + "/someurl/v1/user/info", options)
      .then((res) => {
        console.log("RESPONSE ==== : ", res);
        const subscriptionId =
          res.data.user.subscription.gateway_subscription_id;

        if (retryNo >= NUM_RETRIES) {
          throw new Error(
            `Subscription not found after ${NUM_RETRIES} retries`
          );
        }
        // If it is found, return
        if (subscriptionId || retryNo >= NUM_RETRIES) {
          return;
        } 
         return new Cypress.Promise((resolve) => {
          setTimeout(() => {
            console.log("Retrying ::" + retryNo);
            resolve(
            this.checkSubscriptionId(apiEndpointUrl, tokenDetails, retryNo + 1)
            );
          }, 2000);
        });
      })
      .catch((err) => {
        console.log("ERROR: ====", err);
      });
  };
}

Answer 1

Is it this line?

this.checkSubscriptionId(tokenDetails, retryNo + 1)

The parameters don't match up, maybe use

this.checkSubscriptionId(apiEndpointUrl, tokenDetails, retryNo + 1)

To fix the delay, add the recursive call in a callback

// try again after delay
this.delay(retryNo, () => {
  this.checkSubscriptionId(apiEndpointUrl, tokenDetails, retryNo + 1);
});
          
...

// delay function..
delay(retryNo, callback) {
  setTimeout(() => {
    console.log("Retrying ::" + retryNo);
    callback();
  }, 2000);
}

Answer 2

This question is very similar Looping API calls with Axios and Promises.

There are two notes that are missing in your code, return on delay and adding a promise around setTimout()

return delay(2000).then(() => {
  return this.checkSubscriptionId(apiEndpointUrl, tokenDetails, retryNo + 1)
})

...

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

Answer 3

Using the sample given by Cypress Request Polling as basis, substituting axios for cy.request():

• you don't need async/await since you are using .then()

• checking the retries at the top of the recursive call to simplify

• moving setTimeout into the function for clarity

• adding return subscriptionId so you get the value outside

• adding return on the recursive call so that the value found deeper is also returned

checkSubscriptionId(apiEndpointUrl, tokenDetails, retryNo = 0) {

  if (retryNo >= NUM_RETRIES) {
    throw new Error(`Subscription not found after ${NUM_RETRIES} retries`);
  }

  const options = {
    headers: { Authorization: "Bearer " + tokenDetails }
  }

  return axios.get(apiEndpointUrl + "/someurl/v1/user/info", options)
    .then((res) => {
      console.log("RESPONSE ==== : ", res)

      const subscriptionId = res.data.user.subscription.gateway_subscription_id;

      if (subscriptionId) {
        // break out of the recursive loop
        return subscriptionId;                                    
      }

      return new Cypress.Promise((resolve) => {
        setTimeout(() => {
          console.log("Retrying ::" + retryNo);
          resolve(this.checkSubscriptionId(apiEndpointUrl, tokenDetails, retryNo + 1))
        }, 2000)
      })
    })
}

As proof of concept, this simple test works for setTimeout()

cy.then(() => {
  return new Cypress.Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(42)
    }, 1000)
  })
})
.should('eq', 42)

Answer 4

You're not waiting for delay() to actually delay anything; all it does is schedule a console.log() for later.

I'd highly recommend the axios-retry library for this

import axios, { AxiosError } from "axios";
import axiosRetry from "axios-retry";

const axiosInstance = axios.create();

// Add an interceptor to fail responses without subscription ID
axiosInstance.interceptors.response.use(
  (res) => {
    const subscriptionId = res.data.user?.subscription?.gateway_subscription_id;

    if (!subscriptionId) {
      const err = new AxiosError(
        "Pre-condition failed",
        "412",
        res.config,
        res.request,
        res
      );
      err.status = 412;
      return Promise.reject(err);
    }
    return res;
  },
  null,
  {
    synchronous: true,
  }
);

axiosRetry(axiosInstance, {
  retries: NUM_RETRIES,
  shouldResetTimeout: true,
  retryDelay: () => 2000,
  retryCondition: (err) => err.status === 412,
});

checkSubscriptionId = async (baseURL, token) =>
  (
    await axiosInstance.get("/someurl/v1/user/info", {
      baseURL,
      headers: { authorization: `Bearer ${token}` },
    })
  ).data;