Has It Not Happened Yet

Let me get back to the testing of negative states one more time. Recently, I have read a pretty good blog post How to test that cache works with Cypress by Walmyr.

A piece of Cypress test syntax caught my eye:

cy.search(randomWord).then(() => {
  expect(count, `network calls to fetch ${randomWord}`).to.equal(
    1,
  )

  cy.wait('@random')

  cy.search(randomWord).then(() => {
    expect(
      count,
      `network calls to fetch ${randomWord}`,
    ).to.equal(1)
  })
})

The test above confirms that the web page caches the search requests and does NOT send the second request when we search for the random string using cy.search(randomWord). Do you see the problem here?

No, it is not using the local variable count to keep track of the number of intercepted network calls

// instead of this
let count = 0

cy.intercept(`**/search?query=${randomWord}**`, (req) => {
  count += 1
  req.reply({ fixture: 'empty' })
}).as('random')

cy.search(randomWord).then(() => {
  expect(count, `network calls to fetch ${randomWord}`).to.equal(
    1,
  )
})

// do this
cy.intercept(`**/search?query=${randomWord}**`, { fixture: 'empty' })
cy.search(randomWord)
cy.get('@random.all').should('have.length', 1)

There is a bigger problem with the test. It confuses "thing X does not happen" with "thing X did not happen yet". When do we know for sure that the thing X does not happen in response to some action? Either when there is a clear indication that the system has finished processing the action; reaching some final state Y for example would be ideal.

cy.intercept(`**/search?query=${randomWord}**`, { fixture: 'empty' })
cy.search(randomWord)
cy.get('.results') // check the final state
cy.get('@random.all').should('have.length', 1)

If the application sets the class "results" on some element, then we know the network calls have been made, and it is safe to check the number of intercepted network calls. We check something positive first, and then run the "negative" assertion that confirms the number of network calls remains the same.

Often, the application does not set the state, causing confusion. In that case, we cannot check just the negative assertion, since it will pass really quickly and the application might still do the network call 10ms later. Thus we need to add a timeout:

cy.intercept(`**/search?query=${randomWord}**`, { fixture: 'empty' })
cy.search(randomWord).wait(1000)
// the application does not make the network call within 1 second
// we can use timeout:0 when checking the number to speed up the test
// it either passes immediately or fails right away, since we waited 1 second before
cy.get('@random.all', { timeout: 0 }).should('have.length', 1)

So remember when dealing with negative assertions "something X does not happen" to always check when something does not happen. You should either "know" when to check, or wait for N milliseconds and then check. The former is faster, while the later is simpler.

For more Cypress network testing goodness, check out my course Cypress Network Testing Exercises.