Top Banner
28. November 2008
163

28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Jul 14, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

28. November 2008

Page 2: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Johannes Link

Page 3: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Coach für agile Softwareentwicklung

Page 4: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 5: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Heidelberg

Page 6: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 7: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 8: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

johanneslink.net

Page 9: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Ajax und Web 2.0: Die Grenze der testgetriebenen Entwicklung?

Page 10: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Asynchronous JAvaScript and XML

Page 11: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

IE6

Page 12: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 13: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

JavaScript

Flash

XML JSON

prototype

Silverlight

Railsscript.aculo.us

JSUnit

JsMockjQuery

ExtComet

dojo

DWR

RAP

Flex

Gears

GWTMooTools

ColdFusion

Java

JavaFXGrails

YUI

GoogleMaps

Microformat

Firebug

Greasemonkey

SVG

Video

Sound

Accessibility

Security

XHR

JavaScriptJavaScript

Mobile

IE

Safari

Opera

Firefox

iPhone

MashUp

Jayjax

JSF

JsTester

WebTest

Selenium

JSSpec

JavaScriptMVC

MockMe

XBL

ActionScript

IE PNG Fix

HeatMapAPI

json-lib

jackson

Air

WebKit

Gecko

J3Unit

Chrome

Page 14: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

JavaScript

Flash

XML JSON

prototype

Silverlight

Railsscript.aculo.us

JSUnit

JsMockjQuery

ExtComet

dojo

DWR

RAP

Flex

Gears

GWTMooTools

ColdFusion

Java

JavaFXGrails

YUI

GoogleMaps

Microformat

Firebug

Greasemonkey

SVG

Video

Sound

Accessibility

Security

XHR

JavaScriptJavaScript

Mobile

IE

Safari

Opera

Firefox

iPhone

MashUp

Jayjax

JSF

JsTester

WebTest

Selenium

JSSpec

JavaScriptMVC

MockMe

XBL

ActionScript

IE PNG Fix

HeatMapAPI

json-lib

jackson

Air

WebKit

Gecko

J3Unit

Chrome

Page 15: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

JavaScript

JSON

prototype

script.aculo.us Java

GoogleMaps

XHR

Firefox

Selenium

MockMejackson

Chrome

Page 16: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

JavaScript

JSON

prototype

script.aculo.us Java

GoogleMaps

XHR

Firefox

Selenium

MockMejackson

Page 17: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Die teilweise testgetriebene Entwicklung einer einfachen Web-Applikation, die JavaScript, XHR, DOM-Manipulation, prototype und script.aculo.us verwendet und mit GoogleMaps (tm) „gemasht“ wird.

Und all das aus der Perspektive eines Java-Entwicklers.

Page 18: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Off-Topic

Page 19: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Off-Topic

• What is Test-Driven Development

Page 20: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Off-Topic

• What is Test-Driven Development

• TDD vs BDD

Page 21: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Off-Topic

• What is Test-Driven Development

• TDD vs BDD

• 100+ Tools und Frameworks

Page 22: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Agenda

Page 23: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Agenda

• Herausforderungen

Page 24: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Agenda

• Herausforderungen

• Techniken & Werkzeuge

Page 25: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Agenda

• Herausforderungen

• Techniken & Werkzeuge

‣ JavaScript Unit Testing

Page 26: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Agenda

• Herausforderungen

• Techniken & Werkzeuge

‣ JavaScript Unit Testing

‣ Akzeptanztests

Page 27: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Agenda

• Herausforderungen

• Techniken & Werkzeuge

‣ JavaScript Unit Testing

‣ Akzeptanztests

• ELO: Event Location Optimizer

Page 28: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Agenda

• Herausforderungen

• Techniken & Werkzeuge

‣ JavaScript Unit Testing

‣ Akzeptanztests

• ELO: Event Location Optimizer

• Lessons Learned

Page 29: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 30: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Page 31: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Page 32: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

HTMLXML

JSONJavaScript

Page 33: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

HTMLXML

JSONJavaScript

Asynchron

Page 34: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

HTMLXML

JSONJavaScript

Asynchron

Mash-Up API

Google MapsFlickrYouTube

HTTP

Das Web

Page 35: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

HTMLXML

JSONJavaScript

Asynchron

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

Das Web

Page 36: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Herausforderungen

Page 37: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Herausforderungen

• Technologie-Mix (JavaScript, Java, ...)

Page 38: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Herausforderungen

• Technologie-Mix (JavaScript, Java, ...)• Verteilung

Page 39: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Herausforderungen

• Technologie-Mix (JavaScript, Java, ...)• Verteilung• Externe Komponenten‣ über Mash-Ups (z.B. Google Maps)‣ Server-seitige „Remote Services“

