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

2,770
-1

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,770
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • How many of you like writing JavaScript as much as you do your primary language?Why don’t you like it as much?How many of you write tests for your JavaScript? - What kinds of things are you testing? (logic code, injecting HTML, DOM interactions, ajax, etc.)How many of you have written JavaScript with OO objects?-Why/why not?
  • - Browser inconsistencies (e.g. document.getElementById(), document.all)- We used to not have jQuery
  • Many more single-page client-side rich applications written in JavaScriptYou use these and think they are awesome (Gmail, Google Maps, Outlook Web Access newer versions)HTML5 will allow you to do things that you couldn’t do before in the browser (store data locally, richer graphics, etc.)Mobile websites – you don’t need to build apps for 4 mobile platformsIf you had to do one of these, how would you do it?
  • -What problems do we have when we write JavaScript like this?-Hard to read-Breaks when you change DOM attributes (id, class, etc.)Maybe you move the mess into a separate file, in which case it’s still a mess (you just don’t have to look at it as much)You can do this for simple JavaScript and get away with it, of course (as long as you don’t want to test it with a JavaScript test)
  • What problems would you have if you wanted to write tests for this code?-You would have to have the DOM for the selector to work!-You have to know specifics about what your DOM is going to look like (to some extent)-We might not be able to use an ID selector because we might need to have something else use the id property (e.g. 3rd party controls, old WebForms)
  • We need to do something about this:
  • -These tools are good for end-to-end testing-They won’t help you design your JavaScript-Sometimes it’s easier to test scenarios by testing JavaScript (same reason you write unit tests in server-side code vs. using the browser tools)
  • We need a better way. I want to be able to write my tests first, before I even know what my HTML page looks like.
  • -Reads like RSpec-Ruby gem-Community involvement
  • We have an interface between JavaScript and the server (AJAX), but what is the interface between the JavaScript and the DOM?
  • Typical JavaScript tends to have the JavaScript very tightly coupled to the DOM.
  • How do we separate JavaScript and the DOM?
  • How can we write JavaScript code that will run against the real DOM in production and against a fake DOM in our tests?What things do we typically do with the DOM in JavaScript?Find elementsGet/set textEnable/disable elementsShow/hide elementsEtc.
  • The abstraction layer between your JavaScript and jQuery/the DOMConvention over configurationMakes testing first easier
  • Link DOM elements to the registered properties
  • 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
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×