Note that renderTo: ‘document.body’ would result in an error, use renderTo: document.body instead

You may have heard of writing test cases before diving into code which is well known as Test Driven Development. This methodology has been widely adapted in programming (Java thru JUnit, etc). Following Kent Beck’s Test Driven Development (TDD) we will follow this simple method:

1. Write the test first
2. Watch the test fail
3. Write the component
4. Watch the test pass

A. Test.AnotherWay. With the emerging trend in web development including javascript, I need a similar aproach which makes development consistent and debugging easier for the client/front-end. Since I’ve been doing mostly web mapping, I have adapted a testing methodology from OpenLayers which is practical but effective.

1. Read Test.AnotherWay Documentation

2. Download Test.AnotherWay-0.51.tar.gz

3. Let’s say my application is called myproject. Create a test folder under myproject.

4. Copy run-tests.html, list-tests.html into myproject/test. Don’t be surprised if you can’t find list-tests.html in Test.AnotherWay.

5. Writing the tests. To add a test, you should add it on list-tests.html. Test files should be named beginning with test_. For example, test_index.html

    function test_Map(t) {
        t.plan(3);
 
		//this should go to the Application\\'s Global Settings
    	var baselayer = CS.globals.baselayer;
 
		//this should go to the Application\\'s Global Settings
		var options = CS.globals.options;		
 
		map = new CS.Map("div-map", baselayer, options);	// default options was set
		t.eq(map.getMap().CLASS_NAME, "OpenLayers.Map", "map object created successful");
 
		layerPlaces = new CS.VectorLayer("Places Layer", options);
		t.eq(layerPlaces.getLayer().CLASS_NAME, "OpenLayers.Layer.Vector", "vector layer created successfully");
 
		map.addVectorLayer(layerPlaces);
 
		selectControl = layerPlaces.getSelectControl();
		t.eq(selectControl.CLASS_NAME, "OpenLayers.Control.SelectFeature", "selectFeatureControl added successfully");
    }

B. For the server side, particularly ColdFusion, I have been using mxunit.org upon following Sean Corfield’s blog post regarding ColdFusion Unit Testing.

1. Download from mxunit.org

2. Extract to your webroot

3. Write your testcase as a cfc.

var metaName = "gao li wu";
var search = createObject("component","platform.svc.search.GeoSearch");
search.setDSN('beijing_app');
search.setMetaName(metaName);
actual = search.getMetaName();
assertEquals(actual,metaName);

Notes:
1. You can show the cfdump on the test case iff the test-case passed. If your test-case fails, then you need to comment the assertion first so you could see the cfdump. Inserting cfdump (commented or not) is a convenient way to debug your CFM.

2. You can chain test cases by calling the related functions. This is very useful when you are doing a short-circuit test.

• Intellisense for ExtJS by using com.extjs.ext.2.0_1.0.0.00000.jar from the ExtJS blog. Umm, I am hoping someday OpenLayers can provide a similar jar file to provide code assist.
• I like the fact that it could clearly display an outline of my javascript objects but sometimes not for all.

But one of the major problems I encountered was the startup. Sometimes, for some unknown reason, Aptana cannot start using the executable it provided during the install. However, I was able to weed that problem out by instead launching it from startup.jar. All of these is documented from Aptana’s JIRA ticket.

1. Downloaded and install Aptana

2. Watched Aptana TV Overview

3. Installed cfeclipse http://www.cfeclipse.org/update

4. Installed viPlugin http://satokar.com/ (Note that the viPlugin would not work with files = *.html)

5. Added the extjs2.0 code assist

JSEclipse from Adobe Labs

JSEclipse Installation

Eclipse Update Site:
Help -> Software Updates -> Find and Install -> New

http://download.macromedia.com/pub/labs/jseclipse/autoinstall