Recently I am working on a single page application (SPA) using Javascript/html5/CSS with Restful backend.
The front-end is implemented in JQuery, Kendo UI and html5, The backend is implemented by .Net framework which integrates with Sterling Commerce through its SOAP web service based APIs.
The SPA is not only great architecture to leverage the power of javascript/html5 but also allow truly independent UI development. Test-driven development and continuous integration are very important software development methodologies. This blog talks about how to use continuous integration server to run automatic build and test for this UI component.
The source code is hosted in Microsoft Visual Studio's Team Foundation Server (TFS). The CI server we used is Hudson (http://hudson-ci.org). The build scripts are either Ant or command line batch script. And the Teamprise provides Ant tasks (http://labs.teamprise.com/build/ant.html) which provide interface to TFS such as check out, check in source codes capabilities. Those Ant tasks essentially is a wrapper on the tf.exe command-line client. Figure 1 illustrates the work flow in our automatic build and test environment.
Figure 1. Hudson Build Server for a SPA project
Each build consists of several jobs which can be configured in Hudson. For details about how to create jobs in Hudson, please see this link: http://www.eclipse.org/hudson/the-hudson-book/book-hudson.chunked/ch06.html#fig-using-new-project.
"check-out and build dev" is one job invokes two Ant tasks: check-out which will check out various UI components from TFS and build-dev which will deploy the components to dev site.
"Qunit web test runner" is a headless Qunit tester (http://qunitjs.com) using chutzpah javascript test runner (http://chutzpah.codeplex.com). chutzpah uses Phantomjs headless browser (http://phantomjs.org) to run the javascript unit tests. Qunit tester run two kinds of tests: unit tests on the core JS classes such as TabManager, TemplateManager, URLManager and etc., and functional tests are for testing user interactions with the interface such as log in, click on address validation button, open new tabs and etc. I will describe it in the next blog.
"soapUI test runner" is command-line client to soapUI so developers can run soapUI-based test scripts on the console. Please see this link for details: http://www.soapui.org/Test-Automation/functional-tests.html. For example:
{pathto}\testrunner.bat -r -a -F "I:\projects\result" -I "I:\projects\compass-soapui-project.xml"
Both qunit test runner and soapUI test runner can generate JUNIT style test report in XML format which Hudson CI server can pass so the test result becomes part of the build.
