Finding all items in an array in Cypress and validating them using JavaScript assertions

Question

Finding all items in an array in Cypress and validating them using JavaScript assertions

After making an API call, I have received an array response that includes the following information:

[
    {
        "IsDatalakeEnabled": true,
        "RecoveryHr": {
            "IsRecoveryHREnabled": false,
            "RecoveryHeartRateInterval": 120,
            "RecoveryHeartRateSessionTime": 300
        }
    }
]

My task is to extract each key:value pair and verify that they exist in another API call response body with the following structure:

...
"StudioAddress": null,
        "StudioProfileLanguage": {
            "LanguageName": "English",
            "LanguageCode": "en"
        },
        "IsDiversityChannel": true,
        "TotalDiversityRadios": 2,
        "IsDatalakeEnabled": false,
        "IsNetpulse": false,
        "RecoveryHeartRateInterval": 120,
        "RecoveryHeartRateSessionTime": 300,
        "IsRecoveryHREnabled": false,
        "StudioPhysicalLocationId": null,
        "StudioLocation": null,
        "IsIntroCapacityEnabled": false,
        "Status": null,
        "IsWeb": false,
        "OrangeBook": null,
        "IsFeReservationEnabled": true,
        "TimeZone": "America/New_York",
        "IsModifyMaxHr": false,
        "IsRunRowEnabled": false,
        "WeightMeasure": "LB",
...

I attempted to use cy.each(), but it treats the data as a single object:

{
    "TotalDiversityRadios": "0",
    "IsDatalakeEnabled": true
}

Any suggestions or hints on how to approach this would be greatly appreciated. Thank you!

I tried converting the response body object into an array using _.castArray(). I also experimented with Object.entries()

Update 01/14/2023 @adoff This is what my test code looks like:

validateStudioSettings() {
        // Code provided for testing purposes...
    }

While running this code in Cypress, I encountered an error: Cypress Error Console

javascript arrays json iteration cypress

Answer 1

Answer №1

To efficiently compare key/value pairs between objects, you can utilize Object.entries(obj) to generate an array of key/value pairs that can be checked against the expected object.

It's important to note that there may be nested structures within the response data.

One approach could involve flattening the response before comparing key/value pairs.

Below is a handy function that accomplishes this:

const object = {
  IsDatalakeEnabled: true,
  RecoveryHr: {
    IsRecoveryHREnabled: false,
    RecoveryHeartRateInterval: 120,
    RecoveryHeartRateSessionTime: 300,
  },
};

function keyValues(obj) {
  return Object.entries(obj).reduce((acc, [key, value]) => {
    if (typeof value === "object") {
      const kvs = keyValues(value);
      acc = acc.concat(kvs);
    } else {
      acc.push([key, value]);
    }
    return acc;
  }, []);
}

console.log(keyValues(object))
/*
(4) [Array(2), Array(2), Array(2), Array(2)]
 0: (2) ['IsDatalakeEnabled', true]
 1: (2) ['IsRecoveryHREnabled', false]
 2: (2) ['RecoveryHeartRateInterval', 120]
 3: (2) ['RecoveryHeartRateSessionTime', 300]
 length: 4
*/

For testing purposes, consider the following sample script:

const expected = {
  ...
  "IsDatalakeEnabled": false,
  "IsNetpulse": false,
  "RecoveryHeartRateInterval": 120,
  "RecoveryHeartRateSessionTime": 300,
  ...
}

function keyValues(obj) {
  return Object.entries(obj).reduce((acc, [key, value]) => {
    if (typeof value === "object") {
      const kvs = keyValues(value);
      acc = acc.concat(kvs);
    } else {
      acc.push([key, value]);
    }
    return acc;
  }, []);
}

cy.request(...)
  .then(response => response.json())
  .then(data => {
    const obj = data[0]
    const kvs = keyValues(obj)
    kvs.forEach([key, value] => {
      expect(expected(key)).to.eq(value)
    })
  })

Answer 2

To efficiently compare key/value pairs between objects, you can utilize Object.entries(obj) to generate an array of key/value pairs that can be checked against the expected object.

It's important to note that there may be nested structures within the response data.

One approach could involve flattening the response before comparing key/value pairs.

Below is a handy function that accomplishes this:

const object = {
  IsDatalakeEnabled: true,
  RecoveryHr: {
    IsRecoveryHREnabled: false,
    RecoveryHeartRateInterval: 120,
    RecoveryHeartRateSessionTime: 300,
  },
};

function keyValues(obj) {
  return Object.entries(obj).reduce((acc, [key, value]) => {
    if (typeof value === "object") {
      const kvs = keyValues(value);
      acc = acc.concat(kvs);
    } else {
      acc.push([key, value]);
    }
    return acc;
  }, []);
}

console.log(keyValues(object))
/*
(4) [Array(2), Array(2), Array(2), Array(2)]
 0: (2) ['IsDatalakeEnabled', true]
 1: (2) ['IsRecoveryHREnabled', false]
 2: (2) ['RecoveryHeartRateInterval', 120]
 3: (2) ['RecoveryHeartRateSessionTime', 300]
 length: 4
*/

For testing purposes, consider the following sample script:

const expected = {
  ...
  "IsDatalakeEnabled": false,
  "IsNetpulse": false,
  "RecoveryHeartRateInterval": 120,
  "RecoveryHeartRateSessionTime": 300,
  ...
}

function keyValues(obj) {
  return Object.entries(obj).reduce((acc, [key, value]) => {
    if (typeof value === "object") {
      const kvs = keyValues(value);
      acc = acc.concat(kvs);
    } else {
      acc.push([key, value]);
    }
    return acc;
  }, []);
}

cy.request(...)
  .then(response => response.json())
  .then(data => {
    const obj = data[0]
    const kvs = keyValues(obj)
    kvs.forEach([key, value] => {
      expect(expected(key)).to.eq(value)
    })
  })

Finding all items in an array in Cypress and validating them using JavaScript assertions

Answer №1

Similar questions

Stop the submission process by deactivating the button until a selection is made

Error encountered due to WCF's JSON error handler triggering an exception

Despite the presence of data, MongoDB is not returning any values

Numbering the items in ng-repeat directive

In the realm of JavaScript, what happens when a function yields yet another function while also welcoming another function as an argument?

What are the steps to achieve complete test coverage for my Angular login form? Encountering an issue with reading property 'subscribe' of undefined

Running multiple server and client codes on node.js simultaneously

When using json_decode, the first character of string numbers will have the zero removed

Store the response data in a global variable or forward it to another function in Node.js using Express JS

Access the outcome by utilizing a for loop

Encountering issues while trying to generate a GitHub repository through Postman due to JSON parsing errors

Transform a list of file directories into a JSON format using ReactJS

The function(result) is triggered when an http.get request is made

Exploring JavaScript capabilities with Google - managing and updating object names with numbers

Encountering a ReferrenceError when utilizing jQuery with TypeScript

Making an Axios request with parameters

The art of simulating a service in unit tests for an AngularAMD application

"Encoding and Decoding Basic Custom Data Types in Elm: A Step-by-Step Guide

Is there a way in AngularJS to set all radio buttons to false when one is chosen as true?

Custom CSS for the Google Maps Circle Object