Part 4: AEM with Angular 2 - Unit Testing Angular Components & Services

In this post, we’ll learn about Unit testing Angular code base and collecting code coverage matrix.

Unit testing is very important from a code quality perspective and it becomes even more important when the project is large and multiple teams are working on the same project. In large projects, dividing large systems into small and loosely coupled modules is a best practice but then, it becomes very critical to test each of these modules independently without explicit depending on each other. This is very critical from a unit testing perspective.

In AEM, we have reusable components that can be used to create a variety of content and it becomes very important to test each component. Typically, an AEM component has:

1. User Interface (JSP, Sightly, etc.) and JavaScript (Angular.js, React.js, etc.)
2. Some backing object/Sling Model
3. And/or WCM Use class (Java or JavaScript-based)

In a well-designed and architected application, each of these 3 pieces should be independently unit testable. In this article, we’ll be focusing on testing User Interface i.e. #1

Unit testing UI is simple as compared to developing AEM components using Angular 2. It is simple because, for testing we are not doing anything different just because we are using AEM, testing will be done in the usual way as we would do when we are not using AEM.

NOTE: Since we have our custom build script for building projects, we won’t be using Angular CLI and standard project structure for testing.

I am going to use same project from my github repository and will add everything that we need for unit testing UI (Angular code).

Before we proceed, let’s refresh a few things:
Code for this project is here: https://github.com/suryakand/aem-angular2
In previous articles in this series we learned that we have two separate builds:

“gulp build” – builds project so that everything can be testing as if it is regular angular application. This build generates artifacts on build folder and you can run following command to run the application “npm run start”
“gulp build:aem” – build projects in such a way that everything is packaged as crx package that can be deployed into AEM

Testing Frameworks
For UI unit testing we’ll be using:
Jasmine - Jasmine is a JavaScript testing framework that supports a software development practice called Behavior Driven Development, or BDD for short
Karma - Manually running Jasmine tests by refreshing a browser tab repeatedly in different browsers every-time we edit some code can become tiresome. Karma is a tool that lets us spawn browsers and run jasmine tests inside of them all from the command line. The results of the tests are also displayed on the command line. Karma can also watch your development files for changes and re-run the tests automatically. Karma lets us run jasmine tests as part of a development toolchain which requires tests to be runnable and results in inspectable via the command line.
Istanbul - a JS code coverage tool written in JS.

Project Configuration
To write and execute we need to add/update some configuration files. In this section, we’ll see go over these changes.

1. Update package.json – You can see changes here https://github.com/suryakand/aem-angular2/commit/4dc287c6b661fec227263b136df2d853f5d387be

include UI unit testing and test runner dependencies in package.json file and “run npm” install again


Add a task to run a unit test


2. Add karma runner configuration (karma.conf.js) – Complete configuration file is here https://github.com/suryakand/aem-angular2/commit/316bdc3e2426f74c2d42a6d8339753f3cda4d485#diff-a068ef752f58b4eda47e5254ca70802d

This file defines where to look for JS files that need to be considered for testing, which testing framework to use for testing, what reporters (code coverage framework) to use and what port Karma should run etc.

Write Unit Test Cases
I have added a new folder called “ui.tests“ where we’ll write all test cases for our Angular code. The new folder structure looks like this

From Angular perspective, there are 2 main entities for which we need to write test cases:

1. Angular Components
2. Angular Services

Let’s write a test case for the Angular component. For this article, we’ll write a very basic test case for “about.component”. You can refer to the full example of “about.component” test case here https://github.com/suryakand/aem-angular2/blob/master/ui.apps/src/main/content/jcr_root/apps/ngaem/components/ui.tests/components/about.component.spec.ts

Here are the basic steps involved in writing a test case:
Import mock test dependencies, components, and services needed for testing

Initialize mock Angular environment/TestBed (as if we do in with real application in browser) by loading/initializing angular components and services. This mock angular environment initialized for testing is referred to as TestBed. To simplify this I have created a utility class “UtilTestBed”. You can use this class initialize mock TestBed in one line, see line# 19 below

Write logic/asset statements to test components. In this step, we create an instance of a component that we want to test and verify that it has been rendered properly. Verification can be done in various ways e.g. verify that expected HTML element is rendered (line# 30 below), text/value of the rendered element (line# 37 below)

The same method can be followed for writing test cases for angular services too. Once you have writing test cases, you can execute them using the following command:
“npm run test”

You should see the following output after execution is completed:

Verifying Code Coverage Report
Once all test cases are finished, navigate to the “/aem-angular2/ui.apps/target/reports/coverage/report-html” folder and open index.html to see code coverage report. The report would look like this:


I hope this article will help you to implement unit tests for your front end code and will help you to maintain your code quality.

Source: http://suryakand-shinde.blogspot.com/2018/01/part-4-aem-with-angular-2-unit-testing.html