AngularJS Tutorial: Introduction to End-to-End Testing of AngularJS Applications using Jasmine and Protractor

Introduction to software testing
In the previous installment of this series we discussed how to create a simple Hello World application using AngularJS. In this tutorial you will start learning how to streamline the development process and would tools Angular offers to the developers.
When project is under active development, new features are often added to it and some previously created features are modified. It is possible that some application functionality is broken in the process. To prevent this from happening, it is a good idea to check how all the functionality works after modifications but that could be difficult because one should remember all the cases for all the features added since the beginning. Also, it’s tedious to manually place your application into various conditions and see if it works, so one can rely on automation, that is one can record all the tests in a format that computers can understand and delegate the menial task of testing to a computer.
Checking if previously added features work after modifying the code is called regression testing and it allows to streamline the development process as the bugs can be spotted and squashed immediately after making changes. In addition, testing can be used in the process of development. For instance, if one is tasked to write a function that formats a date or converts currencies, it is not necessary that the whole application be deployed and test data be added via application Graphical User Interface. One can create a test to run a specific function and check the results returned by it in various conditions. Such test are called unit tests as they test the smallest possible part of code and using tests for development purposes can be used for Test-Driven Development (TDD) and Behavior-Driven Development (BDD).
Furthermore, application can consist of various parts such as authentication subsystem, database access part, subsystems that access external systems etc. and we need to check how several parts work together. In this case we deal with Integration Testing with checks if small number of application parts work well together. If we check the entire application we talk about System or End-to-End (e2e) testing.
Our application is very simple, the are not many parts to it, so we can use e2e tests to check that it works as intended. Namely, we can check that the default value of our greeting is produced when the application starts and that it changes as desired if some text is added to the input field. To accomplish this task we’ll rely on special tools, namely on Jasmine framework, a JavaScript framework that allows to specify tests in a language that computer can understand and Protractor, a testing tool created by the AngularJS team, which allows one to check the data produced by our application in a browser, change values in input fields and obtain the output results to check its correctness by the test framework.

Getting to know Jasmine


Jasmine is defined as a BDD framework on its site and is widely used to test JavaScript code. First, we have to install Jasmine. This is accomplished using the following command.
npm install jasmine-node -g
Now, we’ll place our End-to-End test inside a special e2e subfolder in the main folder of our project. A Jasmine test consists of so-called test suits - a number of related test with verbal description, e.g. ‘fun with numbers’. Each test with a description is called a specification and a suit contains several specifications or specs. The code for simple tests is shown below.


To create a suit one uses a describe() function which takes a string description of a suite and another function as its parameters. Specs are created using it() function with same argument types.
Each test contains one or more expectation which are specified using expect() function and matchers toEqual() an toBe() functions in our case which checks that the actual result is the same as desired.
To run the tests one should execute the following.
jasmine-node e2e/.
If the expected result are altered, Jasmine reports errors.
To prevent VS Code from reporting errors in our specs, one should modify ESLint settings in the .eslintrc.js as follows.


We added the jasmine plugin and specified the "env" value.
In addition. One can add Jasmine-specific ESLint rules by running the command below.
npm install eslint-plugin-jasmine --save-dev

Protractor for end-to-end testing
Protractor is a Node.js End-to-End testing framework which relies on Selenium, a testing framework written in Java. The latter means that one should install JDK before trying to install Protractor. To install Protractor one should run the following command.
npm install protractor -g
After that, it is necessary to update webdriver manager.
webdriver-manager update
Now we need to start a server.
webdriver-manager start
Before running tests we should configure Protractor; a sample configuration file protractor.conf.js is shown below.

Here we specified that our test framework is jasmine, obtained the Selenium server address from the command window where we started the server and specified the location of our test files.
Now, it’s time to add a test.


First, we define a variable that we’ll pass to the name input field. Second, we define a handle to an input element with model ng-model; we’ll use the handle to set the value into the input field. A new feature here is the beforeEach() function that is used to connect to our application; this function is called before each spec. Finally, we have three tests.
The first one checks the title of the window. The second reads the value from the input field and checks that it equals to the default value. The last one clearcs the value of the input field using clear() method, after that, then() method is called, which waits until the value is cleared and then sets the new value to the input field and checks that the correct greeting is produced.
To start the test it is necessary to start our AngularJS application and to type the following in the CLI.
protractor protractor.conf.js

Summary
In this tutorial we started the discussion about how to test AngularJS applications using Jasmine and Protractor. As can be seen, e2e speeds up testing in comparison with manual testing. On the other hand, things can become too slow for a more complex application. In the next tutorial we’ll learn how to split the application into more manageable and testable parts, best practices of accomplishing this task and other methods of application testing mentioned in this tutorial.
Resources

Comments

Post a Comment

Popular posts from this blog

Bootstrap 3 Forms Tutorial

Image
Forms are essential for web applications, one can see them while logging in an application, editing a profile or registering for an account. Bootstrap greatly simplifies form styling by providing special style classes and providing automatic styling of form controls. To learn how to style forms and form controls we’ll discuss a registration form shown below. The code for this form as well as live demo could be seen on Bootsnipp. First things first, let’s review a basic form template. A form is placed in a .container for proper formatting. Then, in line 3 an HTML form tag is seen with a class .form-horizontal and a role form. The former is used to produce a form with labels, such as “Password” in the above image, that are on the same line as inputs, the latter is to describe meaning of the element, for example, an anchor tag can be styled to look like a button, in this case a role attribute tells that the anchor is used for playing a button’s role. After that, in line t...
Read more

Spring Tutorial: Creating a Hello World REST API Using Spring Framework and Spring Boot

Image
Spring Framework was created as a result of disappointment of Java community with earlier versions of Enterprise Java. Since then it has grown into huge ecosystem that allows one to solve every problem in building a Web-based Java application and more. Spring is often criticized because it used to rely on XML for configuration purposes. As a response to that the Spring Boot framework was released, which relies on convention over configuration principle and can do without XML at all. In this tutorial series we’ll go over how to create an application using Spring Framework and Spring Boot. While Spring Boot allows one to create an application faster, Spring is widely used today in enterprise environment and even by startups, so knowing Spring is definitely a marketable skill, and also learning it can provide one with the insight how Spring Boot works. The code for a simple Spring Framework application can be found here and the Spring Boot version here . Creating Spring W...
Read more

Getting started with Dropwizard: First steps

Image
Here is a link to my Getting Started with Dropwizard course on Udemy. Only $10! Dropwizard is a bunch of superb frameworks glued together to provide a fast way of building web applications including REST APIs. We'll talk about great frameworks which are parts of Dropwizard as we go over our examples. The full code for the examples can be obtained here . The simplest way to create a Dropwizard project is to use the Maven archetype called java-simple which is a part of Dropwizard. This can be accomplished either via the command line or using your favorite IDE. Let's stick to the former approach. The command below is formatted for clarity but it should be pasted as a single line to the terminal. After the project was created it can be modified using an editor or opened in an IDE. All the three IntelliJ, Eclipse and Netbeans have Maven support. An important parameter to note in the pom.xml file of the newly created project is dropwizard.version , which at ...
Read more