Js/cypress.io: How To Iterate Over 2 Corresponding Sets Of Data

JS/Cypress.io: How to iterate over 2 corresponding sets of data This is what I have currently and it works, but I want to make it more DRY (do not repeat yourself): Using Cypress.i

Solution 1:

I would go for keyvalue pair arrays within a Map object, something like:

const items = newMap([
        ['NE', "26% to 50% of People"],
        ['MO', "26% to 50% of People"],
        ['KS', "26% to 50% of People"],
        ['VT', "60% of People"],
        ['PA', "60% of People"],
        ['MD', "81% to 90% of People"]
    ]);

    for (const [key, value] of items.entries()) {
        it('check my items', () => {

            cy.get(`[data-popup-text="${value}"`).within(() => {
                cy.get(`[data-state="${key}`).trigger('mouseover', {force: true})
                cy.get(`[data-state="${key}`).click({force: true})
                cy.get(`[data-state="${key}`).should('be.visible')
            })
        })
    }

Solution 2:

Ended up using this:

farooqs_data.json file:

{
 'NE': "26% to 50% of People",
 'MO': "26% to 50% of People",
 'KS': "26% to 50% of People",
 'VT': "60% of People",
 'PA': "60% of People",
 'MD': "81% to 90% of People",
}

Test code:

const state_data = require('/path/to/my/json/data/file/farooqs_data.json');

        Object.keys(state_data).forEach(function(key) {
        cy.get(`[data-popup-text="${state_data[key]}"]`).within(() => 
        {
            cy.get(`[data-state="${key}"]`).trigger('mouseover' {force: true})                                               
            cy.get(`[data-state="${key}"]`).click({force: true})                
            cy.get(`[data-state="${key}"]`).should('be.visible')
            })
        })