[Cypress] Test Variations of a Feature in Cypress with a data-driven Test

Many applications have features that can be used with slight variations. Instead of maintaining multiple tests with nearly identical code, we can take advantage of the JavaScript runtime and use normal data structures and plain old JavaScript to test and make assertions for multiple interactions in a single test.

we have a new fixture:

// cypress/fixtures/mixed_todos.json

[
  { "id": 1, "name": "One", "isComplete": false },
  { "id": 2, "name": "Two", "isComplete": true },
  { "id": 3, "name": "Three", "isComplete": true },
  { "id": 4, "name": "Four", "isComplete": false }
]

In the app, when we click different visibility filter, the list will change accordingly.

To test this behavior in clean code, we can use '.wrap().each()' to test it

    it('should Footer todos', function () {
        cy.seedAndVisit('fixture:mixed_todos');

        const filters = [
            { link: 'Active', expectedLength: 2 },
            { link: 'Completed', expectedLength: 2 },
            { link: 'All', expectedLength: 4 }
        ];

        cy.wrap(filters)
            .each(filter => {
                // contains(): find the element contains the text
                cy.contains(filter.link).click();
                cy.get('.todo-list li').should('have.length', filter.expectedLength);
            })
    });