PITCHME.md

☀️ Part 5: Control network calls

📚 You will learn

• how to spy / stub network calls
• how to wait for the network calls from tests
• how to use network calls in assertions

+++

• keep todomvc app running
• open cypress/integration/05-xhr/spec.js
• cy.route is deprecated, use cy.intercept

+++

Situation

• there is no resetting the state before each test
• the test passes but something is wrong

it('starts with zero items', () => {
  cy.visit('/')
  cy.get('li.todo').should('have.length', 0)
})

+++

Problem

@ul

• page loads
• web application makes XHR call GET /todos
  • meanwhile it shows an empty list of todos
• Cypress assertion passes!
• GET /todos returns with 2 items
  • they are added to the DOM
  • but the test has already finished

@ulend

+++

Waiting

it('starts with zero items', () => {
  cy.visit('/')
  cy.wait(1000)
  cy.get('li.todo').should('have.length', 0)
})

+++

better to wait on a specific XHR request. Network is just observable public effect, just like DOM.

+++

Todo

In 05-xhr/spec.js test "starts with zero items"

@ul

• spy on specific route with cy.intercept
  • should we start mock server before or after cy.visit?
• save as an alias
• wait for this XHR alias
  • then check the DOM

@ulend

tips: cy.intercept, Network requests guide

+++

💡 No need to cy.wait(...).then(...). All Cypress commands will be chained automatically.

cy.intercept('GET', '/todos').as('todos')
cy.visit('/')
cy.wait('@todos')
// cy.get() will run AFTER cy.wait() finishes
cy.get('li.todo').should('have.length', 0)

Read Introduction to Cypress "Commands Run Serially"

+++

Todo

add to test "starts with zero items":

• wait for the XHR alias like before
• its response body should be an empty array

+++

Stub network call

Update test "starts with zero items (stubbed response)"

• instead of just spying on XHR call, let's return some mock data

// returns an empty list
// when `GET /todos` is requested
cy.intercept('GET', '/todos', [])

+++

it('starts with zero items (fixture)', () => {
  // stub `GET /todos` with fixture "empty-list"

  // visit the page
  cy.visit('/')

  // then check the DOM
  cy.get('li.todo').should('have.length', 0)
})

tip: use cy.fixture command

+++

it('loads several items from a fixture', () => {
  // stub route `GET /todos` with data from a fixture file "two-items.json"
  // THEN visit the page
  cy.visit('/')
  // then check the DOM: some items should be marked completed
  // we can do this in a variety of ways
})

+++

Spying on adding an item XHR

When you add an item through the DOM, the app makes POST XHR call.

Note: It is important to be able to use DevTools network tab to inspect the XHR and its request and response.

+++

Todo 1/2

• write a test "posts new item to the server" that confirms that new item is posted to the server

Note: see instructions in the 05-xhr/spec.js for the test

+++

Todo 2/2

• write a test "posts new item to the server response" that confirms that RESPONSE when a new item is posted to the server

Note: see instructions in the 05-xhr/spec.js for the test

+++

Bonus

Network requests guide at https://on.cypress.io/network-requests. Question: which requests do you spy on, which do you stub?

+++

Testing Loading state

In the application we are showing (very quickly) "Loading" state

<div class="loading" v-show="loading">Loading data ...</div>

+++

Todo

• delay the loading XHR request
• assert the UI is showing "Loading" element
• assert the "Loading" element goes away after XHR completes

⌨️ test "shows loading element"

+++

Let's test edge data cases

User cannot enter blank titles. What if our database has old data records with blank titles?

Todo write the test handles todos with blank title

+++

🏁 Spy and stub the network from your tests

• confirm the REST calls
• stub random data