Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
by Jon Kruger
$("#Name").text("jon");
   Object oriented programming   Readable code   Small classes/files   Loosely coupled   Unit testing                ...
   Cucumber, SpecFlow, Selenium, Watir, etc.
   Inject HTML in our testsdescribe("Testing by injecting HTML into jQuery", function(){  it("should work, but its kind o...
   ?????????????????
   Tests a small unit of functionality   Must run fast   Isolate external dependencies
   How do we deal with the DOM   How do we deal with AJAX calls   How do we run the tests
DOMJavaScript      AJAX Server
DOMJavaScript      AJAX Server
DOM      ???????JavaScript      AJAX Server
DOM        Fake DOM       ???????  JavaScript            AJAX      Server
http://github.com/jonkruger/jsview
FTW!!!!
function Client(element, view){  if (view == null)    view = new jQueryView("Client", element);    registerObjectPropertie...
function Client(element, view){  if (view == null)    view = new jQueryView("Client", element);    registerObjectPropertie...
function Client(element, view){  if (view == null)    view = new jQueryView("Client", element);    registerList(this, view...
<html><head>  <script language="javascript">    $(document).ready(function()    {      entryForm = new EntryForm($("#Entry...
Slides: http://jonkruger.com/blogJSView: http://github.com/jonkruger/jsviewJasmine: http://pivotal.github.com/jasmine     ...
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Upcoming SlideShare
Loading in …5
×

Testable, Object-Oriented JavaScript

3,686 views

Published on

An idea of how to make JavaScript testable, presented at Stir Trek 2011. The world of JavaScript frameworks has changed greatly since then, but I still agree with the concepts.

Published in: Technology
  • Be the first to comment

Testable, Object-Oriented JavaScript

  1. 1. by Jon Kruger
  2. 2. $("#Name").text("jon");
  3. 3.  Object oriented programming Readable code Small classes/files Loosely coupled Unit testing F
  4. 4.  Cucumber, SpecFlow, Selenium, Watir, etc.
  5. 5.  Inject HTML in our testsdescribe("Testing by injecting HTML into jQuery", function(){ it("should work, but its kind of a pain", function() { element = $(<div>text</div>); element.text("some more text"); expect(element.text()).toEqual("some more text"); });});
  6. 6.  ?????????????????
  7. 7.  Tests a small unit of functionality Must run fast Isolate external dependencies
  8. 8.  How do we deal with the DOM How do we deal with AJAX calls How do we run the tests
  9. 9. DOMJavaScript AJAX Server
  10. 10. DOMJavaScript AJAX Server
  11. 11. DOM ???????JavaScript AJAX Server
  12. 12. DOM Fake DOM ??????? JavaScript AJAX Server
  13. 13. http://github.com/jonkruger/jsview
  14. 14. FTW!!!!
  15. 15. function Client(element, view){ if (view == null) view = new jQueryView("Client", element); registerObjectProperties(this, view, [Username]);}The Client class now has the following methods:getUsername whenUsernameChangessetUsername whenUsernameClickedshowUsername whenUsernameIsClickedhideUsername whenUsernameGainsFocusclickUsername whenUsernameLosesFocuspressKeyInUsername whenKeyIsPressedInUsernamekeyDownInUsername whenKeyDownInUsernameenableUsernamedisableUsername
  16. 16. function Client(element, view){ if (view == null) view = new jQueryView("Client", element); registerObjectProperties(this, view, [SendButton]);}The Client class now has the following methods:showSendButton whenSendButtonClickedhideSendButton whenSendButtonIsClickedclickSendButtonenableSendButtondisableSendButton
  17. 17. function Client(element, view){ if (view == null) view = new jQueryView("Client", element); registerList(this, view, [Tweets]);}The Client class now has the following methods:appendToTweetsprependToTweetsgetTweets
  18. 18. <html><head> <script language="javascript"> $(document).ready(function() { entryForm = new EntryForm($("#EntryForm")); }); </script></head><body> <div id="EntryForm"> First Name:<br/> <input type="text" class="EntryForm-FirstName" /><br/> <br/> Last Name:<br/> <input type="text" class="EntryForm-LastName" /> </div></body></html>
  19. 19. Slides: http://jonkruger.com/blogJSView: http://github.com/jonkruger/jsviewJasmine: http://pivotal.github.com/jasmine mail: jon@jonkruger.com Twitter: @JonKruger Blog: http://jonkruger.com/blog

×