Testing Cypress Co

Hello Fellow Developers, I hope you all are doing fine 😉

In this blog we are going to learn about how to write cypress tests for events.

Please refer to last blog of first tests with cypress for stepper component and we will continue with that in this blog too.

In Stepper component, we bind React OnClick listener with callbacks to buttons that increment and decrement the internal counter value.

Because the component manage all of  state internally, it is opaque to the developer or parent component consuming  Stepper.

<div>
  <button aria-label="decrement" onClick={setCount(count - 1)}>
    -
  </button>
  <span data-cy="counter">{count}</span>
  <button aria-label="increment" onClick={setCount(count + 1)}>
    +
  </button>
</div>

This can be fine, but depending on  needs of  developer, it can be difficult for  consumer of the Stepper  to know when change occurs or when user interact with the Stepper’s various buttons.

One solution is to accept an OnChange prop and call it when the internal state of  Stepper changes.

You would use the Stepper from a parent component like so:

<div>
  What's your age?
  <Stepper onChange={onAgeChange} />
  <!-- onAgeChange is a method the parent component defines -->
</div>

Here is what  implementation  looks like:

export default function Stepper({ initial = 0, onChange = () => {} }) {
  const [count, setCount] = useState(initial)

  const increment = () => {
    const newCount = count + 1
    setCount(newCount)
    onChange(newCount)
  }

  const decrement = () => {
    const newCount = count - 1
    setCount(newCount)
    onChange(newCount)
  }

  return (
    <div>
      <button aria-label="decrement" onClick={decrement}>
        -
      </button>
      <span data-cy="counter">{count}</span>
      <button aria-label="increment" onClick={increment}>
        +
      </button>
    </div>
  )
}

Above, we added a new OnChange prop and abstracted the buttons OnClick event into their own method.

As developer of  Stepper component, you want to make sure that when  end-user clicks  increment and decrement buttons, that OnChange prop is called to the consuming component.

Lets arrange our test. Let’s set up  spies and bind them to  component:

it('clicking + fires a change event with the incremented value', () => {
  // Arrange
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(<Stepper onClick={onChangeSpy})
})

Lets Act by firing click event for the increment button.

it('clicking + fires a change event with the incremented value', () => {
  // Arrange
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(<Stepper onChange={onChangeSpy} />)
  // Act
  cy.get(incrementSelector).click()
})

Finally, we Assert that onChange prop was called with  correct value.

it('clicking + fires a change event with the incremented value', () => {
  // Arrange
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(<Stepper onChange={onChangeSpy} />)
  // Act
  cy.get(incrementSelector).click()
  // Assert
  cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})

That’s It for this Blog I hope your understood how to add cypress test with events.

If you have any doubts feel free to connect with me in comment section. See you in the next one 😉