Angular Testing Mastery: The Best Practices to Skyrocket Your Skills!
The goal of this post is to help you comprehend the benefits of testing and make you comfortable with writing or reading tests 👩💻👨💻. I will share some well-known best practices, tips, and advanced techniques, making it relevant for both beginner and senior developers. It is important to note that the post is focused on frontend development, as I am a dedicated frontend developer.
Testing code is often not a primary consideration when you begin developing an app or a library. Initially, the focus is on delivering new features to the customer swiftly, fixing bugs promptly, and deploying them in production 🚀. Consequently, your product works, and you may not have invested time in writing tests. However, as the codebase expands, making changes becomes more complex, and confidence diminishes. New developers struggle to comprehend the code 🥵, especially if there are no specifications, leading to a process of reverse engineering.
Remember: Tests are not just lines of code; they’re the guardians of your developer sanity. Treat them well, and they will make your coding adventures legendary!
Why Testing Is Great
The benefits list is very long, but based on my past and current experiences, here are the main advantages I see in having great tests:
🐛 Error Detection
The primary goal of writing tests is to ensure your code works well. Tests help to identify scenarios with errors that you have not seen during the development. This ensures no regression has been introduced elsewhere in the application or in the code of the feature/fix being developed.
🧱 Code Quality and Reliability
Testing encourages developers to write modular, well-organized, and maintainable code. It is easier to test small methods than a large one with hundreds of lines and conditional statements. Using a well-tested class makes you feel confident to use it, as tests anticipate various scenarios.
🧗 Confidence
When delivering well-tested code, you feel a lot more confident, as writing tests forces you to consider numerous possibilities, scenarios, and error handling. It makes you an expert of your changes! Writing tests can also be seen as a form of development, so you gain more experience with your ecosystem, how it works.
Regarding refactoring, it becomes an easy task because you clear up any doubt when you are sure that your method or component delivers the exact same result as before.
📖 Code Sharing and Readability
This is, in my opinion, an underestimated advantage of having tests. Because tests contain human-readable phrases, such as “when … it should …”, this helps any developer understand the code’s purpose more quickly. In most cases, the code with good naming and comments should be enough, but sometimes you cannot avoid complexity and tests could clearly act like technical specifications. Test Driven Development (TDD) has pushed this concept further, by writing tests before writing code. If you are interested in this approach, there are a lot of articles about it online.
Best Practices
Here are some main best practices and principles from my experience as a frontend developer. But it surely can apply to other types of development.
🕙 Test Whenever You Can
Even if it seems trivial, it is always a good thing to add tests; it will force you to reread your code and avoid mistakes. If your class does practically nothing, the tests should be straightforward. If you think you don’t have time, remember that testing reduces the overall cost of software development, so the time to write tests should be considered when estimating tasks. Consider finding a bug during your development; it will save time for the QA (and/or the customer support team if the bug has shipped into production), and of course also for you, because you do not have to come back to this subject and do a fix.
☮️ Tests should be easy to write
As said before, tests can improve code quality. One great principle I apply to myself is that tests should be (reasonably) easy to write. If it is hard, it probably means that the code can be refactored to be more modular and well-organized. Modern frontend frameworks allow you to split the application into small code chunks; take advantage of this!
The man who moves a mountain begins by carrying away small stones.
― Confucius, Confucius: The Analects
🎨 Mock the dependencies
Sometimes, tests can be painful, not because of the code complexity, but because of dependencies. This problem leads us to another good practice: mock the dependencies. This is always the first thing I do when starting to test a class. I check the constructor, then mock everything in it. For components, I also check its template to mock complex components, directives, or pipes that are used. This helps isolate tests correctly and simplifies them. It also prevents errors like a missing provider needed in a dependency. When your mocks are set, it is also easy to define the context of the tests by setting what the dependencies should do.
📈 Do not rely only on coverage
Coverage is a great tool to determine if a codebase is mostly tested or not, by helping to not forget to test some cases or parts of the code. Nevertheless, you should not rely only on coverage when writing tests. For instance, you can trigger a method without testing the result; the coverage will be good, but maybe the method result is wrong. So keep in mind that human eyes are still needed to ensure a well-tested codebase.
🤝 Don’t hesitate to test other developers’ code
When you discover someone else’s code that is not tested, it can be a great opportunity for knowledge transfer. By testing it, you will learn how this part of the codebase works, and it will be easy for you to make changes in the future. It is also an opportunity to confidently refactor old code and possibly find bugs.
To Go Further
These are some tips and guidelines I wanted to share. I intentionally omitted some topics that are also very interesting, for instance, how to integrate tests in the continuous integration and deployment process (CI/CD). You can find a lot of great articles about this online; in this article, I only wanted to encourage you to enjoy writing tests!
At Shippeo, we are trying to improve our tests every day by increasing our coverage and by making tests mandatory in all our pull requests! 💪
Thanks for reading. Now, if you want to go further and see technical examples, you can go to the second article: https://medium.com/shippeo-tech-blog/angular-testing-mastery-the-best-practices-to-skyrocket-your-skills-examples-0a43220b949d