Page 40: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Herausforderungen

• Technologie-Mix (JavaScript, Java, ...)• Verteilung• Externe Komponenten‣ über Mash-Ups (z.B. Google Maps)‣ Server-seitige „Remote Services“

• Browser-Inkompatibilitäten

Page 41: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

Was können wir testen?

HTMLXML

JSONJavaScript

Asynchron

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

The Web

Page 42: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

Was können wir testen?

HTMLXML

JSONJavaScript

Asynchron

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

The Web

Page 43: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

Was können wir testen?

HTMLXML

JSONJavaScript

Asynchron

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

The Web

Page 44: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Entwicklertestsauf dem Server

Wie gehabt:

Unit Tests...

... und auch ein paar Integrationstests

Page 45: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

HTMLXML

JSONJavaScript

Asynchronous

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

Das Web

Was können wir testen?

Page 46: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

HTMLXML

JSONJavaScript

Asynchronous

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

Das Web

Was können wir testen?

Page 47: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Entwicklertestsfür den Client

Page 48: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Entwicklertestsfür den Client

‣ Testgetriebenes JavaScript ist möglich

‣ Benutze eine Cross-Browser-Bibliothek

‣ Organisiere deinen Code von Anfang an

‣ Die Werkzeuge...

Page 49: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Scriptaculous Testing Framework

• http://github.com/madrobby/scriptaculous/wikis/unit-testing

• Testfälle auf HTML-Seiten• Vorteile‣ Browser-Inkompatibilitäten werden sichtbar‣ Browser-Features sind verfügbar

• Nachteile‣ Automatisierung benötigt auch einen

Browser (oder eine Simulation)‣ Abhängig von prototype

Page 50: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

<head> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous/scriptaculous.js?load=unittest" type="text/javascript"></script></head><body> <!-- Log output --> <div id="testlog"></div> <!-- Tests follow --> <script type="text/javascript" language="javascript">// <![CDATA[

var myAdder = function (a, b) {...}

new Test.Unit.Runner({ setup: function() { one = 1; two = 2; }, testAddSmallNumbers: function() { with(this) { assertEqual(3, myAdder(one, two)); }}, ...});// ]]> </script></body>

23

Page 51: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

<head> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous/scriptaculous.js?load=unittest" type="text/javascript"></script></head><body> <!-- Log output --> <div id="testlog"></div> <!-- Tests follow --> <script type="text/javascript" language="javascript">// <![CDATA[

var myAdder = function (a, b) {...}

new Test.Unit.Runner({ setup: function() { one = 1; two = 2; }, testAddSmallNumbers: function() { with(this) { assertEqual(3, myAdder(one, two)); }}, ...});// ]]> </script></body>

23

Page 52: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

<head> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous/scriptaculous.js?load=unittest" type="text/javascript"></script></head><body> <!-- Log output --> <div id="testlog"></div> <!-- Tests follow --> <script type="text/javascript" language="javascript">// <![CDATA[

var myAdder = function (a, b) {...}

new Test.Unit.Runner({ setup: function() { one = 1; two = 2; }, testAddSmallNumbers: function() { with(this) { assertEqual(3, myAdder(one, two)); }}, ...});// ]]> </script></body>

23

Page 53: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

<head> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous/scriptaculous.js?load=unittest" type="text/javascript"></script></head><body> <!-- Log output --> <div id="testlog"></div> <!-- Tests follow --> <script type="text/javascript" language="javascript">// <![CDATA[

var myAdder = function (a, b) {...}

new Test.Unit.Runner({ setup: function() { one = 1; two = 2; }, testAddSmallNumbers: function() { with(this) { assertEqual(3, myAdder(one, two)); }}, ...});// ]]> </script></body>

23

Page 54: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

<head> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous/scriptaculous.js?load=unittest" type="text/javascript"></script></head><body> <!-- Log output --> <div id="testlog"></div> <!-- Tests follow --> <script type="text/javascript" language="javascript">// <![CDATA[

var myAdder = function (a, b) {...}

new Test.Unit.Runner({ setup: function() { one = 1; two = 2; }, testAddSmallNumbers: function() { with(this) { assertEqual(3, myAdder(one, two)); }}, ...});// ]]> </script></body>

23

Page 55: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

<head> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous/scriptaculous.js?load=unittest" type="text/javascript"></script></head><body> <!-- Log output --> <div id="testlog"></div> <!-- Tests follow --> <script type="text/javascript" language="javascript">// <![CDATA[

var myAdder = function (a, b) {...}

