tldr;
Developing UI components for our apps can be difficult. They require different inputs, or you may have to fill out a long form to see it, or have specific data come back from the API to see the component. But using a tool like Cypress’s component tests can simplify it by isolating the UI component so you can develop it without a lot of setup.
What are Cypress Component Tests
Let’s take just a minute to talk about what Cypress component tests are. They are relatively new to the ecosystem, and many people probably haven’t used them. Essentially, these tests are similar to a full Cypress e2e test, in that it takes a component and actually loads it into a browser instance. You can see what it will look like when used in your app. You can test interactions, display functionality, etc. You can provide different inputs, mock services, etc. The same great developer experience you get in Cypress e2e tests exists with the component tests.
Cypress component tests can be used in conjunction with or as a replacement for the default tests that are created for Angular components. I like to use both of them, with the default tests being more unit test oriented, and Cypress component tests looking at the component in the browser and ensuring a user can interact with it properly.
Here’s an example of a Cypress component tests:
describe(MyComponent.name, () => {
it(‘renders the component’, () => {
cy.mount(MyComponent, {
imports: [],
componentProperties: {
myInput: ‘my-input-value’,
},
providers: [],
});
});
})
In this test, Cypress mounts the component. If it is able to, the test passes. You can then add other checks and tests below the cy.mount(). You can import any dependencies the component needs and add them to the imports array, or any providers needed, or the value for any inputs the component is looking for.
To get started with Cypress’s component tests, check out their documentation.
Developing Components with Cypress
One way that I find Cypress component tests helpful is when needing to change the design of a component. Recently, I had a UI component that had a need for a new design. The process of getting to the point in the app where the component shows up takes a minute to reach, so every time you make a change you have to fill out a form and click next a few times. I didn’t want to do that for each change. So I created a Cypress component test for the component, and opened it up. As I changed the design, I could easily check it until it was correct. Once the design was complete, I could go to the full app and check it in there and ensure that the app still worked as expected.
In my case, I was just working with the design only. There wasn’t much I needed to do in terms of checking functionality of the component. However, I have a custom accordion component that has several Cypress tests written on it. If we decided to change how it displays, those tests would come in very important. As long as the tests keep passing, I won’t have to go to every place the component is implemented and ensure I didn’t break anything.
Conclusion
There are a lot of ways to develop your Angular components, and this is just one of my favorite ways. The easier it is to make changes to your app, with confidence that you haven’t broken anything, the better.
Developing Angular Components with Cypress Component Tests was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.