Easily test UI components

Accelerate tests with Cypress

In the past week, we have already create a component, basically a custom input form component.

We wish to have everything checked in our new project and quality processes force us to coverage a % of our code with testing, so we have to be ready to test.

We are bored of boring test for testing functionalities or unit testing that mocks everything in the core of nowhere else, so we decide to use Cypress to be sure things work as we expected they work.

No comparison and comments vs its predecessors like Selenium, Protactor… It is just faster, very nice to code and it gets the job done.

Introduction

Summarising, we have to test this component and its different part of the code

Three states to tests

If you want to see how we created this custom component, click the link below 👇

Custom Form Elements in Angular

1. Integrating Cypress

ng add @cypress/schematic

2. Think before you make

What we are going to test is the three states of the component: Default, Filled and Active.

Overall, We do focussing on the structure of the data. Then, in terms of the changes we see into the styles and we get deep into what is changed in our Css’s state.

Default

We create the component, there is no problem and the component exists in itself with a correct field

Filled

We write down into the input and the filled text should appear in the input

Active

Changes are reflected in the UI

3. Now, testing it with code

We build our first tests here

cypress/integration/spec.ts

describe('Custom Input Form Component', () => {
const typeComponent = 'app-text-field-form'
beforeEach(() => {
  cy.visit('/')
})

Just visiting the webpage…

Default

We create the component, there is no problem and the component exists in itself with a correct field

it(‘Default’, () => {
  cy.get(typeComponent).contains(‘Another name’)
})

Filled

We write down into the input and the filled text should appear in the input

it('Filled', () => {
   const foo = 'Hello, World';
   
   cy.get(typeComponent).type(foo)
   cy.get(`${typeComponent} > input`).should('have.value', foo)
})

Active

Changes are reflected in the UI

it('Active', () => {
  const foo = 'Hello, World';
  
  cy.get(`${typeComponent} > input`).first().focus()
  cy.get(`${typeComponent} > input`).should('have.css', 'border', '1px solid rgb(146, 119, 255)')
})

In my case, I just compared with the border because it is the only thing to be added when it is Active. However, I admit you can do in a more elegant way adding classes and comparing in Cypress if the classes were added successfully.

Here is the API of Cypress to interact with the DOM

Table of Contents | Cypress Documentation

Open our tests

ng e2e

Video generated from Cypress, it is the same you will get if you get the command below run

Code

I don’t share a Stackblitz because it is hard to integrate with Cypress and you won’t be able to run commands, however I have created a github repository with all the code 👨‍💻 I explained before.

GitHub - ackuser/ng-custom-form-input-cypress: Custom Form Input created with Angular and tested…

Conclusion

If you are newbie in Cypress & testing or even if you didn’t know it, I hope this article can give an idea of the possibilities around Cypress and how it helps us to automate tasks (it comes with a lot of features like video recording, screenshots, etc).

Nowadays, it is the best Framework for testing Front, this kind of tests give us confidence and allow us to automate interactions.

There are more capabilities that we may see in other posts, so follow me if you want to see how I solve normal problems that you can find in your daily basis. Stay tuned and see you soon!!!