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

Popular posts from this blog

AngularJS Tutorial: Creating AngularJS Hello World application using Plunker

Bootstrap 3 Forms Tutorial

AngularJS Tutorial: AngularJS Controller As Syntax