Develop Gwt application in TDD

April 13-16, 2011. Oxford, UK

Writing web UI in
Testﬁrst fashion with
GWT
Uberto Barbini
uberto@ubiland.net
twitter: @ramtop

Sunday, April 17, 2011

About me

Uberto Barbini
Software artisan
Agile enthusiast.

Hobby:
photography and the game of Go.

Teamleader and Architect for Vodafone
editorial and backend products.


Editorial platform for big company:
4-5 people team
agile (scrum and kanban)
gwt, hibernate, smartgwt
started jan 2009
version 1.0 june 2009, now 3.2

total lines of code: ~2.000.000
test coverage: ~60%


http://netnumero.com


http://netnumero.com

NetNumero numbers:
5 people on weekends and nights
1 year with many pauses
Test coverage:
Total classes 94.1% (272/ 289)
Total methods 73.7% (1004/ 1363)
Total lines 79.1% (5125/ 6481)


Four Noble Truths
of Buddhism


Four Noble Truths
of Buddhism

• Suffering exists
• Suffering arises from attachment
to desires
• Suffering ceases when attachment
to desire ceases
• Freedom from suffering is possible
by practising the Eightfold Path


Four Noble Truths
of complex* web applications development

Text

* If your url can contain all the app state is not a complex application. Just use Rest

Four Noble Truths
of complex* web applications development

• Suffering exists when writing complex web
application
• Suffering arises from user state attachment
Text
on the server
• Suffering ceases when attachment to user
status ceases
• Freedom from suffering is possible by
practicing the GWT Path
* If your url can contain all the app state is not a complex application. Just use Rest

What’s GWT
anyway?


What’s GWT
anyway?

Short version:
Java to Javascript compiler


Where to start

Be s t
bo ok Be s t Gwt and
s tart to
w it h reference Sw ing are
Gwt on Gwt similar

Many video on Google like:
http://www.google.com/events/io/2009/sessions/
GoogleWebToolkitBestPractices.html

GWT magic 1
The compiler
• Directories will be created containing the JavaScript implementation of
your project. One directory for each module.
C:gwt-2.0.0samplesHello>ant
Buildfile: build.xml

libs:

javac:

gwtc:
[java] Compiling module com.google.gwt.sample.hello.Hello
[java] Compiling 5 permutations
[java] Permutation compile succeeded
[java] Linking into war
[java] Link succeeded
[java] Compilation succeeded -- 20.313s

build:

BUILD SUCCESSFUL
Total time: 22 seconds


GWT magic 1
The compiler
Buildfile: build.xml 5 x supported browser x 1 locale.
libs: 6 Browsers in 6 languages
= 36 permutations!
javac:

gwtc:

build:

BUILD SUCCESSFUL
Total time: 22 seconds


GWT magic 1
The compiler
Buildfile: build.xml 5 x supported browser x 1 locale.
libs: 6 Browsers in 6 languages
= 36 permutations!
javac:

gwtc:

build:
22 seconds for an helloworld.
BUILD SUCCESSFUL
Total time: 22 seconds Several minutes for real projects.


NetNumero compilation:

Compiling 10 permutations
Compiling permutation 0...
Compile of permutations succeeded
Linking into /Users/ubertobarbini/svijava/netnumero/
war/application. Writing extras to /Users/
ubertobarbini/svijava/netnumero/extra/application
Link succeeded
Compilation succeeded -- 354.190s


5 Browsers x 2
Languages
Link succeeded


5 Browsers x 2
Languages
Link succeeded

about 6 minutes


