![Developing and testing Ajax components Ignacio Coloma [email_address] http://extrema-sistemas.com](https://image.slidesharecdn.com/testing-ajax-components-090624042308-phpapp02/85/Developing-and-testing-ajax-components-1-320.jpg)
![User-perceived performance CSS at the top downloaded in parallel JS at the bottom downloaded sequentially <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loom Demo - </title> <link href="/loomdemo/css/yaml-3.0.5/core/base.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_vlist.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_slidingdoor.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/screen/content_default.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/core/print_base.css" rel="stylesheet" type="text/css"></link> <!--[if IE]><link href="/loomdemo/css/yaml-3.0.5/core/iehacks.css" rel="stylesheet" type="text/css"></link><![endif]--> </head> <body> <div id="page_margins"> <div id="page"> <div id="header"> <div id="topleft"> <a href="/loomdemo/" title="Demo home">Demo home</a> | <a href="http://loom.extrema-sistemas.org/" title="Loom home">Loom home</a> | <a href="http://loom.extrema-sistemas.org/get-documentation" title="Loom doc">Loom doc</a> </div> <div id="topcenter"> Change language: ( <a href="/loomdemo/support/Locale.action?locale=en" hreflang="en" class="selected">english</a> | <a href="/loomdemo/support/Locale.action?locale=es" hreflang="es" class="">español</a> ) </div> <div id="topnav"> <a href="/loomdemo/other/ViewJspSource.action?jspFilename=/WEB-INF/jsp/ebanking/listAll.jsp&actionName=org.loom.demo.action.ebanking.MortgagesAction" class="strong" title="View source">View source</a> </div> </div> <div id="main"> < <div id="col2"> <div id="col2_content" class="clearfix"> <div id="tips"> <div class="hide-fouc important">Tips are only available with javascript turned on</div> </div> </div> </div> <div id="col3"> <div id="col3_content" class="clearfix"> <form action="/loomdemo/ebanking/Mortgages.action"> <div class="buttonBar"> <input type="submit" value="Delete" class="submit" /> </div> <table id="row"> <thead> <tr> <th class="first"></th> <th class="sortable"> <a href="Mortgages.action?sort=id&event=listAll&dir=asc">ID</a></th> <th class="name sortable"> <a href="Mortgages.action?sort=name&event=listAll&dir=asc">Name</a></th> <th class="sortable"> <a href="Mortgages.action?sort=address&event=listAll&dir=asc">Address</a></th> <th class="date sortable"> <a href="Mortgages.action?sort=principalLoanBalance&event=listAll&dir=asc">Loan</a></th> <th></th> <th class="date sortable"> <a href="Mortgages.action?sort=creationDate&event=listAll&dir=asc">Creation date</a></th></tr></thead> <tbody> <tr class="empty"><td colspan="7">Nothing found to display.</td></tr> </tbody> </table> <input type="hidden" name="__source" value="/WEB-INF/jsp/ebanking/listAll.jsp"/> <input type="hidden" name="event" value="delete"/> </form> <!-- IE Column Clearing --> <div id="ie_clearing">   </div> </div> </div> </div> <div id="footer"> <p style="float:right">Layout based on <a href="http://www.yaml.de/en/home.html">YAML</a></p> <p>You are currently one of the 1 users browsing this demo site. - <a href="/loomdemo/about.jsp" title="about this demo site">about this demo site</a></p> <p>© 2007 Extrema Sistemas de Información - <a href="http://extrema-sistemas.com/en/legal" title="Terms of use">Terms of use</a> - <a href="http://extrema-sistemas.com/en/contact" title="Go to the contact form">Contact</a> - <a href="http://extrema-sistemas.com" title="Go to Extrema home">Extrema home</a> </p> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script> <script src="/loomdemo/js/loom-1.0-SNAPSHOT/loom.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects" type="text/javascript"> </script> <script src="/loomdemo/js/tips.js" type="text/javascript"></script> </body> </html>](https://image.slidesharecdn.com/testing-ajax-components-090624042308-phpapp02/85/Developing-and-testing-ajax-components-10-320.jpg)
Developing and testing ajax components
2 likes2,085 views
The document discusses developing and testing JavaScript components. It recommends: 1. Generating clean HTML and JavaScript code separately to maximize flexibility and performance. HTML serves as the contract between server and client-side code. 2. Testing JavaScript code with frameworks like QUnit or YUI Test. Tests should make asynchronous requests synchronous and wait for responses. 3. Integrating unit tests into a test suite that runs across browsers to catch errors and failures. Integration tests should confirm the server generates the expected HTML.
More Related Content
Similar to Developing and testing ajax components(20)
Developing and testing ajax components
- 1. Developing and testingAjax components Ignacio Coloma [email_address] http://extrema-sistemas.com
- 2. The goal Develop and test javascript components
- 3. Why? We usuallyget lost in the details integrating Ajax with java
- 4. Two types ofweb applications RIA vs REST (You should choose)
- 5. REST misuse Thisis not an iPhone
- 6. RIA misuse Thisis not a knife
- 7. Don't forget thesearch engine! You may call it SEO , We call it
- 8. REST and unobtrusivejavascript Old: <input onchange=”something()”> New: <input id=”price”> <script> $('price').observe('change', something); </script>
- 9. Progressive enhancement Design for javascript-less Add enhancements if javascript is present.
- 10. User-perceived performance CSSat the top downloaded in parallel JS at the bottom downloaded sequentially <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loom Demo - </title> <link href="/loomdemo/css/yaml-3.0.5/core/base.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_vlist.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_slidingdoor.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/screen/content_default.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/core/print_base.css" rel="stylesheet" type="text/css"></link> <!--[if IE]><link href="/loomdemo/css/yaml-3.0.5/core/iehacks.css" rel="stylesheet" type="text/css"></link><![endif]--> </head> <body> <div id="page_margins"> <div id="page"> <div id="header"> <div id="topleft"> <a href="/loomdemo/" title="Demo home">Demo home</a> | <a href="http://loom.extrema-sistemas.org/" title="Loom home">Loom home</a> | <a href="http://loom.extrema-sistemas.org/get-documentation" title="Loom doc">Loom doc</a> </div> <div id="topcenter"> Change language: ( <a href="/loomdemo/support/Locale.action?locale=en" hreflang="en" class="selected">english</a> | <a href="/loomdemo/support/Locale.action?locale=es" hreflang="es" class="">español</a> ) </div> <div id="topnav"> <a href="/loomdemo/other/ViewJspSource.action?jspFilename=/WEB-INF/jsp/ebanking/listAll.jsp&actionName=org.loom.demo.action.ebanking.MortgagesAction" class="strong" title="View source">View source</a> </div> </div> <div id="main"> < <div id="col2"> <div id="col2_content" class="clearfix"> <div id="tips"> <div class="hide-fouc important">Tips are only available with javascript turned on</div> </div> </div> </div> <div id="col3"> <div id="col3_content" class="clearfix"> <form action="/loomdemo/ebanking/Mortgages.action"> <div class="buttonBar"> <input type="submit" value="Delete" class="submit" /> </div> <table id="row"> <thead> <tr> <th class="first"></th> <th class="sortable"> <a href="Mortgages.action?sort=id&event=listAll&dir=asc">ID</a></th> <th class="name sortable"> <a href="Mortgages.action?sort=name&event=listAll&dir=asc">Name</a></th> <th class="sortable"> <a href="Mortgages.action?sort=address&event=listAll&dir=asc">Address</a></th> <th class="date sortable"> <a href="Mortgages.action?sort=principalLoanBalance&event=listAll&dir=asc">Loan</a></th> <th></th> <th class="date sortable"> <a href="Mortgages.action?sort=creationDate&event=listAll&dir=asc">Creation date</a></th></tr></thead> <tbody> <tr class="empty"><td colspan="7">Nothing found to display.</td></tr> </tbody> </table> <input type="hidden" name="__source" value="/WEB-INF/jsp/ebanking/listAll.jsp"/> <input type="hidden" name="event" value="delete"/> </form> <!-- IE Column Clearing --> <div id="ie_clearing">   </div> </div> </div> </div> <div id="footer"> <p style="float:right">Layout based on <a href="http://www.yaml.de/en/home.html">YAML</a></p> <p>You are currently one of the 1 users browsing this demo site. - <a href="/loomdemo/about.jsp" title="about this demo site">about this demo site</a></p> <p>© 2007 Extrema Sistemas de Información - <a href="http://extrema-sistemas.com/en/legal" title="Terms of use">Terms of use</a> - <a href="http://extrema-sistemas.com/en/contact" title="Go to the contact form">Contact</a> - <a href="http://extrema-sistemas.com" title="Go to Extrema home">Extrema home</a> </p> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script> <script src="/loomdemo/js/loom-1.0-SNAPSHOT/loom.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects" type="text/javascript"> </script> <script src="/loomdemo/js/tips.js" type="text/javascript"></script> </body> </html>
- 11. Custom JSP tagWrite HTML
- 12. Connect javascriptautocompleter <myapp:autocompleter name=”parent” action="Entries" event="getParentCandidates" />
- 13. First attempt Theserver generates HTML + javascript: <input type=”text” name=”parent” id=”parent” /> <script> new Autocompleter($(“parent”), { url: “http://localhost/getCandidates.json” }) </script>
- 14. Problems The idattribute is required or must be generated (fluff)
- 15. The javascript codeis generated by the server (inflexible)
- 16. Some libraries must be loaded before the HTML (really bad for performance)
- 17. Too many <script>tags (harder to debug and hurts performance)
- 18. Better solution Generatejust the HTML code : <input type=”text” name=”parent” class=”autocompleter” url=“http://localhost/getCandidates.json” />
- 19. Add static javascriptcode Add javascript code as needed
- 20. This is your javascript code , not generated by the server: $$('input.autocompleter').each(function(e) { new Autocompleter(e, { url: e.getAttribute('url'); }); });
- 21. Benefits The idattribute is not required
- 22. All javascript codeis together at the end of the page or inside external javascript files
- 23. Maximum javascriptflexibility
- 24. Cleaner code thatis cacheable
- 25. Conclusion: HTML asthe API HTML is the contract between your java server and your javascript code .
- 26. Test your codeJavascript code should also be tested
- 27. Three ways oftesting GWT – java code translated to javascript
- 28. Java-driven tests: WebDriver, Selenium
- 29.
- 30. Broad choice JQuery: Qunit
- 31.
- 32. Dojo : D.O.H(Dojo Objective Harness)
- 33. MooTools : ClientcideTest Framework
- 34. YUI : YUITest
- 35. Others : FireUnit,TestMonkey...
- 36. Javascript-driven tests 1:Static HTML page with javascript (manual test)
- 37. 2: Add javascript tests
- 38. 3: Add test suite
- 39. 1: Static HTMLpage <html> <body> <input type=”text” name=”parent” id=”foo” class=”autocompleter” url=“mock-candidates.json” /> <script> var auto = new Autocompleter($('foo'), { url: e.getAttribute('url'); }); </script> </body> </html>
- 40. Testing with IEAdd the mark of the web to bypass the IE security warning <!DOCTYPE> <!-- saved from url=(0014)about:internet --> <html>
- 41. Testing with IE7+ Enable XHR access to the local filesystem using IE 7 if (Prototype.Browser.IE && XMLHttpRequest) { XMLHttpRequest = function() { return new ActiveXObject("Microsoft.XMLHTTP"); } }
- 42. 2: Add javascripttests Identify functions that can be tested easily: var test = new Test.Unit.Runner({ testFooBar: function() { this.assertVisible(auto.element); this.assertEqual(120, auto.element.getWidth()); this.assertEqual('foo', auto.FooBar()); } });
- 43. Make synchronous Ajaxcalls Add a flag to disable asynchronous XHR in your components var tabs = new loom.ui.Tabs($('tabs'), { ajaxOptions: { asynchronous: false } }); new Test.Unit.Runner({ testSelectAjaxTab: function() { tabs.selectTab($('a4')); this.assertEqual('foo', $('tab4').innerHTML.toLowerCase()); } });
- 44. Make your testwait() Invoking window.settimeout() will not work! testThrottle: function() { var total = 0; var func = function(v) { total += v; }.throttle(1); for (var i = 0; i < 10; i++) { func(10); } wait(1000, function() { this.assertEqual(10, total); }.bind(this)); }
- 45. 3: Add testsuite Supported by some test frameworks
- 46. Open allsupported browsers for the host environment
- 47. Launch allthe configured test pages
- 48. Inform about the results
- 49. Integration tests Onceall static tests have passed, you should test integration with the server .
- 50. Just confirm that the server generates the expected HTML contract .
- 51. Testing Flash components1: Test HTML + flash + mock javascript
- 52. 2: Test HTML + flash + real javascript
- 53. 3: Integration test
- 54. Thanks Ignacio Coloma[email_address] http://icoloma.blogspot.com http://extrema-sistemas.com
Editor's Notes
- #6 This is the typical look of an application that starts adding a couple of js features and ends up like the Loch Ness Monster. Ajax is not like XP, it should not be improvised.
- #8 Cuando se elige entre REST y RIA, tener en cuenta que a una aplicación en intranet le da igual estar indexada (y otros casos como Google wave,por ser contenidos de corta caducidad), pero al resto frecuentemente le hace falta indexarse. Hay un museo en Madrid que tiene en torno al 50% de accesos desde google. Para nosotros es el 75%.
- #16 Lo puedo poner en una pagina o en un script general
- #23 Puedo probar manualmente con firebug Puedo modificar lo que pruebo Puedo inspeccionarlo todo Uso un fichero local