Testing Angular Apps Using Jasmine and Protractor Frameworks

Testing is one of the most important aspects in the modern application development process. We even have dedicated software development methodologies, primarily driven by a test-first approach.

Along with the testing utilities provided by Angular, there are a few recommended frameworks, such as Jasmine, Karma, and Protractor, using which it's easy to create, maintain, and write test scripts. Test scripts written in Jasmine and Protractor save time and effort, and above all yield good returns by finding defects much earlier in the development process.

In this chapter, you will learn all about testing Angular applications using Jasmine and Protractor. In this chapter, we will discuss the following:

• Learn about important concepts in testing
• Understanding Angular CLI for unit-testing specific environments
• Introducing...

Concepts in testing

Before we start testing our Angular applications, it's important that we quickly brush up on and understand some of the most commonly used terms in testing:

• Unit test: One can view a unit test as the smallest testable part of an application.
• Test case: This is a set of test inputs, execution conditions, and expected results for achieving an objective. In the Jasmine framework, these are referred to as specs.
• TestBed: TestBed is a method of testing a particular module in an isolated fashion by passing all the required data and objects.
• Test suite: This is a collection of test cases that are intended to be used to test a module end to end.
• System test: The tests conducted on a complete and integrated system to evaluate the system functionality.
• E2E test: It is a testing method, which determines whether the behavior of the application is as required. We...

Understanding and setting up Angular CLI for testing

So far, we have used Angular CLI for setting up our project, creating new components, services, and more. We will now discuss how to use the command-line tool to set and execute test suites to test our Angular applications.

First things first, a quick recap on how to create a project quickly using Angular CLI:

npm install -g angular-cli

Using the preceding code snippet, we installed the Angular command-line tool. Now, let's create a new directory named test-app and navigate inside the project directory:

ng new test-app
cd test-app

It's time to quickly create a new component called test-app:

ng g component ./test-app

Now, we will see the output as follows:

We should see the new directory and the corresponding files created in the directory. The command-line tool has created four files related to the component, including...

Introduction to Jasmine framework

Jasmine is a behavior-driven development framework for testing JavaScript code. This is how the official site explains Jasmine:

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

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

describe("Sample Test Suite", function() {
 it("This is a spec that defines test", function() {
   expect statement // asserts the logic etc
 });
});

Let's analyze the preceding code snippet to understand the test suite syntax. The following steps have been followed:

1. Every Jasmine test suite will have a describe statement, where we can give a name.
2. Inside the test suite, we create smaller tests cases using...

Introduction to Protractor framework

In the preceding sections, you learned about unit testing using Jasmine. In this section, you will learn about using the Protractor framework for the end-to-end testing of Angular applications.

This is how the official site explains Protractor:

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Protractor framework is packaged in the Angular CLI tool, and we can find the e2e folder created in our main project directory:

You will learn to write end-to-end tests for your Angular applications and keep them under the e2e folder.

Remember that it's a best practice to create separate E2E scripts for each functionality or page.

...

Summary

Testing is one of the most crucial and important aspects of application development. In this chapter, you learned how to use Angular CLI, Jasmine, and Protractor framework. Automation testing using Jasmine and Protractor can help you save time and effort.

You learned about writing unit test scripts for Angular components and services and also how to write E2E test cases for workflow automation testing. You explored in detail Jasmine framework and the Protractor framework methods and variables built-in to functions.

We delved into targeting specific elements as well as retrieving collections of elements together to read, update, and edit properties and values. Go ahead and automate your applications using these great testing frameworks.

In the next chapter, you will learn about design patterns in Angular. Typescript is an object-oriented programming language and, as such...