new Test.Unit.Runner({ setup: function() { one = 1; two = 2; }, testAddSmallNumbers: function() { with(this) { assertEqual(3, myAdder(one, two)); }}, ...});// ]]> </script></body>

23

Page 56: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

JsTester• http://jstester.sourceforge.net/ • Benutzt Rhino-JavaScript-Engine um Tests auf

dem Server auszuführen• Vorteile‣ Kein Browser notwendig‣ Einfache Integration mit JUnit / TestNG

• Nachteile‣ Die Funktionalität des Browsers ist nicht

verfügbar‣ Browser-Probleme werden nicht entdeckt

• Besonders wertvoll, wenn der Server selbst JavaScript-Code (oder JSON) generiert

Page 57: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

MockMe: http://johanneslink.net/projects/

mockme.htmlObject to mock:var Speaker = { say: function(msg) { alert(msg); }};

Object under test:var DoubleSpeaker = { say: function(msg) { Speaker.say(msg+msg); }};

Page 58: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

MockMe: http://johanneslink.net/projects/

mockme.htmlObject to mock:var Speaker = { say: function(msg) { alert(msg); }};

Object under test:var DoubleSpeaker = { say: function(msg) { Speaker.say(msg+msg); }};

Unit Test:testDoubleSpeaker: function() { mock(Speaker).andDo(function() { DoubleSpeaker.say('oops'); verify(Speaker.say)('oopsoops'); });}

Page 59: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

MockMe: http://johanneslink.net/projects/

mockme.htmlObject to mock:var Speaker = { say: function(msg) { alert(msg); }};

Object under test:var DoubleSpeaker = { say: function(msg) { Speaker.say(msg+msg); }};

Unit Test:testDoubleSpeaker: function() { mock(Speaker).andDo(function() { DoubleSpeaker.say('oops'); verify(Speaker.say)('oopsoops'); });}

Stubbing:testStubbing: function() { with(this) { useMockerFor(function(mocker) { var f = mocker.mock(); when(f)(1, 'two').thenReturn('hiho'); assertEqual('hiho', f(1, 'two')); });}}

Page 60: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

HTMLXML

JSONJavaScript

Asynchron

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

Das Web

Was können wir testen?

Page 61: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ServerTomcat, Rails...Java, PHP...ServletsJSFDWR (server lib)

Web ClientHTML + CSSJavaScriptprototypescript.aculo.usDojoDWR (client lib)

HTMLXML

JSONJavaScript

Asynchron

REST

SOAP

Mash-Up API

Google MapsFlickrYouTube

HTTP

Das Web

Was können wir testen?

Page 62: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Akzeptanztests

• Teste (überwiegend) das ganze System• Welchen Web-Client?

‣ Der echte Browser: Selenium, Watir...

‣ Simulierter Browser: HtmlUnit, Webtest, ...

‣ „Nur“ die Business-Fassade• Mocke oder simuliere(?) alle Zugriffe

auf externe Komponenten

Page 63: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Ansätze für ATs

• Oberflächenorientiert

‣ Tests „bedienen“ die tatsächliche Benutzerschnittstelle

• Fachlich orientiert

‣ Formulierung der Testfälle in domänen-naher Sprache

Page 64: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Oberflächenorientierte Akzeptanztests

• Selenium‣ http://selenium.openqa.org/ ‣ Echter Browser als Ausführungsplattform‣ Selenium IDE oder Remote Control

• Canoo WebTest‣ http://webtest.canoo.com/‣ Verwendet HtmlUnit im Hintergrund‣ Ant-Skripte oder Groovy

• Beide unterstützen JavaScript & asynchrone Aufrufe

Page 65: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 66: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Canoo WebTest: Groovy

Page 67: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Selenium: Vor- und Nachteile

Page 68: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Selenium: Vor- und Nachteile

+ Der echte Browser kommt zum Einsatz

Page 69: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Selenium: Vor- und Nachteile

+ Der echte Browser kommt zum Einsatz- Den echten Browser zu benutzen ist langsam

Page 70: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Selenium: Vor- und Nachteile

+ Der echte Browser kommt zum Einsatz- Den echten Browser zu benutzen ist langsam+ Man muss sich über die Testsprache keine Gedanken machen

Page 71: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Selenium: Vor- und Nachteile

+ Der echte Browser kommt zum Einsatz- Den echten Browser zu benutzen ist langsam+ Man muss sich über die Testsprache keine Gedanken machen- Vielleicht mag man die vorgegebene Testsprachen nicht

Page 72: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Selenium: Vor- und Nachteile

