Comparison of two approaches to Unit testing Angular apps
DOI:
https://doi.org/10.33216/1998-7927-2024-285-5-5-9Keywords:
Unit testing, Angular application, Jasmine, Karma, Jest, Unit tests, --test coverage, Angular CLI, ChromeHeadless, reactivity, synchronous and asynchronous codeAbstract
In the modern world, reactive systems are gaining more and more popularity, and reactivity is based on working with asynchronous data streams. Testing reactive systems is a separate task, in which there are a number of open questions, for example, the extinction of the effectiveness of tests using one or another approach to testing.
For testing Angular applications, two approaches were chosen in the work: 1) using the Jasmine + Karma connection, which is installed by default when creating the application; 2) using Jest.
The article tests an Angular application that has 7 tests, 3 of which are tests of synchronous code blocks and 4 for asynchronous blocks. The tools offered by Angular out of the box and the Jest framework were used during testing.
To extinction the effectiveness of Unit tests, as a rule, four criteria are used: protection against bugs; resilience to refactoring; fast feedback; maintainability. By comparing different approaches to testing, you can determine how a particular approach affects a specific criterion of Unit-test efficiency, increasing it or, conversely, decreasing it. As is known, today there is no automatic method of measuring efficiency with obtaining values for each criterion, and therefore each test must be evaluated separately. To obtain a value for the criterion "feedback speed" we will use the test execution time, including determining the percentage of code coverage by tests using the coverage command. This criterion shows that the faster the test is executed at the development stage, the less time is spent on eliminating the errors found, thereby significantly increasing the efficiency of Unit-tests.
As a result of comparing the work of two testing frameworks, we can conclude that when using Jest, tests are executed on average 60% faster due to the fact that the system tracks file changes and does not perform unnecessary actions. When testing asynchronous code, the same trend (60% increase in testing speed) persists, so Jest is great for testing Angular projects that contain a lot of asynchronous code.
Since the effectiveness of unit tests depends on fast feedback, by using Jest, we significantly increase the effectiveness of unit testing and the entire project as a whole.
References
1) Офіційна документація. https://v17.angular.io/guide/testing
2) Vladimir Khorikov “Unit Testing Principles, Practices, and Patterns” / Manning, 2020, 304 p. ISBN: 978-1617296277.
3) Mauricio Aniche ”Effective Software Testing: A developer's guide” / Manning. 2022, 328 p. ISBN: 978-1633439931.
4) Vladimir Khorikov “The Art of Unit Testing, Third Edition: with examples in JavaScript 3rd ed. Edition” / Manning. 2024. 288p. ISBN: 978-1617297489
5) Lamis Chebbi "Reactive Patterns with RxJS for Angular", Published by Packt Publishing Ltd, 2022.
6) Sergi Mansilla "Reactive Programming with RxJS". The Pragmatic Programmers, 2015.
7) Adam Freeman, «Pro Angular. Build Powerful and Dynamic Web Apps». Fifth Edition. Publisher: Apress Berkeley, CA. 2022, 880 pages. DOI: https://doi.org/10.1007/978-1-4842-8176-5.
8) Majid Hajian «Progressive Web Apps with Angular» // Publisher: Apress Berkeley, CA. 2019, 380 pages. DOI: https://doi.org/10.1007/978-1-4842-4448-7.
9) Victor Hugo Garcia «Getting Started with Angular. Create and Deploy Angular Applications» // Publisher: Apress Berkeley, CA. 2023, 373 pages. DOI: https://doi.org/10.1007/978-1-4842-9206-8.