After running the GWT compiler your war directory
should look something like this:
C:gwt-2.0.0samplesHello>binfind war
war
warhello
warhello18EEC2DA45CB5F0C2050E2539AE61FCE.cache.html
warhello813B962DC4C22396EA14405DDEF020EE.cache.html
warhello86DA1DCEF4F40731BE71E7978CD4776A.cache.html
warhelloA37FC20FF4D8F11605B2C4C53AF20B6F.cache.html
warhelloE3C1ABB32E39A126A9194DB727F7742A.cache.html
warhello14A43CD7E24B0A0136C2B8B20D6DF3C0.cache.png
warhello548CDF11D6FE9011F3447CA200D7FB7F.cache.png
warhello9DA92932034707C17CFF15F95086D53F.cache.png
warhelloA7CD51F9E5A7DED5F85AD1D82BA67A8A.cache.png
warhelloB8517E9C2E38AA39AB7C0051564224D3.cache.png
warhelloclear.cache.gif
warhellohello.nocache.js
warhellohosted.html
warHello.html


Your 5 permutations
of compiled JS

war
warhello
warhellohosted.html
warHello.html


Your 5 permutations
of compiled JS

war
warhello
warhellohosted.html This is the non-cachable
warHello.html
JS launcher
(select the permutation).

GWT magic 2
Development mode

Devmode main advantage is client code hot-replace.
You need just a refresh on the browser.

GWT magic 3
RPC services


GWT magic 3
RPC services

1


GWT magic 3
RPC services

1 2


GWT magic 3
RPC services

1 2 3


Enough talk, let’s code!

• example of Hello in devmode
• example in IntelliJ of BugList Hello


Example HelloWorld
Starting with the
gwt helloworld
example we can
write test to cover
everything.

Let’s see how...


package com.mySampleApplication.client;
private static class MyAsyncCallback implements
import <...> AsyncCallback<String> {
private Label label;
public class MySampleApplication implements public MyAsyncCallback(Label label) {
EntryPoint { this.label = label;
}
public Button clickMeButton;
public Label messageLabel; public void onSuccess(String result) {
public String message = "Hello, World!"; label.getElement().setInnerHTML(result);
}
public void onModuleLoad() {
clickMeButton = new Button("Click me"); public void onFailure(Throwable throwable) {
messageLabel = new Label(); label.setText("Failed to receive answer
from server!");
clickMeButton.addClickHandler }
(createClickHandler(messageLabel, message)); }
}

RootPanel.get("slot1").add(clickMeButton);

Application start
RootPanel.get("slot2").add(messageLabel);
}

private ClickHandler createClickHandler(final
Label label, final String msg) {
return new ClickHandler() {
Ajax call on click
public void onClick(ClickEvent event) {
if (label.getText().equals("")) {

MySampleApplicationService.App.getInstance
().getMessage(msg, new MyAsyncCallback(label));
Result of ajax call
}
else {
label.setText(""); on the label
}
}
};
}


package com.mySampleApplication.client; public void testNotifyServerError() throws Exception
{
import ... final MySampleApplication wrongApp = new
MySampleApplication();
public class MySampleApplicationTest extends GWTTestCase wrongApp.message = null; //to simulate an error
{ from server
@Override wrongApp.onModuleLoad();
protected void gwtSetUp() throws Exception {
} ...//setup stuff wrongApp.clickMeButton.click();

@Override asyncTestValidation(new Timer() {
public String getModuleName() { public void run() {
... } // return .gwt.xml name assertEquals("Failed to receive answer
from server!", wrongApp.messageLabel.getText());
private void asyncTestValidation(Timer timer) { finishTest();
delayTestFinish(500); }
timer.schedule(100); });
} // to validate async test }

public void testUpdateLabelFromServerAtClick()
throws Exception { public void testResetLabelOnSecondClick() throws
assertEquals(1, RootPanel.get Exception {
("slot1").getWidgetCount());
app.clickMeButton.click();
asyncTestValidation(new Timer() {
asyncTestValidation(new Timer() { public void run() {
public void run() { app.clickMeButton.click();
assertEquals("Client said: "Hello,
World!"Server answered: "Hi!"", asyncTestValidation(new Timer() {
app.messageLabel.getText()); public void run() {
finishTest();
} assertEquals("",
}); app.messageLabel.getText());
} finishTest();
}
});
}
});
}
}


{
{ from server
@Override wrongApp.onModuleLoad();
} ...//setup stuff wrongApp.clickMeButton.click();


finishTest();
} assertEquals("",
} finishTest();
}
});
}

