In this chapter, we'll dive a bit deeper into the AngularJS Framework and understand some very important points about testing on SPA.
As we mentioned in the previous chapters, SPA transfers MVC responsibility to JavaScript that runs on the client side (the browser). We must write the tests in the same way as we do when dealing with MVC on server-side languages.
The AngularJS framework is designed to be highly testable and because of that we have some tools that facilitate this process. Today, writing test cases is part of the web development process of every programmer, whether frontend or backend. Test-driven development is part of all agile methodologies and you should remember this. The sooner you start writing tests, the better it will be for you.
In the upcoming sections, we will see some basic concepts of tests, such as unit testing and integration testing (known as e2e testing) among other things. These are as follows:
- Testing concepts
- Introducing Jasmine
- Configuring Karma (unit testing)
- Running a Karma test
- Configuring Protractor (e2e testing)
- Running Protractor testing
Let's focus on the two types of tests that will be covered in our sample application: unit testing and e2e testing. A very interesting fact to note here is that previously most of the frontend developers did not worry about tests. Testing was exclusively done by the testing team or quality assurance department. However, the reality has changed now. It is hard to find test teams with even a basic knowledge of JavaScript to perform the necessary tests on SPAs. When I mention test, it means automated testing. The reason why we consider an automated test is that when your application grows from medium to large scale, it will become very complicated to test all interfaces with new implementations.
Currently, frontend developers are more concerned with how to write JavaScript, and how to apply concepts of Test-Driven Development (TDD) and Behavior-Driven Development (BDD).
The following diagram illustrates the workflow of TDD:
The concept of TDD is directly related to the techniques of extreme programming, where the developer creates small test cases for a given functionality, then implements the code for it to respond, and pass the test. This kind of pattern is directly related to the unit tests; of course, there are many other things about unit testing and TDD, but these terms are fine to understand the importance. Also, unit tests help the developer to maintain focus on what is really important.
On the other side, we have BDD (widely used in agile software development), which allows you to integrate the entire team with developers and business people. This does not use technical language to describe certain expected behaviors of the system interface.
The main idea is to write small blocks of tests, and then write the necessary code to pass the tests. This procedure is of utmost importance in an agile development because the code must be readable to be maintained and easy to scale.
Unit tests are very useful to test small blocks of code, but when we need to perform tests on a set of all of these small blocks, then we need to think of the behavior we expect from the interface. For this, we use e2e testing. So, the main purpose of writing code with tests in mind is to produce code that is easily maintainable, understandable for humans, debuggable, and bug free.
Although this is not an everyday practice for frontend developers, TDD is very useful when it comes to software development in general. It is extremely suitable when using any MVC or MVVM pattern.
So, let's see how we can implement tests on our SPA.
The AngularJS framework was built and planned with testing in mind, so we have a lot of options to choose from with regards to frameworks. The forthcoming examples will talk about the Karma and Protractor test runner.