Angular: Component class vs DOM testing

In this article, we'll be looking at the two ways Angular allows developers to test application components and the pros & cons of each. Before we get started, let's see what the Angular documentation have to say about what makes up a component.

A component, unlike all other parts of an Angular application, combines an HTML template and a TypeScript class. The component truly is the template and the class working together.

We can infer from this, that a class alone doesn't make up a component. Because after all, components are reusable pieces of user interfaces made up of HTML & Javascript code. With that said, let's get cracking.

N.B. Basic understanding of testing Angular applications is assumed.

The above component will be used as an example to describe the different testing techniques.

Component class Testing

We can test a component class in isolation, much like we would a service class. Like the name implies, component class testing involves testing a component class on its own without worrying about its template (HTML) or how a user interacts with it.

component class testing example

False positive test result after updating template

Notice how the template of the component under test has been updated. Unfortunately, the test will still pass because we are testing implementation details.

Pros

• Tests run faster because no DOM is required
• Great for testing implementation details of a component (Is that a good thing to do?)
• Requires little code compared to DOM testing

Cons

• A simple refactor can cause all test to fail
• Tests may not fail when your application is not working as intended
• You cannot interact with DOM elements

Component DOM Testing

Unlike component-class testing, this technique encourages good testing practices because it allows us to write tests that simulate how a user will use/interact with our application. Here, we write tests that simulate actual events like clicking a button or filling a form and verifying what's being displayed in the browser of the user.

Component DOM testing requires testing a component as a whole (class, template & other components it interacts with).

component DOM testing example

In the above test, you can see we find a button in the DOM and trigger a click event on it after which we assert that the text displayed in the browser matches our expectation.

Note: This test assumes the example component template hasn’t been modified.

Pros

• Refactoring implementation details (not behaviour) doesn’t break the test
• Errors are easily caught during development when something breaks
• DOM elements can be interacted with
• Gives developers confidence knowing their app will always work as intended

Cons

• Tests may run slower compared to component-class testing
• It requires a little bit more code (without a third-party library)

Conclusion

I hope this article was able to explain the options available to us (developers) for testing Angular components. If you would love to know more about component testing or the preferred approach to testing them, please see the links below.

https://angular.io/guide/testing#component-test-basics
https://kentcdodds.com/blog/testing-implementation-details
https://github.com/testing-library/angular-testing-library