So what’s wrong with this?
});
}
}


{
{ from server

Slow! it recompiles in Javascript
@Override
} ...//setup stuff
wrongApp.onModuleLoad();

wrongApp.clickMeButton.click();


finishTest();
} assertEquals("",
} finishTest();
}
});
}

});
}
}


{
{ from server

@Override
} ...//setup stuff




Fragile, it use whole app
finishTest();
} assertEquals("",
} finishTest();
}
});
}

});
}
}


{
{ from server

@Override
} ...//setup stuff





Slow! Async tests take time
finishTest();
} assertEquals("",
} finishTest();
}
});
}

});
}
}


{
{ from server

@Override
} ...//setup stuff



Fragile!
} // to validate async test
It tests state not iteractions
}



Slow! Async tests take time
finishTest();
} assertEquals("",
} finishTest();
}
});
}

});
}
}


HelloWorld with Tests
What we learned?


What we learned?
Gwt HelloWorld can easily be tested with
100% coverage using GWTTestCase.


What we learned?
But we need to do better than that!


What we learned?
But we need to do better than that!
We need to keep GWTTestCase use at
minimum and test objects separately.


Ok, now I know
I can test all my
Gwt classes...

But last time I
checked TDD meant
Test Driven Design


Introducing MVP
Remove Presenter and View from Application


Introducing MVP
Application


Introducing MVP
Application

Presenter


Introducing MVP
Application

Services

Presenter


Introducing MVP
Application

Services

Presenter View


public class MySampleApplication implements }
EntryPoint { }
public void onModuleLoad() { };
Presenter presenter = getPresenterFromUrl(); }
presenter.activate();
} private static class MyAsyncCallback implements
AsyncCallback<String> {
private Presenter getPresenterFromUrl()
... //this will read from history private NotificationView view;
}
} public MyAsyncCallback(NotificationView
view) {
public class BugListPresenter extends Presenter { this.view = view;
... }
public BugListPresenter(BugListView view,
MySampleApplicationServiceAsync messageService) { public void onSuccess(String result) {
super(view); view.setMessageText(result);
this.view = view; }
this.messageService = messageService;
asyncCallback = new MyAsyncCallback(view); public void onFailure(Throwable throwable) {
view.addClickMeHandler(createClickHandler view.setMessageText("Failed to receive
()); answer from server!");
} }
}
@Override

Result of ajax call
protected void onShow() { }
view.setTitle("Active bugs");
}

