Test Strategyfor web development

Comparison of costs to fix defects at different stages

Static Analysis really useful?

• Static analysis, at best, might catch 5-10% of your software quality problems

• Used effectively, static analysis is cheaper than other techniques for catching the same bugs

Code Analysis Strategy

• Code Static Analysis tool review source code

• Static Analysis and Data Flow Analysis Tool review byte code

• Automate build and code review process

• Continuous Integration

Static Analysis tool

• Commercial product : Parasoft Jtest

Open source tool:

For Java• CheckStyle• PMD• FindBugs

For JavaScript• JavaScript Lint

What is FindBugs

• FindBugs uses the Apache BCEL library to analyze the classes in your application and detect potential bugs.

• FindBugs rules (or "detectors") use a variety of inspection techniques, from examining the structure of the class right through to studying the detailed dataflow through the class.

FindBugs in ActionFindBugs is an open source static analysis tool, developed at the

University of Maryland

Looks for bug patterns, inspired by real problems in real code

Held FindBugs fixit at Google May 13-14th, 2009• 300 engineers provided 8,000 reviews of 4,000 issues • 75+% were marked should fix or must fix

more than 1,500 of the issues have already been removed

How to use FindBugs

JavaScript Lint

• Based on the JavaScript engine for the Firefox Browser

• check JavaScript source code for common mistakes without actually running the script or opening the web page.

Front end AJAX(JQuery) Application

Front end work procedure

• Clients in web browser (JQuery Ajax) send Asynchronous Http requests to server side

• jQuery Ajax get callback response with Json format.

• The JavaScript code parse JSON and change the content of webpage.

“Distributed” Model-View-Controller

HTTP Request (GET or POST)

DHTML Reply (new page/script)

RequestHandlers

WorkspaceJSP

Templates

Server

Engines

JQueryController

DHTMLView

Browser

JSON (DOM)Model

JSON Reply (new model/data)

Testing Strategy

• Test Data Handler and Data Source

• Test JavaScript

• Automate UI Tests

Choose Testing Tools

Qunit JsunitGeneral JS Yes YesAjax Yes Hard to say Cross Platform Yes YesDeveloper No 10 more 1Who use Google, MS,Yahoo Yahoo Discuss Area Active Active Advance New A little oldCruise control Yes Yes

Qunit for JavaScript Testing

• Choose Qunit testing for JavaScript function. Use web browser to run Qunit testing

• The JavaScript function includes two parts: – general function just like creating URL, validate input

data format.

– Ajax call, get JSON from server and parse the JSON.

Proof of Concept for Qunit

• Focus on JavaScript function in one page check out project.

Problem: a lot of functions are private.

Resolution: refractor code. Use public return method to change private to public.

Proof of Concept for Qunit

Problem: In JavaScript source code, use JavaScript execute pattern. Once the Java script function loaded, it is already executed. In some cases, the results have been changed.

Resolution: refractor code. Comments off that execute parentheses in the function end. Let test function execute it.

Proof of Concept for Qunit

Problem: Ajax call is asynchronous. Hard to know when it is finished, we can get data.

Resolution: One method is to change the asynchronous call to synchronous.

The alternative method is still to keep the asynchronous call, use Qunit’s stop() start() pattern. Use asynchronous callback to start test method after asynchronous call ending.

We choose the second method.

Proof of Concept for Qunit

Problem: Ajax call is executed with variable number parameters which is changed with situation. Test method hardly get Callback function data parameter.

Resolution: If it is necessary to test, pull out tested Ajax call function, separate to different cases, and fix the parameter number.

AJAX function example function getBag(callback) { jQuery.ajax({

url: "ajax/saksbag.json", type: "POST", data: "bmForm=initialize_saks_bag_service", dataType: "json", timeout: 2700, success: function(response) {

callback(response); },

}); }

Qunit AJAX testtest('test getBag AJAX', function () { expect(1); stop(); getBag( function(response) {

equals(response["continueShoppingLink"], "http://dev5.saksdirect.com/Entry.jsp?ASSORTMENT%3C%3East_id=1408474399545537&bmUID=1249578208442");

start(); } )});

Web Browser Launch Qunit test cases

How to test Data Source

• For JSON test, one method is to unit test server side Java code who produce JSON

• Write JUnit test cases to test these server side java classes.

• The alternative method is to verify the JSON from client side.

• The JSON component is sent back by the call back function. With selenium, we can catch JSON component from intended web page and make sure the data accuracy. This also can prove the JSON transmission right

Use Selenium RC to do UI automatic testing

• Export the recorded test cases to Java code. With RC mode to run these test cases. So we can run these test cases in Cruise control.

• The web application group has already done part of work previously. We need to recover previous work and continue to do new work.

• Combined Selenium RC and HTMLUnit, we can implement some AJAX based UI tests and enhance the test speed. This is the conception of Selenium 2.0 which will be released recently.

Selenium 2.0 (WebDriver)

• Mult-browser testing including improved functionality for browsers not well-supported by Selenium-1.0.

• Handling multiple frames, multiple browser windows, popups, and alerts.

• Page navigation and Drag-and-drop. • HTMLUnit driver improve testing speed.• AJAX-based UI elements.

Example for Selenium catching bugs

• Test case: Sending a billing address, set this billing address as a shipping address.

• Billing address is successfully saved. • Test response JSON said shipping

address list is still null, billing address not be set as a shipping address, failed test.

In container testing

• Best way of resolving JUnit test difficult for BM application is to use in container testing framework to wrap Junit test case

• Running JUnit test cases in BM environment is a typical application of container integration unit testing in J2EE.

• JunitEE and Cactus are two popular tools for integration unit test

JunitEE

JunitEE TestRunner

Test Code Example: Get config DNA from BM API

protected void setUp() throws Exception {

super.setUp();

//JUnit need to set up a DNA configuration by reading a DNA file

//final DNAList dna = DNAList.readDNAFile("dna/config/custom/payment.dna");

//JUnitEE directly get DNA configuration from BM environment

final DNAList dna = BMContext.getConfig("payment.dna");

creditCardDropDown = new CreditCardDropDown(dna);

}

public void testShouldReturnCCD() {

java.util.List list = creditCardDropDown.loadDomainsListfor("CCD");

assertNotNull(list);

assertTrue(list.size() > 4);

DropDownElement dropDownElement = (DropDownElement) list.get(0);

assertEquals("Choose a Card", dropDownElement.getDisplay());

dropDownElement = (DropDownElement) list.get(1);

assertEquals("SAKS", dropDownElement.getValue());

…..

}

Automated Testing of Web Service with SoapUI

• Testing purpose is testing application code, not to direct to test Web service itself

• If the Web Service is not available, SoapUI can delivery a Mock web service to solve the unit testing dependency

SoapUI procedure

• Input WSDL• Generate request and response xml

template• Create a a Mock Web service based on

WSDL• If Junit test case call Mock Web Service, it

will return Mock response• XMLUnit can be used to verify response

XML

SoapUI mock web service

Continuous Integration

• Based on existed Cruise Control Server, continue to use it as continue integration Server.

• The current Cruise Control implements automatically build Projects.

Continuous Integration

• Apply JUnit and JUnitEE to test server side java code.

• Use QUnit to test JavaScript• Use HTMLUnit to verify JSON• Use selenium RC code to do automatic UI

testing• Implement automatic test function on the

cruise control.