+ Der echte Browser kommt zum Einsatz- Den echten Browser zu benutzen ist langsam+ Man muss sich über die Testsprache keine Gedanken machen- Vielleicht mag man die vorgegebene Testsprachen nicht- Tests tendieren zu Duplikation

Page 73: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Selenium: Vor- und Nachteile

+ Der echte Browser kommt zum Einsatz- Den echten Browser zu benutzen ist langsam+ Man muss sich über die Testsprache keine Gedanken machen- Vielleicht mag man die vorgegebene Testsprachen nicht- Tests tendieren zu Duplikation- Aufwändige „Backdoor“-Mechanismen

Page 74: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Fachlich orientiertes Framework: FIT / FitNesse

• Framework for Integrated Tests

• Testdaten und Skripte in Tabellen (HTML, Excel or Wiki)

• Zielt auf die Sprache des Kunden

• Anbindung ans System mit Java, C#, Python, C++

Page 75: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 76: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

FIT: Vor- & Nachteile

+ Tests sind von der Entwicklung entkoppelt

+ Testsprache kann frei definiert werden

- Erfordert (ein wenig) Programmierung

- Die passende Testsprache zu finden ist nicht einfach

Page 77: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Wie verbinden wirFIT mit Ajax?

Page 78: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Wie verbinden wirFIT mit Ajax?

Option 1: Verwende die Business-Facade auf dem Server

Page 79: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Wie verbinden wirFIT mit Ajax?

Option 1: Verwende die Business-Facade auf dem Server

Option 2:Verwende einen Web-Client- Selenium Remote Control- HtmlUnit

Page 80: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Wie verbinden wirFIT mit Ajax?

Option 1: Verwende die Business-Facade auf dem Server

Option 2:Verwende einen Web-Client- Selenium Remote Control- HtmlUnit

Option 3:Verwende eine generische Web-Fixture- http://fitnesse.info/webtest/- http://htmlfixtureim.sourceforge.net/

Page 81: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Event Location Optimizer

Page 82: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Event Location Optimizer

Page 83: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ELO Demo

Page 84: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat

HTMLAsynchron

REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us

ServletsJackson

JSON

Google Maps

Page 85: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat

HTMLAsynchron

REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us Google Maps

ServletsJackson

JSON

Page 86: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ELO: JS Unit Tests

• TDD der Logik ist einfach• Aber wie testet man die ganze DOM-

Manipulation?

Page 87: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing DOM Manipulation (1)

Page 88: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing DOM Manipulation (1)

<div id="browseEventsMenuItem"><button>Browse Events</button></div><div id="myEventMenuItem" class="selected"><button>My Event</button></div><div id="browseEventsScreen">Browse Events Screen</div><div id="myEventScreen" class="showing">My Event Screen</div>

Page 89: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

button {color: black;}.menuItem.selected button {color: blue;}

.screen {display: none;}

.screen.showing {display: inherit;}

Unit Testing DOM Manipulation (1)

<div id="browseEventsMenuItem"><button>Browse Events</button></div><div id="myEventMenuItem" class="selected"><button>My Event</button></div><div id="browseEventsScreen">Browse Events Screen</div><div id="myEventScreen" class="showing">My Event Screen</div>

Page 90: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

button {color: black;}.menuItem.selected button {color: blue;}

.screen {display: none;}

.screen.showing {display: inherit;}

testBrowseEventsMenuButton: function() { with(this) { browseEventsButtonClicked(); assert(Element.hasClassName($('browseEventsMenuItem'), ELO.SELECTED)); assert(!Element.hasClassName($('myEventMenuItem'), ELO.SELECTED)); assert(Element.hasClassName($('browseEventsScreen'), ELO.SHOWING)); assert(!Element.hasClassName($('myEventScreen'), ELO.SHOWING));}}

Unit Testing DOM Manipulation (1)

<div id="browseEventsMenuItem"><button>Browse Events</button></div><div id="myEventMenuItem" class="selected"><button>My Event</button></div><div id="browseEventsScreen">Browse Events Screen</div><div id="myEventScreen" class="showing">My Event Screen</div>

Page 91: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

button {color: black;}.menuItem.selected button {color: blue;}

.screen {display: none;}

.screen.showing {display: inherit;}

testBrowseEventsMenuButton: function() { with(this) { browseEventsButtonClicked(); assert(Element.hasClassName($('browseEventsMenuItem'), ELO.SELECTED)); assert(!Element.hasClassName($('myEventMenuItem'), ELO.SELECTED)); assert(Element.hasClassName($('browseEventsScreen'), ELO.SHOWING)); assert(!Element.hasClassName($('myEventScreen'), ELO.SHOWING));}}

Unit Testing DOM Manipulation (1)

