Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Bob at Genuitec
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

Testing is one of the most important aspects of the modern application development process. Today, high quality, robust applications are the norm; nobody appreciates a buggy application. This article will walk you through testing your Angular application using capabilities that are already part of your Angular project.

Creating a New Angular Project

We’re going to be using Angular IDE through this tutorial, though you can use Webclipse or MyEclipse too, following exactly the same steps. Before beginning, do ensure you are in the Angular Perspective (Window > Perspective > Open Perspective > Other > Angular) for an optimum workspace layout and development experience.

In the new Angular project wizard (File > New > Angular Project), type Angular1 as the project name – you may change the Node.js, npm and Angular CLI versions if desired.

angular-app-testing-ss-2

Finally, click Finish to complete the creation of a new Angular project. In the Terminal+ view, you can see several commands being executed by Angular CLI. After the installation of all the modules, we are now ready to continue with development.

Did you know that CodeLive makes it really easy to explore Angular applications? Hover over a component on the page to view the component name, and click the component to view the dashboard list, filtered for the selected component. Easily jump to the corresponding TypeScript, HTML, or CSS file.

Watch this video for a quick demo.

angular-app-testing-video

Testing Modules in Your Angular Project

Jasmine

Jasmine is a JavaScript testing framework that supports a software development practice called Behavior Driven Development (BDD) – a specific flavor of Test Driven Development (TDD). It does not require a DOM, and has a clean, obvious syntax so that you can easily write tests.

The general syntax of a Jasmine test suite is given as follows:

Let’s understand the code snippet above:

  • describe defines a test suite, it takes a string and function as parameters.
  • it, like describe, also takes a string and a function, and defines a test/spec.
  • expect takes a value, called the actual, which is compared via one of several matchers (toBe in this case) to an expected value.
This introduction is a good place to get started with Jasmine.

Karma

Karma, on the other hand, is not a framework to write tests, but it is a test runner. Karma gives us the ability to run automated tests in several different browsers, and makes it easy to integrate with a continuous integration server. It requires additional frameworks, like Jasmine.

Note: Your Angular project already contains both Karma and Jasmine packages by default, no additional installations are necessary.

Testing an Angular Component

We’re going to modify the generated root component so we can create a simple test.

Modifying our Angular Root Component

Replace the source of src/app/app.component.ts with:

Replace the source of app.component.html with:

The app.component.spec.ts file is responsible for testing, we’re going to replace its source with:

Let’s go over the above code snippet in detail:

  1. We have imported the required modules namely TestBed and async from angular/core/testing.
  2. In the first test script, we wrote a simple expect statement for the component, tobeTruthy.
  3. In the second test script, we created an instance of the component via TestBed.createComponent:
    • We created an instance of the root component via TestBed.createComponent.
    •  Using debugElement, we created the instance of the created component, app.
    •  Using app, we are able to get the title of the component, and use the toEqual assertion to check whether the title is equal to “angular 4 testing”.
  4. In the last test script we use debugElement#nativeElement method and target <h1>. Here we are checking if <h1> contains, “Welcome to angular 4 testing”.
  5. The difference between the second and third test scripts is that in third script we are waiting for changes to be detected by using the detectChanges method.

Testing an Angular Service

We’re going to go ahead now and test an Angular Service as well. To create a new Angular Service in Angular IDE, we use File > New > Service. Type app into the Element Name field.

angular-app-testing-ss-5

The app.service.spec.ts file is responsible for testing, we’re going to replace its source with:

The assertion in the code above is true if service, an instance of AppService (obtained via Dependency Injection), is not null.

Running the Tests

Before we run the tests, you might want to run the project itself, to see the output we’re expecting, in the browser.
There is a server view in Angular IDE, as shown in the image below (Window > Show View > Servers). Right click on your project (here Angular1) and select Start Server. Angular IDE serves the application on localhost port 4200 by default. So open http://localhost:4200 in your browser to see the running app.

a4testing_start_server

You should see a screen like the one below at http://localhost:4200.

a4testing_browser

In the Terminal+ view (Window > Show View > Terminal+) type the following command to run the tests:

ng test

testing angular apps

This command opens a browser window with the test results – as you can see in the above screenshot, all specified tests have been executed and have passed.
Note: Press Ctrl + C in the Terminal+ view to end the test run, else it will reopen the test result browser each time you close it.

Creating an Advanced Test

Our tests so far were rather basic, let’s do something a bit more advanced, by replacing our service code and service test.

Replace the code in src/app/app.service.ts with:

We’ve defined the getTopicCount method to return the number of elements in the Topics array.

Replace the testing code in app.service.spec.ts with:

Like the last service test example, we obtain the service instance using dependency injection, then call the getTopicCount method to check whether the count returned is 3. The beforeEach function is called before each test in the suite, usually used to set up tests; in this case it ensures we can get the service instance we are interested in.

Again, in Terminal+, execute ng test to execute the tests.

a4testing_test_failure

After running the test, you will see that our latest test has failed, as our test expected a count of 3, while the actual count was 4.

In Closing

If you’re interested in learning more about testing, you may also want to take a look at Mocha, which is an alternative to Jasmine. Libraries like Chai and Sinon, may also come in handy, and can be used within your tests in either framework.

While we used Angular IDE in our tutorial today, if you already have an Eclipse install you are happy with, you can get the same functionality by installing Webclipse. Finally, if you’re looking for a full-stack experience with Java EE at the back end, try MyEclipse.

Whatever framework and tool you use, don’t forget to test, and develop tests alongside regular functionality – it’s a strategy that will pay huge dividends in the long run.

Related Posts

Angular 5 Features Front-end developers, rejoice - after a short delay, the Angular 5 release is scheduled for October 23rd!Update (November 1st): It's finally here! After ten release candidates, Angular version 5.0.0, "pentagonal-donut", has been released.Update (October 31st): Well, we're still waiting for Angular version 5, and we're now at 5.0.0 RC 9 - but, I'm s...
Set Up and Use a Fake REST API with Angular Often, when developing Angular applications, you do not have the backing REST APIs ready for testing. To avoid having to digress into developing web services, or being blocked, waiting for your back end team to provide them, you can use JSON server to provide a "fake" API. This article will show you how to use Angular IDE and JSON Server to set up ...
Using Swagger to Connect a Backend to an Angular F... IntroductionLet’s say you have an advanced backend system, for which you wish to develop a modern Angular frontend, or, perhaps it’s not your backend, but something public like Facebook, and you want to develop a site using some of its exposed APIs. Of course, you want to do this with minimal effort ... how do you pull this off? Enter Swagger!This ...
TypeScript 2.4 — Even More Reasons to Love i... Perhaps you are already enjoying all the amazing features TypeScript (TS) adds to JavaScript: you might already be in love with its interfaces, abstract classes, and algebraic data types, among many others. TS 2.4 brings more good news. This version of TS comes loaded with improvements, ranging from dynamic import expressions to weak type detection...

Posted on Oct 25th 2017