FuncUnit<br />Crash Course in JavaScript Functional Testing<br />by Brian Moschel<br />October 2010<br />
We’re Gonna Test Srchr<br />
The Testing Landscape<br />*<br />
What the FuncUnit?<br />+<br />+<br />+<br />=<br />
Want to Functional Test Your JS App?<br />
…with FuncUnit?<br />
Testing === Pain<br />1. Barriers to Entry<br />2. Completely Foreign APIs<br />3. Debugging Across Platforms<br />4. Low ...
Getting Started Is Annoying<br />arr<br />
Download & Start Testing<br />arr<br />
You Know I Don’t Speak Spanish!<br />arr<br />
arr<br />SystemUtil.Run"iexplore","http://www.yahoomail.com"<br />Set g=Browser("name:=Yahoo.*").Page("title:=Yahoo.*")<br...
But I Do Speak jQuery<br />arr<br />
arr<br />test("JavaScript results",function(){<br />  S('input').click().type("JavaScript")<br />  // wait until we have s...
Cross Platform Debugging?<br />arr<br />
Firebug, Please<br />arr<br />
Your Tests Don’t Do What You Think<br />arr<br />
arr<br />$(“input”).bind(“focus”, function(ev){<br />  if ( $(this).val() == "Search API" ) {<br />    $(this).val("").rem...
Accurate Event Simulation: Trust Your Tests<br />arr<br />syn.js<br />
QA vs. Developers<br />arr<br />
QA is Your Friend<br />arr<br />
A Tested App in 15 Minutes<br />arr<br /> Install<br /> Learn the API<br /> Write a test<br /> Debug tests<br /> Run tests...
Want more?<br />arr<br />http://funcunit.com<br />http://jupiterjs.com<br />http://javascriptmvc.com<br />brian.moschel@gm...
Upcoming SlideShare
Loading in …5
×

FuncUnit

5,245 views

Published on

A Crash Course in JavaScript Functional Testing

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,245
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
64
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • How many of you write jQuery applications? How many of you test them? How many of you enjoy testing them? You&apos;re in the right place.Honestly this project is so far ahead of the competition when it comes to functional testing, if you’re not convinced when I’m done, I’ve done a terrible job.
  • Here is a high level overview of what’s out there right now. A bunch of tools written for server side developers who make web pages. Qunit doesn’t really count because its not functional testing.Logic in web applications are moving more into the rich client. These tools are designed for the time when most logic happened on the server after a click or form submission. FuncUnit is designed for the world of rich client web apps.FuncUnit is to Functional testing what jQuery was to JavaScript development. It provides an approachable way to write maintainable cross browser tests.
  • Funcunit is built on the shoulders of giants. Under the hood, it uses Selenium, Qunit, jQuery, Syn.js (a synthetic event simulation library), env.js, and Rhino.
  • We love Selenium. But it wasn’t built for JS developers or by JS developers.
  • FuncUnit will make testing fun, easy, and approachable. It was built by jQuery developers for jQuery developers, and in that sense is the first functional testing tool of its kind.
  • Everyone simply hates testing. Why is that?
  • Setup, Installation, Cost, Difficult APIsQTP costs 5K per license
  • No setup, open source, free, no installation
  • APIs are another language to learn
  • APIs are another language to learn
  • LeveragesjQuery knowledge
  • LeveragesjQuery knowledge
  • Run tests only one way....scripted via serverDebugging across platforms, languagesNo firebug breakpoints
  • Run tests in browserSet firebug breakpoints
  • brittle/low fidelitydoesn’t corectly simulate browser JS eventsNot designed for crazy JS apps, designed for web apps with HTML and navigation
  • For example: selenium clicks simulate a click event, in browser this actually sends a focus event if you’re clicking an input. If your JS code depends on this focus, it will break. There are a LOT of cases like this. Syn was developed to accurately simulate everything possible
  • syn.js, a library that simulates high fidelity browser eventsGoes to extra trouble to make sure each browser works as intended (recorder app that checks how certain keypresses work)TheSizzle of event simulationPicked up by Mootools testing team also
  • Complex scenario to reproduce the issueCan’t send you a URL to easily repo locally
  • Send a URL to a test caseDevs write and maintain tests!
  • Tag line: Get yelled at less
  • FuncUnit

    1. 1. FuncUnit<br />Crash Course in JavaScript Functional Testing<br />by Brian Moschel<br />October 2010<br />
    2. 2. We’re Gonna Test Srchr<br />
    3. 3. The Testing Landscape<br />*<br />
    4. 4. What the FuncUnit?<br />+<br />+<br />+<br />=<br />
    5. 5. Want to Functional Test Your JS App?<br />
    6. 6. …with FuncUnit?<br />
    7. 7. Testing === Pain<br />1. Barriers to Entry<br />2. Completely Foreign APIs<br />3. Debugging Across Platforms<br />4. Low Fidelity Event Simulation<br />5. QA and Developers Can’t Communicate<br />
    8. 8. Getting Started Is Annoying<br />arr<br />
    9. 9. Download & Start Testing<br />arr<br />
    10. 10. You Know I Don’t Speak Spanish!<br />arr<br />
    11. 11. arr<br />SystemUtil.Run"iexplore","http://www.yahoomail.com"<br />Set g=Browser("name:=Yahoo.*").Page("title:=Yahoo.*")<br />g.WebEdit("name:=login").Set "aaa"<br />g.WebEdit("name:=passwd").SetSecure "bbb"<br />g.WebButton("name:=Sign In").Click<br />g.Link("name:=Inbox.*",<br />"html id:=WelcomeInboxFolderLink").Click<br />g.Link("name:=Sign Out").Click<br />
    12. 12. But I Do Speak jQuery<br />arr<br />
    13. 13. arr<br />test("JavaScript results",function(){<br /> S('input').click().type("JavaScript")<br /> // wait until we have some results<br /> S('.autocomplete_item').visible(function(){<br />equals( S('.autocomplete_item').size(), 5, "there are 5 results")<br />})<br />});<br />
    14. 14. Cross Platform Debugging?<br />arr<br />
    15. 15. Firebug, Please<br />arr<br />
    16. 16. Your Tests Don’t Do What You Think<br />arr<br />
    17. 17. arr<br />$(“input”).bind(“focus”, function(ev){<br /> if ( $(this).val() == "Search API" ) {<br /> $(this).val("").removeClass('notFocused')<br /> }<br />})<br />
    18. 18. Accurate Event Simulation: Trust Your Tests<br />arr<br />syn.js<br />
    19. 19. QA vs. Developers<br />arr<br />
    20. 20. QA is Your Friend<br />arr<br />
    21. 21. A Tested App in 15 Minutes<br />arr<br /> Install<br /> Learn the API<br /> Write a test<br /> Debug tests<br /> Run tests<br /> Hand off to QA<br />http://github.com/jupiterjs/srchr<br />
    22. 22. Want more?<br />arr<br />http://funcunit.com<br />http://jupiterjs.com<br />http://javascriptmvc.com<br />brian.moschel@gmail.com<br />@jupiterjs<br />@brianmoschel<br />@funcunit<br />

    ×