Published on

Test a Client Address Book: Part 7

2 min read | 388 words
Authors
cypress tree

Photo by Yi Ma on Unsplash

Testing The Client User Flow

In the final part of the series, we will write a test to verify the expected user flow behavior of the client address book.

The final test file will look like the following:

describe('Client Flow', () => {
  it('allows a user to add, edit, & delete a client', () => {
    // Add client
    cy.visit('/')
    cy.findByText('Add').click()
    cy.findByLabelText('Name (required)').type('Test Name')
    cy.findByLabelText('Email (required)').type('test@mail.com')
    cy.findByLabelText('Phone (required)').type('123456789')
    cy.findByLabelText('Address').type('123 South Street')
    cy.findByLabelText('Company').type('Tests R Us')
    cy.findByLabelText('Notes').type('Test Notes')
    cy.findByText('Add').click()
    cy.findByText('"Test Name successfully added"').should('be.visible')
    cy.findByText('Clients').click()
    // Update client
    cy.findByLabelText('edit Test Name').click()
    cy.findByLabelText('Notes').type(' Updated')
    cy.findByText('Update').click()
    cy.url().should('equal', 'http://localhost:3000/')
    cy.findByText('Test Notes Upda...').should('be.visible')
    // Delete client
    cy.findByLabelText('edit Test Name').click()
    cy.findByText('Delete').click()
    cy.url().should('equal', 'http://localhost:3000/')
    cy.findByText('Test Notes Upda...').should('not.visible')
  })
})

The following video illustrates the entire process:

Summary

In summary, now you know the basics of using Cypress to test user flows in applications.

The final source code can be found here