<div id="browseEventsMenuItem"><button>Browse Events</button></div><div id="myEventMenuItem" class="selected"><button>My Event</button></div><div id="browseEventsScreen">Browse Events Screen</div><div id="myEventScreen" class="showing">My Event Screen</div>

$("browseEventsMenuItem").observe('click', browseEventsButtonClicked);function browseEventsButtonClicked() { $("myEventMenuItem").removeClassName(ELO.SELECTED); $("myEventScreen").removeClassName(ELO.SHOWING); $("browseEventsMenuItem").addClassName(ELO.SELECTED); $("browseEventsScreen").addClassName(ELO.SHOWING);}

Page 92: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

button {color: black;}.menuItem.selected button {color: blue;}

.screen {display: none;}

.screen.showing {display: inherit;}

testBrowseEventsMenuButton: function() { with(this) { browseEventsButtonClicked(); assert(Element.hasClassName($('browseEventsMenuItem'), ELO.SELECTED)); assert(!Element.hasClassName($('myEventMenuItem'), ELO.SELECTED)); assert(Element.hasClassName($('browseEventsScreen'), ELO.SHOWING)); assert(!Element.hasClassName($('myEventScreen'), ELO.SHOWING));}}

Unit Testing DOM Manipulation (1)

<div id="browseEventsMenuItem"><button>Browse Events</button></div><div id="myEventMenuItem" class="selected"><button>My Event</button></div><div id="browseEventsScreen">Browse Events Screen</div><div id="myEventScreen" class="showing">My Event Screen</div>

$("browseEventsMenuItem").observe('click', browseEventsButtonClicked);function browseEventsButtonClicked() { $("myEventMenuItem").removeClassName(ELO.SELECTED); $("myEventScreen").removeClassName(ELO.SHOWING); $("browseEventsMenuItem").addClassName(ELO.SELECTED); $("browseEventsScreen").addClassName(ELO.SHOWING);}

$('browseEventsMenuItem').down('button').click();

Page 93: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

testBrowseEventsMenuButton: function() { with(this) { browseEventsButtonClicked(); ...;}},

testMyEventMenuButton: function() { with(this) { myEventButtonClicked(); ...}}

Unit Testing DOM Manipulation (2)

<div id="browseEventsMenuItem"><button>Browse Events</button></div><div id="myEventMenuItem" class="selected"><button>My Event</button></div><div id="browseEventsScreen">Browse Events Screen</div><div id="myEventScreen" class="showing">My Event Screen</div>

Page 94: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

testBrowseEventsMenuButton: function() { with(this) { browseEventsButtonClicked(); ...;}},

testMyEventMenuButton: function() { with(this) { myEventButtonClicked(); ...}}

Unit Testing DOM Manipulation (2)

<div id="browseEventsMenuItem"><button>Browse Events</button></div><div id="myEventMenuItem" class="selected"><button>My Event</button></div><div id="browseEventsScreen">Browse Events Screen</div><div id="myEventScreen" class="showing">My Event Screen</div>

setup: function() { with(this) { mydom = $('myDom').innerHTML;}},

teardown: function() { with(this) { $('mydom').update(mydom);}},

Page 95: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (1)

Page 96: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (1)

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

Page 97: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (1)

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

.screen {display: none;}

.screen.showing {display: inherit;}

Page 98: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (1)

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

.screen {display: none;}

.screen.showing {display: inherit;}

testBrowseEventsMenuButton: function() { with(this) { browseEventsButtonClicked(); ... assertNotVisible($('myEventScreen')); assertVisible($('browseEventsScreen'));}}

Page 99: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (2)

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

testBrowseEventsMenuButton: function() { with(this) {browseEventsButtonClicked();...assertNotVisible($('myEventScreen'));assertVisible($('browseEventsScreen'));

}}

Page 100: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (2)

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

testBrowseEventsMenuButton: function() { with(this) {browseEventsButtonClicked();...assertNotVisible($('myEventScreen'));assertVisible($('browseEventsScreen'));

}}

Page 101: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (2)

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

testBrowseEventsMenuButton: function() { with(this) {browseEventsButtonClicked();...assertNotVisible($('myEventScreen'));assertVisible($('browseEventsScreen'));

}}

Page 102: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (2)

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

testBrowseEventsMenuButton: function() { with(this) {browseEventsButtonClicked();...assertNotVisible($('myEventScreen'));assertVisible($('browseEventsScreen'));

}}

testBrowseEventsMenuButton: function() { with(this) {...wait(2000, function() {

assertNotVisible($('browseEventsScreen'));assertVisible($('myEventScreen'));

});}}

