Cypress - spread() Method

Last Updated : 05 Sep, 2024

The spread() method in Cypress is a utility function provided by the Bluebird library, which Cypress uses internally to handle promises. It allows you to handle multiple promise results more elegantly by spreading them out into separate arguments, making your code cleaner and easier to read.

Usages of Cypress - spread() Method

Here are the following usage of cypress-spread() method:

Handling Multiple Promises: When you have multiple promises and want to work with their results individually.
Improving Readability: Helps in avoiding deeply nested .then() calls, thus making the code more readable.
Simplifying Code: Allows you to manage and destructure multiple values returned from promises easily.

Syntax

cy.wrap(Promise.all([promise1, promise2, promise3])).spread((result1, result2, result3) => {
    // Use result1, result2, and result3 here
});

Arguments

Arguments: The spread() method takes a function as an argument, which is called with the individual results of the promises.

Examples of Cypress - spread() Method

Example 1: Basic Usage

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
        <title>
   Example 1
        </title>
    </head>
    <body>
        <button id="loadData">
   Load Data
        </button>
        <div id="result">
        </div>
        <script>
   document.getElementById('loadData').addEventListener('click', function() {
            Promise.all([
                fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json()),
                fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json())
            ]).then(([post, user]) => {
                document.getElementById('result').innerHTML = `
                                                                                <h2>Post Title: ${post.title}</h2>
                                                                                <p>User Name: ${user.name}</p>
                `;
            });
        });
        </script>
    </body>
</html>

Cypress Test Code

JavaScript

describe('Spread Method Example 1', () => {
    it('should load data and display results', () => {
        cy.visit('http://localhost:3000'); // Adjust the URL as needed

        cy.get('#loadData').click();

        cy.window().then((win) => {
            cy.wrap(Promise.all([
                win.fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json()),
                win.fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json())
            ])).spread((post, user) => {
                cy.get('#result').should('contain.text', post.title);
                cy.get('#result').should('contain.text', user.name);
            });
        });
    });
});

Explanation

HTML Code: Sets up a button that triggers fetching data from two different APIs. The results are displayed on the page.
Cypress Test Code: Visits the page, clicks the button, and uses spread() to handle the results of the two fetch promises. It then verifies that the results are correctly displayed on the page.

Output

Example 2: Handling Multiple Values

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example 2</title>
</head>
<body>
    <button id="fetchData">Fetch Data</button>
    <div id="data"></div>

    <script>
        document.getElementById('fetchData').addEventListener('click', function() {
            Promise.all([
                fetch('https://jsonplaceholder.typicode.com/photos/1').then(res => res.json()),
                fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json())
            ]).then(([photo, todo]) => {
                document.getElementById('data').innerHTML = `
                    <h3>Photo Title: ${photo.title}</h3>
                    <p>Todo Task: ${todo.title}</p>
                `;
            });
        });
    </script>
</body>
</html>

Cypress Test Code

JavaScript

describe("Spread Method Example 2", () => {
    it("should fetch and display data", () => {
        cy.visit("http://localhost:3000"); // Adjust the URL
                                           // as needed

        cy.get("#fetchData").click();

        cy.window().then((win) => {
            cy.wrap(Promise.all([
                  win.fetch(
                         "https://jsonplaceholder.typicode.com/photos/1")
                      .then(res => res.json()),
                  win.fetch(
                         "https://jsonplaceholder.typicode.com/todos/1")
                      .then(res => res.json())
              ]))
                .spread((photo, todo) => {
                    cy.get("#data").should("contain.text",
                                           photo.title);
                    cy.get("#data").should("contain.text",
                                           todo.title);
                });
        });
    });
});

Explanation

HTML Code: Contains a button that, when clicked, fetches data from two different APIs and displays the results.
Cypress Test Code: Simulates clicking the button, waits for the data to be fetched, and then uses spread() to handle the multiple results, verifying their content.

Output

Conclusion

The spread() method in Cypress helps to simplify the handling of multiple promises by spreading their resolved values into separate arguments. This approach improves code readability and makes it easier to work with multiple asynchronous results. Using spread() can lead to cleaner and more manageable test code when dealing with multiple promises.

Cypress - spread() Method

sachinyadavshiv8

Improve

Article Tags :

Cypress - spread() Method

Usages of Cypress - spread() Method

Syntax

Arguments

Examples of Cypress - spread() Method

Example 1: Basic Usage

Explanation

Output

Example 2: Handling Multiple Values

Explanation

Output

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?