[Cypress] Test XHR Failure Conditions with Cypress

Testing your application’s behavior when an XHR call results in an error can be difficult. The use of stubs for XHR calls makes it easy for us to setup failure scenarios and ensure that our front-end responds the way we expect. In this lesson, we’ll stub a 500 response for a form submission and verify that our application responds appropriately.

 

    it('should show an error message for a failed from subission', function () {
        const newTodo = "Test";
        cy.server();
        cy.route({
            method: 'POST',
            url: '/api/todos',
            status: 500,
            response: {}
        }).as('save');

        cy.seedAndVisit();

        cy.get('.new-todo')
            .type(newTodo)
            .type('{enter}');

        cy.wait('@save');

        cy.get('.todo-list li').should('have.length', 4);
        cy.get('.error').should('be.visible');
    });