Cypress Workshop

stubbed-get-and-put.spec.ts

describe('Mock XHR Calls', () => {
    beforeEach(() => {
      cy.server();
      cy.route({
        method: 'GET',
        url: '/api/heroes/11',
        response: { id: 11, name: 'Bob the Builder' }
      }).as('heroGet');

      cy.route({
        method: 'PUT',
        url: '/api/heroes/11',
        response: { id: 22, name: 'Mr. Mean' }
      }).as('heroUpdate');
    });

    it('should have unexpected response ', () => {
      const expectedName = 'the Builder Man';
      cy.visit('/detail/11');
      cy.get('input')
        .type('{home}{del}{del}{del}{del}{end} Man')
        .should('have.value', expectedName);
      cy.get('h2')
        .first()
        .should('have.text', `${expectedName.toUpperCase()} Details`);
      cy.get('app-hero-detail button:nth-of-type(2)').click();
      cy.wait('@heroUpdate');

      cy.get('h2')
        .first()
        .should('have.text', `${expectedName.toUpperCase()} Details`);
      cy.get('app-messages div')
        .last()
        .should('contain', 'HeroService: updated hero id=11');
    });
  });