Page 103: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Visual Effects (3 )

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

Page 104: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

testBrowseEventsMenuButton: function() { with(this) { useMockerFor(function(mocker) { mocker.within(Effect).mock('Fade', 'Appear'); browseEventsButtonClicked(); verify(Effect.Fade)($('myEventScreen')); verify(Effect.Appear)($('browseEventsScreen'), {queue: 'end'}); }); assert(Element.hasClassName($('browseEventsMenuItem'), ELO.SELECTED)); assert(!Element.hasClassName($('myEventMenuItem'), ELO.SELECTED)); assert(Element.hasClassName($('browseEventsScreen'), ELO.SHOWING)); assert(!Element.hasClassName($('myEventScreen'), ELO.SHOWING));}},

Unit Testing Visual Effects (3 )

function crossover(from, to) {Effect.Fade(from);Effect.Appear(to, {queue: 'end'});

}

Page 105: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Google Maps

testDisplaySimpleMapOnline: function() { with(this) { useMockerFor(function (mocker) { mocker.mock(GMap2); var gmap = {focus: {longitude: 1.234, lattitude: 4.321}, zoom: 5, hasEventIcon: false}; ELO.GMap.display(gmap); verify(GMap2.prototype.initialize)($('map')); verify(GMap2.prototype.setCenter)(new GLatLng(4.321, 1.234), 5); });}}

Page 106: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAA[...]thcBeqofUC2FaJTlA">

</script>

Unit Testing Google Maps

testDisplaySimpleMapOnline: function() { with(this) { useMockerFor(function (mocker) { mocker.mock(GMap2); var gmap = {focus: {longitude: 1.234, lattitude: 4.321}, zoom: 5, hasEventIcon: false}; ELO.GMap.display(gmap); verify(GMap2.prototype.initialize)($('map')); verify(GMap2.prototype.setCenter)(new GLatLng(4.321, 1.234), 5); });}}

Page 107: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Google Maps

testDisplaySimpleMapOnline: function() { with(this) { useMockerFor(function (mocker) { mocker.mock(GMap2); var gmap = {focus: {longitude: 1.234, lattitude: 4.321}, zoom: 5, hasEventIcon: false}; ELO.GMap.display(gmap); verify(GMap2.prototype.initialize)($('map')); verify(GMap2.prototype.setCenter)(new GLatLng(4.321, 1.234), 5); });}}

var GMap2 = Class.create({ initialize: function() {}, setCenter: function() {}});

var GLatLng = Class.create({ initialize: function(lattitude, longitude) { this.lattitude = lattitude; this.longitude = longitude; }});

Page 108: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Ajax FacadetestSuccessfulRequest: function() { with(this) {

ELO.AjaxResponses = {myResponse: function(params) {}};mock(Ajax, ELO.AjaxResponses).andDo(function() {

when(Ajax.Request)(ELO.REQUEST_URL, any()).thenDo(function(url, opts) {opts.onSuccess( {responseJSON: [{name: "myResponse", params: [1, 2]}]});

});optsMatcher = { match: function(opts) {

return (opts.postBody == Object.toJSON({name: 'myRequest', params: ['p1', 'p2']}));

}};new ELO.AjaxRequest('myRequest', ['p1', 'p2']);verify(Ajax.Request)(ELO.REQUEST_URL, optsMatcher);verify(ELO.AjaxResponses.myResponse)([1, 2]);

});}}

Page 109: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Ajax FacadetestSuccessfulRequest: function() { with(this) {

ELO.AjaxResponses = {myResponse: function(params) {}};mock(Ajax, ELO.AjaxResponses).andDo(function() {

when(Ajax.Request)(ELO.REQUEST_URL, any()).thenDo(function(url, opts) {opts.onSuccess( {responseJSON: [{name: "myResponse", params: [1, 2]}]});

});optsMatcher = { match: function(opts) {

return (opts.postBody == Object.toJSON({name: 'myRequest', params: ['p1', 'p2']}));

}};new ELO.AjaxRequest('myRequest', ['p1', 'p2']);verify(Ajax.Request)(ELO.REQUEST_URL, optsMatcher);verify(ELO.AjaxResponses.myResponse)([1, 2]);

});}}

Page 110: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Unit Testing Ajax FacadetestSuccessfulRequest: function() { with(this) {

ELO.AjaxResponses = {myResponse: function(params) {}};mock(Ajax, ELO.AjaxResponses).andDo(function() {

when(Ajax.Request)(ELO.REQUEST_URL, any()).thenDo(function(url, opts) {opts.onSuccess( {responseJSON: [{name: "myResponse", params: [1, 2]}]});

});optsMatcher = { match: function(opts) {

return (opts.postBody == Object.toJSON({name: 'myRequest', params: ['p1', 'p2']}));

}};new ELO.AjaxRequest('myRequest', ['p1', 'p2']);verify(Ajax.Request)(ELO.REQUEST_URL, optsMatcher);verify(ELO.AjaxResponses.myResponse)([1, 2]);

});}}

