Testable, Object-Oriented JavaScript

by Jon Kruger

$("#Name").text("jon");

 Object oriented programming  Readable code  Small classes/files
 Loosely coupled  Unit testing F

 Cucumber, SpecFlow, Selenium, Watir, etc.

 Inject HTML in our tests describe("Testing by injecting HTML
into jQuery", function() { it("should work, but it's kind of a pain", function() { element = $('<div>text</div>'); element.text("some more text"); expect(element.text()).toEqual("some more text"); }); });

 ?????????????????

 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

DOM JavaScript Server AJAX

JavaScript Server AJAX DOM

DOM JavaScript Server AJAX ???????

DOM JavaScript Server AJAX ??????? Fake DOM

http://github.com/jonkruger/jsview

FTW!!!!

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 setUsername showUsername hideUsername clickUsername pressKeyInUsername keyDownInUsername enableUsername disableUsername whenUsernameChanges whenUsernameClicked whenUsernameIsClicked whenUsernameGainsFocus whenUsernameLosesFocus whenKeyIsPressedInUsername whenKeyDownInUsername

new jQueryView("Client", element); registerObjectProperties(this, view, ['SendButton']); } The Client class now has the following methods: showSendButton hideSendButton clickSendButton enableSendButton disableSendButton whenSendButtonClicked whenSendButtonIsClicked

new jQueryView("Client", element); registerList(this, view, ['Tweets']); } The Client class now has the following methods: appendToTweets prependToTweets getTweets

<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>

Slides: http://jonkruger.com/blog JSView: http://github.com/jonkruger/jsview Jasmine: http://pivotal.github.com/jasmine mail: [email protected] Twitter: @JonKruger
Blog: http://jonkruger.com/blog

Testable, Object-Oriented JavaScript

Testable, Object-Oriented JavaScript

Jon Kruger

More Decks by Jon Kruger

Featured

Transcript

by Jon Kruger

$("#Name").text("jon");

 Object oriented programming  Readable code  Small classes/files

 Cucumber, SpecFlow, Selenium, Watir, etc.

 Inject HTML in our tests describe("Testing by injecting HTML

 ?????????????????

 Tests a small unit of functionality  Must run

 How do we deal with the DOM  How

DOM JavaScript Server AJAX

JavaScript Server AJAX DOM

DOM JavaScript Server AJAX ???????

DOM JavaScript Server AJAX ??????? Fake DOM

http://github.com/jonkruger/jsview

FTW!!!!

function Client(element, view) { if (view == null) view =

function Client(element, view) { if (view == null) view =

function Client(element, view) { if (view == null) view =

<html> <head> <script language="javascript"> $(document).ready(function() { entryForm = new EntryForm($("#EntryForm"));

Slides: http://jonkruger.com/blog JSView: http://github.com/jonkruger/jsview Jasmine: http://pivotal.github.com/jasmine mail: [email protected] Twitter: @JonKruger