Prabhu Sunderaraman

Ext JS4 recommends unit testing of the application using Jasmine library. The article can be found here.

Given below are some screenshots of a simple application that has been unit tested with Jasmine. The application is implemented in the MVC style.

The page just contains a combobox of countries as shown below.

The test page that contains the results of the test-cases created using Jasmine is shown below.

A sample unit testing code using Jasmine is shown below

describe("Test Country Store",function(){
	var store = null;
	beforeEach(function(){
		store = Application.getStore("CountryStore");
		waitsFor(function(){ 
			 	return !store.isLoading(); },"load never completed",4000
		);
	});

	it("test Country Store data",function(){
		expect(store).toBeDefined();
		expect(store).toBeTruthy();
	});
	it("test Country Store data country",function(){
		expect(store.getCount()).toEqual(3);
	});
});

The syntax for Jasmine is similar to JUnit with expect() functions similar to the assert methods. You can refer to this site for more information about Jasmine API.

The complete code, as an Eclipse project, can be viewed in https://github.com/prabhu-durasoft/Unit_Testing_ExtJS4_Using_JASMINE_1

In the previous post, we saw an example of Ext.direct using DirectJNgine. Let’s discuss using Ext.data.DirectStore to populate a combobox in this post.

We’ll display a list of countries in the combobox. The server side code that returns a list of countries is shown below.

//CountriesStore.java
package com.durasoft;

import java.util.ArrayList;
import com.softwarementors.extjs.djn.config.annotations.DirectAction;
import com.softwarementors.extjs.djn.config.annotations.DirectMethod;

@DirectAction(action="CountriesStore")
public class CountriesStore {
	@DirectMethod
	public ArrayList<Country> loadCountries() {
		ArrayList<Country> countries = new ArrayList<Country>();
		countries.add(new Country("India","New Delhi"));
		countries.add(new Country("US","Washington, D.C"));
		countries.add(new Country("UK","London"));
		return countries;
	}
}
//Country.java
package com.durasoft;

public class Country {
	private String name;
	private String capital;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCapital() {
		return capital;
	}
	public void setCapital(String capital) {
		this.capital = capital;
	}
	public Country(String name, String capital) {
		this.name = name;
		this.capital = capital;
	}
	public Country() {
	}
}

In Ext JS4 you’ll use Ext.data.DirectStore class to display the country names in a combobox. The Code is shown below.

Ext.define("Country",{
	extend : "Ext.data.Model",
	fields : ["name","capital"]
});
Ext.onReady(function(){
	Ext.Direct.addProvider(
			DuraSoft.direct.REMOTING_API
	);
	var countryStore = Ext.create("Ext.data.DirectStore",{
			model : "Country",
			autoLoad : true,
			proxy : {
				    type : "direct",
				    directFn : CountriesStore.loadCountries
 				}
			});
	Ext.create("Ext.form.Panel",{
			renderTo : Ext.getBody(),
			title : "Ext.direct store",
			items : [
			        	{
			        		xtype:"combo",
			        		fieldLabel:"Countries",
			        		store : countryStore,
			        		displayField : "name"
			        	}
			        ]
	});
 }
);

We’ve created a DirectStore instance that uses a “direct” proxy. The directFn property specifies the server-side method loadCountries in CountriesStore class. This proxy uses JsonReader indirectly to parse the data returned from the server. DirectJNgine serializes the data to JSON format automatically.

The complete project created in Eclipse is available at http://durasoftindia.com/downloads/ExtDirect.rar