[Cypress] Stub a Post Request for Successful Form Submission with Cypress

In this lesson well stub a POST request and use Cypress commands to fill in and submit a form. We’ll wait for the submission to resolve and then assert that the new item was added to the list.

For example when we dealing with Form submition, we want to issue a new POST request and then check it should update number of todos.

    it.only('should post new todo to the backend', function () {

        // Serve the page

        cy.server();

        // Prepare a POST request

        cy.route({

            method: 'POST',

            url: '/api/todos',

            response: {id: 123, name: 'new todo', isComplete: false}

        }).as('save');

        // Call a custom command to load initial todos

        cy.seedAndVisit();

        // Enter a new todo

        cy.get('.new-todo')

            .type('new todo')

            .type('{enter}');

        // Wait network request to be finished

        cy.wait('@save');

        // Calculate the expected length of todos

        cy.get('.todo-list li')

            .should('have.length', 5);

    });

// command

Cypress.Commands.add('seedAndVisit', (seedData = 'fixture:todos') => {

  cy.server()

  cy.route('GET', '/api/todos', seedData).as('load')

  cy.visit('/')

  cy.wait('@load')

});