Writing First Tests With Cypress

Hello fellow developers I hope you all are doing fine 😉

Lets continue to our cypress series In this blog we are going to write our first cypress tests. We will continue from where we left off if you want to know what we did in last blog link is shared at the end of the blog.

Now that our Component is mounted, the next step will be to start selecting and interacting with parts of the component. This is the ACT step  “Arrange, Act, Assert”.

Once we are done acting on component, we can then verify  expected state of the component is what we think it should be. This is Assert step.

By default, the Stepper components counter is initialized “0”. It also has  prop that can specify an initial count.

Let’s test that mounting the component  in its default state has a count of “0” .

Then, we will test  setting the initial count also works.

In your spec file, add following inside the existing describe block:

const counterSelector = '[data-cy=counter]'
const incrementSelector = '[aria-label=increment]'
const decrementSelector = '[aria-label=decrement]'

it('stepper should default to 0', () => {
  // Arrange
  cy.mount(<Stepper />)
  // Assert
  cy.get(counterSelector).should('have.text', '0')
})

it('supports an "initial" prop to set the value', () => {
  // Arrange
  cy.mount(<Stepper initial={100} />)
  // Assert
  cy.get(counterSelector).should('have.text', '100')
})

In the above test, we arranged and asserted, but didn’t act on component. We should also test when a user interacts with the component by clicking the “increment” and “decrement” buttons that the value of Count changes.

You’ll notice that we’re talking about how  user would interact with  component, and not technical, React-specific concepts.

You can do  well-written, comprehensive test for  Stepper component by approaching this test as a user would.

Don’t think about data, methods, or props. Think solely about UI and use your tests to automate what you would naturally do as user.

You’ll test  component thoroughly without getting bogged down in details. All that matters is that if the developer uses the component with  given API, the end-user will be able to use it as expected.

Now, let’s test Stepper component! Add following tests:

1. You can increment and decrement  stepper

it('when the increment button is pressed, the counter is incremented', () => {
  // Arrange
  cy.mount(<Stepper />)
  // Act
  cy.get(incrementSelector).click()
  // Assert
  cy.get(counterSelector).should('have.text', '1')
})

it('when the decrement button is pressed, the counter is decremented', () => {
  // Arrange
  cy.mount(<Stepper />)
  // Act
  cy.get(decrementSelector).click()
  // Assert
  cy.get(counterSelector).should('have.text', '-1')
})

2. Next, run through  behavior of  Stepper as a user would. There is duplication of coverage but that’s okay because it exercises the component in a more real-world usage. This test is more likely to fail if there is any issue in the component, not just with specific button or text rendered.

it('when clicking increment and decrement buttons, the counter is changed as expected', () => {
  cy.mount(<Stepper initial={100} />)
  cy.get(counterSelector).should('have.text', '100')
  cy.get(incrementSelector).click()
  cy.get(counterSelector).should('have.text', '101')
  cy.get(decrementSelector).click().click()
  cy.get(counterSelector).should('have.text', '99')
})

I hope you find this blog useful feel free to contact me in comment section if you have any queries or doubts regarding the same.