Page 111: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Automatisierung der JavaScript Unit Tests

Page 112: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Heuristiken für JavaScript Unit Tests

• Entferne alle Abhängikeiten zum Web

• Man benötigt weniger explizite Entkopplung in JavaScript als in Java

• Vermeide Mocks, wenn du die API nicht gut kennst!

• Lass deine Unit Tests auf unterschiedlichen JS-Implementierungen laufen (z.B. Browser & Rhino)

Page 113: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ELO: Akzeptanztests

Page 114: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ELO: Akzeptanztests

• Benutze FitNesse für fachlich-orientierte Szenario-Tests

Page 115: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ELO: Akzeptanztests

• Benutze FitNesse für fachlich-orientierte Szenario-Tests

• Verbinde FitNesse mit der Applikation

‣ via Selenium RC

‣ (via HtmlUnit)

‣ direkt über die Business-Facade

Page 116: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

ELO: Akzeptanztests

• Benutze FitNesse für fachlich-orientierte Szenario-Tests

• Verbinde FitNesse mit der Applikation

‣ via Selenium RC

‣ (via HtmlUnit)

‣ direkt über die Business-Facade• Ziel: Mache die Testfälle vom WEB

unabhängig

Page 117: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 118: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 119: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

public class SeleniumELOFacade implements ELOFacade...

public boolean startFresh() throws Exception { selenium = SeleniumFacade.openBrowser(browser, url); selenium.open(url); waitUntilIdle(); return true; }

private void waitUntilIdle() { waitForElementToDisappear(IMG_BUSY_INDICATOR); }

public boolean addParticipantFrom(String location) { changeScreen(MENU_MY_EVENT); selenium.type(INPUT_NEW_LOCATION, location); selenium.click(BUTTON_ADD_PARTICIPANT_FROM); waitUntilIdle(); return true; }

Page 120: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us

ServletsJackson

HTML

JSON

Google Maps

Page 121: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us

ServletsJackson

HTML

JSON

Google Maps

FitNesse-Server

Page 122: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us

ServletsJackson

HTML

JSON

Google Maps

FitNesse-Server

Selenium RC-Server

Page 123: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us

ServletsJackson

HTML

JSON

Google Maps

FitNesse-Server

Selenium RC-Server

Page 124: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us

ServletsJackson

HTML

JSON

Google Maps

FitNesse-Server

Selenium RC-Server

Page 125: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

HTTP

Das Web

prototypescript.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

Page 126: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

Das Web

prototypescript.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

Page 127: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 128: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 129: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

public class SeleniumELOFacade implements ELOFacade...

public List<ParticipantAddress> getParticipantsAddresses() { changeScreen(MENU_MY_EVENT); List<ParticipantAddress> addresses = new ArrayList<ParticipantAddress>(); SeleniumXPathIterator i = new SeleniumXPathIterator(selenium, "//ul[@id='participantsAddresses']/li"); for (String eachXPath : i) { String address = selenium.getText("xpath=" + eachXPath + "/span[1]"); int count = getCount(eachXPath); addresses.add(new ParticipantAddress(address, count)); } return addresses; }

Page 130: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 131: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 132: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

public class SeleniumELOFacade implements ELOFacade...

public EventPlanningMap map() { changeScreen(MENU_MY_EVENT); SeleniumTableRetriever tableRetriever = new SeleniumTableRetriever(selenium, TABLE_MAP_VALUES); Map<String, List<String>> mapValues = tableRetriever.asMap(); MapLocation focus = ... int zoom = ... EventPlanningMap gmap = new EventPlanningMap(focus, zoom); eventPlanningMap.setHasEventIcon(hasEventIcon); addMarkersToMap(eventPlanningMap, mapValues); return gmap; }

Page 133: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 134: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile
Page 135: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

public class SetUpGeocoder extends SetUpFixture... private final WebSimulatorBackdoor backdoor; public void queryLongitudeLattitudeAddress(String query, String longitude, String lattitude, String address) { backdoor.addFakeGeoCoding(query, lattitude, longitude, address); }

Page 136: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

public class SetUpGeocoder extends SetUpFixture... private final WebSimulatorBackdoor backdoor; public void queryLongitudeLattitudeAddress(String query, String longitude, String lattitude, String address) { backdoor.addFakeGeoCoding(query, lattitude, longitude, address); }

