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:
- 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') })
- 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.