Upload
others
View
14
Download
0
Embed Size (px)
Citation preview
Testing Javascript
Thursday, December 2, 2010
TDD Javascript
Thursday, December 2, 2010
Respect your Javascript
Thursday, December 2, 2010
Corey Haines
Journeyman Developer
www.coreyhaines.com
That’s Me!
@coreyhaines
Thursday, December 2, 2010
Why don’t we testJavascript?
• History of scripting language
• UI-focused
• Hard
• No good tools
Thursday, December 2, 2010
But Javascript Is Here!
Thursday, December 2, 2010
Javascript Environments
• Browser
• Node.js
• Env.js
• More and more!
Out of Browser
Thursday, December 2, 2010
TDD
• Not tool-specific, concept-specific
• Focused, micro-level tests
• Design technique!
Pain in testing meansyour design has problems
Thursday, December 2, 2010
TDD Tools
• Jasmine
• QUnit
• JSUnit
• JSpec
• Should.js
• Lots More!
Thursday, December 2, 2010
BDD
• Not tool-specific, concept-specific
• Feature-level Full Stack tests driving Example-level Isolation tests
• Outside-in
Thursday, December 2, 2010
BDD Tools!
• Jasmine
• QUnit
• JSUnit
• JSpec
• Should.js
• Lots More!
Thursday, December 2, 2010
%h1=Total Pay- users = User.where(:invited_at => yesterday)- sorted_users = users.sort_by(&:email)- amount = 0- users.each do |user| - pay = user.salary - amount = amount + pay%h2=amount
Would you write this codein your view?
Thursday, December 2, 2010
Why not?
Thursday, December 2, 2010
Separation of Concerns
Thursday, December 2, 2010
So why do we mix presentation-specific code with business
logic in our javascript?
Thursday, December 2, 2010
var users, pay, display;
users = $('#users tr');pay = 0;users.each(function(item){ pay += item.find('td.pay').val().to_i();};display = $("#total_pay");display.text(pay);
Thursday, December 2, 2010
Design Javascript?
Thursday, December 2, 2010
4 Rules of Simple Design
Thursday, December 2, 2010
Tests Pass
Of course
Thursday, December 2, 2010
No Duplication (DRY)
Every piece of knowledge has one and only one
representation
Thursday, December 2, 2010
Reveals Intent
Good Names
Thursday, December 2, 2010
Small
Well, we are in Javascript
Thursday, December 2, 2010
4 Rules of Simple Design
Thursday, December 2, 2010
Test Pass
4 Rules of Simple Design
Thursday, December 2, 2010
Test Pass
No Duplication
4 Rules of Simple Design
Thursday, December 2, 2010
Test Pass
No Duplication
Reveals Intent
4 Rules of Simple Design
Thursday, December 2, 2010
Test Pass
No Duplication
Reveals Intent
Small
4 Rules of Simple Design
Thursday, December 2, 2010
SOLID Principles
Thursday, December 2, 2010
Thursday, December 2, 2010
Single responsibility
Thursday, December 2, 2010
Single responsibility
Open-Closed Principle
Thursday, December 2, 2010
Single responsibility
Open-Closed Principle
Liskov Substition Principle
Thursday, December 2, 2010
Single responsibility
Open-Closed Principle
Liskov Substition Principle
Interface Segregation
Thursday, December 2, 2010
Single responsibility
Open-Closed Principle
Liskov Substition Principle
Interface Segregation
Dependency Inversion
Thursday, December 2, 2010
Design guidelines
Thursday, December 2, 2010
Stratified Design
It is all about the abstractions
Thursday, December 2, 2010
Find a canonical representation
DRY
Thursday, December 2, 2010
HTML elementdata-* attributes
Thursday, December 2, 2010
Business Logic
Event Handlers Dom Wrappers
1) button.click()
2) Wrap Dom Elements
Business Logic
3) Pass Wrapper Objects
4) Ajax?
IsolationFixtures
Test Strategies
js object wrapper
dom object
Thursday, December 2, 2010
var users, pay, display;
users = getUsers($('#users tr'));pay = calculatePayFor(users);display = getDisplay('#total_pay');display.setValue(pay);
Thursday, December 2, 2010
function calculatePay(users) { return users.inject(0, function(sum, user) { sum += user.salary(); return sum; };}
Thursday, December 2, 2010
Get away of the DOM
ASAP!!
Thursday, December 2, 2010
Wrap interactions with DOM
Builders = { ... }Behaviors = { ... }
Thursday, December 2, 2010
Builders
ball = Builder.createFoo(domElement);
Object Creation is cheap
Builder.createFooDom(ball);
Thursday, December 2, 2010
Use same code for js and html rendering
Thursday, December 2, 2010
Wrap based on behavior!
Interface Segregation
Thursday, December 2, 2010
UpdateablePersistableDraggable
draggableBall = Behaviors.makeDraggable(ball);
Thursday, December 2, 2010
Guideline:Only the top level gets
to use $() selectors
Event Handlers Dom Wrappers
Thursday, December 2, 2010
Spies/Stubs not Mocks
Thursday, December 2, 2010
Questions?
Corey Haines@coreyhaines
Thanks for your time
Thursday, December 2, 2010