Front-end testing is the testing of the functionality and usability of an application, including its graphical user interface (GUI). A few months ago, while investigating front-end testing, I realized that not many people do Angular testing. Because Angular is a TypeScript-based open-source front-end web application platform, you should be able to test it.

What is Angular testing?

Angular testing has packages that developers can use for testing. When developers run the tests, then the testing environment is running, not development. After investigating Angular testing, we not only realized that it’s a big topic but also that newcomers to it need time to learn the ‘testing language’.

Benefits of testing

Improving the design and refactoring the code

When a developer writes the tests for his or her code, they may often wonder, “Why do I write them in this way?”. Often, it can be difficult to objectively view the code we’ve written. Sometimes we notice parts of our code that are the same and realize that we need to write reusable code. We can easily refactor our code and run tests to see whether it has any bugs. Also, we can ‘play’ with the refactoring of tests.

Improving the design and refactoring the code

New features without breaking the existing code

If we develop new features, such as the expansion of current functionality, we can easily check whether the existing code has been broken. This can include running tests to see whether any bugs have been made.

New features without breaking the existing code

Tests are good documentation

The best way to clarify the purpose of methods or classes is to run tests that identify the cases that have been covered. Of course, tests are not conclusive reference documentation, but they can be useful for better understanding codes.

Tests are good documentation

Jasmine and Karma

Unit testing tests small isolated pieces of code. Jasmine and Karma are tools that developers can use for unit testing, and they’re recommended on the official Angular webpage.

angular testing Jasmine and Karma

Jasmine is a testing framework that attempts to describe tests in a way that people can readily understand, even if they’re not developers. Karma, on the other hand, is a test runner. When you run a test with Karma, it handles the process of opening your web browser (it can be easily configured for your specific browser), runs the tests, and returns their results. It’s not necessary to know the internal processes of Karma because Angular CLI handles the configuration of Karma for you. It’s easy and it works.

What can we test?

We can test the components, services, and routing in our Angular applications. For us, the most interesting part of unit testing is testing the DOM (Document Object Model). We can simulate user interactions with an application by adding the events in our unit tests.

The Protractor is a tool that enables end-to-end (E2E) testing. E2E testing is integration testing, and it’s the highest level of testing. In this kind of testing, you can involve a few of your components and see whether they’re working together as they should. However, writing E2E tests is fairly difficult. The tests can be easily broken (they don’t pass) and they can’t easily demonstrate the ‘when something goes wrong’ scenario.

ekobit protractor angular

You can also enable code coverage reports. These reports reveal the parts of a code that may not have been covered by unit tests. In other words, if some code is not tested, we can easily see that code is not entirely covered with tests just by running the code coverage reports.

When performance is the main issue in your work team, a key question concerns the time when it will happen when you write your command line ng build –prod command, you can see the bundle sizes, which the browser will get from your servers. We can also analyze our Angular bundles, and maybe detect the large third-party packages that we forgot to remove (use webpack-bundle-analyzer).

Should you do more Angular testing?

Clearly, you can test lots of things in Angular. But you shouldn’t just test the good scenarios. You should also test the bad scenarios, which can occur at any time. All developers that use Angular should, in time, think about testing and how to improve their codes – especially the logic that’s inherent in their codes, which may not be apparent to others.

What's your reaction?