private ClickHandler createClickHandler() {
return new ClickHandler() {
on the label
public void onClick(ClickEvent event) {
if (view.getMessageText().isEmpty())
Application start
{
messageService.getMessage
(message, asyncCallback); Ajax call on click
} else {
view.setMessageText("");


public class BugListViewFlexTable extends ViewAbstractRoot implements BugListView {

public Button clickMeButton = new Button("Click me");;

public Label messageLabel = new Label();

public void setTitle(String title) {

RootPanel.get("slot1").add(clickMeButton);
RootPanel.get("slot2").add(messageLabel);

RootPanel.get("title-label").getElement().setInnerText(title);
}

@Override
public void addClickMeHandler(ClickHandler clickHandler) {
clickMeButton.addClickHandler(clickHandler);
}

@Override
public void setMessageText(String message) {
messageLabel.getElement().setInnerHTML(message); //for html
}

@Override
public String getMessageText() {
return messageLabel.getText();
}
}

View very simple
with clear interface


ublic class BugListViewTest extends GwtTestWithApp {

private BugListView bugListView;

@Override
super.gwtSetUp();

bugListView = new BugListViewFlexTable();
}

public void testCreateAnEmptyGridOnActivation() throws Exception {
bugListView.show();
assertEquals(1, RootPanel.get("wrapper").getWidgetCount());
assertEquals(0, bugListView.getRowCount());
assertEquals("Active bugs", RootPanel.get("title-label").getElement().getInnerText());

}

public void testDisplayAndReadTheMessage() throws Exception {
bugListView.show();
assertEquals("<div class="gwt-Label"></div>", RootPanel.get("slot2").getElement().getInnerHTML());

bugListView.setMessageText("My message");
assertEquals("<div class="gwt-Label"></div>", RootPanel.get("slot2").getElement().getInnerHTML());

assertEquals("My message", bugListView.getMessageText());
}

}

View stories


public class BugListPresenterTest {
@Test
@Before public void shouldShowTheErrorWhenServerFails()
public void setUp() throws Exception { throws Exception {
clickAnswer = new ClickAnswer(); doAnswer(new MessageErrorAnswer()).when
doAnswer(clickAnswer).when (getMessageService).getMessage(anyString(), any
(view).addClickMeHandler(any(ClickHandler.class)); (AsyncCallback.class));

doAnswer(new MessageAnswer()).when pres.activate();
(getMessageService).getMessage(anyString(), any
(AsyncCallback.class)); verifyViewInvocations();
when(view.getMessageText()).thenReturn(""); clickAnswer.clickHandler.onClick(null);

pres = new BugListPresenter(view, verify(getMessageService).getMessage(anyString
getMessageService); (), any(AsyncCallback.class));
} verify(view).getMessageText();

@After verify(view).setMessageText("Failed to receive
public void dropDown() throws Exception { answer from server!");
Mockito.verifyNoMoreInteractions(view); }
Mockito.verifyNoMoreInteractions
(getMessageService);
@Test
} public void shouldResetTheMessageTheSecondClick()
throws Exception {
@Test when(view.getMessageText()).thenReturn("not
public void shouldShowTheMessageOnClick() throws void");
Exception {
pres.activate(); pres.activate();

verifyViewInvocations(); verifyViewInvocations();
clickAnswer.clickHandler.onClick(null);
verify(getMessageService).getMessage(anyString
(), any(AsyncCallback.class)); verify(view).getMessageText();
verify(view).getMessageText(); verify(view).setMessageText("");
}
verify(view).setMessageText("MessageAnswer
invoked with: "Hello, World!"");
}


public class BugListPresenterTest {

@Before Presenter with
@Test
public void shouldShowTheErrorWhenServerFails()
public void setUp() throws Exception { throws Exception {
clickAnswer = new ClickAnswer();
doAnswer(clickAnswer).when logic using mocks
doAnswer(new MessageErrorAnswer()).when
(view).addClickMeHandler(any(ClickHandler.class)); (AsyncCallback.class));

doAnswer(new MessageAnswer()).when
for view and
pres.activate();

services
(AsyncCallback.class)); verifyViewInvocations();
when(view.getMessageText()).thenReturn(""); clickAnswer.clickHandler.onClick(null);

pres = new BugListPresenter(view, verify(getMessageService).getMessage(anyString
getMessageService); (), any(AsyncCallback.class));
} verify(view).getMessageText();

@After verify(view).setMessageText("Failed to receive
public void dropDown() throws Exception { answer from server!");
Mockito.verifyNoMoreInteractions(view); }
Mockito.verifyNoMoreInteractions
(getMessageService);
@Test
} public void shouldResetTheMessageTheSecondClick()
throws Exception {
@Test when(view.getMessageText()).thenReturn("not
public void shouldShowTheMessageOnClick() throws void");
Exception {
pres.activate(); pres.activate();

verifyViewInvocations(); verifyViewInvocations();
verify(getMessageService).getMessage(anyString
(), any(AsyncCallback.class)); verify(view).getMessageText();
verify(view).getMessageText(); verify(view).setMessageText("");
}
verify(view).setMessageText("MessageAnswer
invoked with: "Hello, World!"");
}


MVP Unit Tests

Client GWT Tests

Pure Java
pseudo-client Tests

Pure Java
standard Tests


Model View Presenter


• 100% test coverage.
To let them drive your design.


• pseudo-client tests split.plain Java.
Test Presenters and Model in



• GwtTests onlystatus.View/Services. shallow one
Services have no
for
Views just a very
(MVP not MVC). You can also test the DOM*



Services have no
for
Views just a very

• asyncTests only are not in the View.Services.
That’s why Services
for testing the



Services have no
for
Views just a very

for testing the

*in lack of something better

If you have to remember just a
slide please remember this one!

Services have no
for
Views just a very

for testing the

*in lack of something better

Example BugTracker


Example BugTracker
• First theTDD
serverside
Model


Example BugTracker
• First theTDD
serverside
Model

• Then the View + client TDD
developer mode design


Example BugTracker
• First theTDD
serverside
Model


• Continue with Presenter
pseudo-client TDD


Example BugTracker
• First theTDD
serverside
Model


• Continue with Presenter
pseudo-client TDD

• Finish with the Plumbing
Integration Tests


NetNumero.com


NetNumero.com
• We started in TDD only on the server


NetNumero.com
• Then we refactored to GOOS style TDD


NetNumero.com
• Now we’re doing also Views in TDD


NetNumero.com
• We also started using Cucumber for
Acceptance Tests


NetNumero.com
• We also started using Cucumber for
Acceptance Tests
• So which design emerged?

Browser - JavaScript

Dual-Exagon Events

Architecture User

Ajax
Webserver - Java


Dual-Exagon Events

Architecture User

Ajax
• All client code is on a single
html page.

Webserver - Java


Dual-Exagon Events

Architecture User

Ajax
html page.

• Internal navigation with
dynamic bookmark

Webserver - Java


Dual-Exagon Events

Architecture User

Ajax
html page.

• Internal navigation with
dynamic bookmark

• Completely sessionless
server (REST or GWT-RPC)
Webserver - Java

Client

S
/J
ets
dg
View

Wi
Model
Events
GWT

y
tor
Module

is H r
se
Presenter

ow
Br
Services Async Services

based on
generics

Ajax

Client
Write your own

S
/J
ets
widgets for UI

dg
View

Wi
Model
Events
GWT

y
tor
Module

is H r
se
Presenter

ow
Br

based on
generics

Ajax

Client
Write your own

S
/J
ets
widgets for UI

dg
View

Wi
Model
Events
Browser GWT

y
tor
Module

is H
events based

r
se
Presenter

ow
Br

based on
generics

Ajax

Server

Ajax
Servlet

Auth-Auth

gs
Lo
Audit

Commands

Model

DAO

Persistence

Webserver - Java

Server

Ajax
Get the ajax call, Servlet

check the security, Auth-Auth

gs
process the

Lo
Audit

command Commands

Model

DAO

Persistence

Webserver - Java

Server

Ajax
Get the ajax call, Servlet

check the security, Auth-Auth

gs
process the

Lo
Audit

command Commands

Model

Commands call the
DAO

model and the
Persistence
persistence layer

Webserver - Java

When things grow up


When things grow up

• Code split


When things grow up

• Code split
• Presenter proxy pattern


When things grow up

• Code split
• Presenter proxy pattern
• Modular Views and Presenters


Code split report


Code split report
This is your obfuscated total
javascript code.


Code split report
javascript code.

This is your initial download.


Code split report
javascript code.

This is your initial download.

This is your second download.
We can split again anyway...


Split code


• examples:


Sparse thoughts
• It’s not that I don’t like JS. It’s all about tools
and having same language everywhere
• The issue with 100% coverage it’s not really
about tests. If there is a 1% that I cannot
test there must be a design problem there.
• Javascript threads and other differences
between Java and GWT compilable Java
• View Dom Manipulation and xpath tests
• View test ﬁrst with UIBindings and widgets

The future...


The future...
my wish list:


The future...
my wish list:
•Incremental compile


The future...
my wish list:
•Multi browsers javascript


The future...
my wish list:
•Other languages (Python, Scala)


The future...
my wish list:
•Other languages (Python, Scala)
•GWT toolkit for JS server side?


Develop Gwt application in TDD

More Related Content

Similar to Develop Gwt application in TDD (20)

More from Uberto Barbini (9)

Recently uploaded (20)

Develop Gwt application in TDD