public class WebSimulatorBackdoor extends WebBackdoor...

public void addFakeGeoCoding(String query, String lattitude, String longitude, String address) { Map<String, String> params = new HashMap<String, String>(); params.put("query", query); params.put("address", address); params.put("longitude", longitude); params.put("lattitude", lattitude); executeRequest("addFakeGeoCoding", params); }

Page 137: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

Das Web

prototypescript.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

Page 138: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat REST

Mash-Up API

Das Web

prototypescript.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

Page 139: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat

Mash-Up API

Das Web

prototypescript.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

Page 140: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Web ClientHTML + CSS

ServerTomcat

Mash-Up API

Das Web

prototypescript.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

Page 141: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Sind wir jetztWeb-unabhängig?

Page 142: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Sind wir jetztWeb-unabhängig?

Noch nicht!

Page 143: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Das Web

Web ClientHTML + CSS

ServerTomcat

Mash-Up APIprototype

script.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

Page 144: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Das Web

Web ClientHTML + CSS

ServerTomcat

Mash-Up APIprototype

script.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

•JS API files

Page 145: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Das Web

Web ClientHTML + CSS

ServerTomcat

Mash-Up APIprototype

script.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

•JS API files•Static images

Page 146: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Das Web

Web ClientHTML + CSS

ServerTomcat

Mash-Up APIprototype

script.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

•JS API files•Static images•The map images in pieces

Page 147: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Das Web

Web ClientHTML + CSS

ServerTomcat

Mash-Up APIprototype

script.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

•JS API files•Static images•The map images in pieces

Page 148: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Das Web

Web ClientHTML + CSS

ServerTomcat

Mash-Up APIprototype

script.aculo.us

ServletsJackson

Google Maps

FitNesse-Server

Selenium RC-Server

WebSimulatorProxy

•JS API files•Static images•The map images in pieces

Page 149: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Die Tests über die Business-Facade zu fahren...

... ist viel weniger Umstand!

... ist stabiler!

Page 150: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Die Tests über die Business-Facade zu fahren...

... ist viel weniger Umstand!

... ist stabiler!Man benötigt...

Page 151: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Die Tests über die Business-Facade zu fahren...

... ist viel weniger Umstand!

... ist stabiler!Man benötigt...

‣ keinen Servlet-Container für das Deployment

Page 152: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Die Tests über die Business-Facade zu fahren...

... ist viel weniger Umstand!

... ist stabiler!Man benötigt...

‣ keinen Servlet-Container für das Deployment

‣ keinen Web-Browser

Page 153: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Die Tests über die Business-Facade zu fahren...

... ist viel weniger Umstand!

... ist stabiler!Man benötigt...

‣ keinen Servlet-Container für das Deployment

‣ keinen Web-Browser

‣ kein Selenium RC

Page 154: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Jar FileELOServerFacade<<interface>>

FitNesse-Server

WebSimulatorProxy

Page 155: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Laufzeiten der Fitnesse-Tests

Page 156: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Laufzeiten der Fitnesse-Tests

• Mit Selenium-RC: 108 sec

Page 157: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Laufzeiten der Fitnesse-Tests

• Mit Selenium-RC: 108 sec

• Mit Business-Fassade: 8 sec

Page 158: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Laufzeiten der Fitnesse-Tests

• Mit Selenium-RC: 108 sec

• Mit Business-Fassade: 8 sec

• (Mit HtmlUnit: 30 sec)

Page 159: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Heuristiken für Ajax Akzeptanztests

• Lass wenige Tests mit dem echten Browser laufen

‣ Lass diese Tests aber auf allen Ziel-Browsern laufen

• Der Großteil der Tests sollte die Business-Fassade verwenden

• Strebe Web-Unabhängigkeit an

‣ Aber übertreibe dabei nicht!

Page 160: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Testen der extternen Dienste

• Wie stabil ist die fremde API?

• Wie groß ist die Verfügbarkeit

Page 161: 28. November 2008Flex Gears GWT MooTools ColdFusion Java JavaFX Grails YUI GoogleMaps Microformat Firebug Greasemonkey SVG Video Sound Accessibility Security XHR JavaScript Mobile

Fazit

• Testgetriebenes Ajax ist machbar, aber

‣ die Tests werden durch starke Asynchronität geprägt

‣ das clientseitiges Toolset ist noch nicht zufriedenstellend

• Starke Verteilung im Web 2.0

‣ viel Aufwand für Mocks und Simulationen

‣ eventuell „Live Überwachung“ notwendig

• Teste mit allen Ziel-Browsern!