Following the first post on this topic - which introduced some testing tools for the Apache Syncope Enduser UI - this post will explain how test-driven development works
The first post on this topic introduced few testing tools (PhantomJS, NodeJS and Protractor) to test front-end features of the Apache Syncope Enduser UI.
This post will explain how Enduser test development works, how to properly configure Protractor framework and how to edit, write and run tests.
Since the Enduser UI is highly customizable, the tests need to be easily adaptive and editable. Moreover, the best practice to speed up the test development process consists in developing tests without redeploying.
Once set up the build environment for Apache Syncope, the basic procedure to get the Enduser UI up and running is as follows:
$ mvn -P skipTests,all
$ cd fit/enduser-reference
$ mvn -P debug
The test development environment is now located under
fit/enduser-reference/target/enduser-test
Here we can find a Nodejs folder, a directory containing all test files, and a Protractor configuration file.
Since the heart of end-to-end testing is finding DOM elements and interacting with them through Protractor locators, developing tests with JRebel support can be very helpful: JRebel instantly updates code and applies changes in Syncope, under development without restarting the application. Please be warned that JRebel needs to be installed and configured before usage.
Protractor relies on the 'element' function to locate HTML elements on the webpage. It returns an ElementFinder object, which can be used to interact with the element (in the example we used sendeys to type into <input>). 'element' takes a Locator, which describes how to find the component: by model, by id or by binding.
The test file's structure includes two tags: describe and it (syntax is borrowed from the Jasmine framework): describe describes a suit of tests and it is an individual test specification.
Before running tests let's give a look at protractor-conf.js.
The first line to edit is the one that sets the browser choice: here we replace phantomjs with a visual browser as Chrome because PhantomJS hides the navigation flow. Through a visual browser we can see how the user interaction simulation works, and consequently add or verify Protractor locators. Protractor supports the two latest major versions of Chrome, Firefox, Safari, and IE.
The second configuration step is about editing specs and exclude: specs contains every single test file we want to run and exclude contains those test we want to ignore. In our configuration file, abstract.js is excluded as it only contains utility functions.
As an example, if we are developing a new test called exampleTest.js we can tell Protractor to run this single test through the specs section as
specs: ['tests/exampleTest.js']
Maintaining clean and simple Protractor configuration is very important for the following considerations:
We can run Protractor with the following command:
$ nodejs/node/node nodejs/bin/protractor protractor-conf.js
Now, to edit and run again a test, there is a trick that save us to redeploy Apache Syncope Enduser: just manuallyt copy the test file from
fit/enduser-reference/src/test/resources/org/apache/syncope/client/nduuser/protractor/tests/
to
fit/enduser-reference/target/enduser-test/test/
In conclusion, the following video shows what briefly explained: how to test AngularJS directive ng-repeat with Protractor, how to edit Protractor configuration, how to edit a test while Syncope is up and running (with the previous trick) and how to run Apache Syncope Enduser tests, through the following steps: