testing javascript - goto conference › ... › coreyhaines_testingyourjavascript.pdf ·...

Testing Javascript

Thursday, December 2, 2010

TDD Javascript

Respect your Javascript

Corey Haines

Journeyman Developer

www.coreyhaines.com

That’s Me!

@coreyhaines

Why don’t we testJavascript?

• History of scripting language

• UI-focused

• Hard

• No good tools

But Javascript Is Here!

Javascript Environments

• Browser

• Node.js

• Env.js

• More and more!

Out of Browser

• Not tool-specific, concept-specific

• Focused, micro-level tests

• Design technique!

Pain in testing meansyour design has problems

TDD Tools

• Jasmine

• QUnit

• JSUnit

• JSpec

• Should.js

• Lots More!

• Not tool-specific, concept-specific

• Feature-level Full Stack tests driving Example-level Isolation tests

• Outside-in

BDD Tools!

• Jasmine

• QUnit

• JSUnit

• JSpec

• Should.js

• Lots More!

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

Why not?

Separation of Concerns

So why do we mix presentation-specific code with business

logic in our javascript?

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

Design Javascript?

4 Rules of Simple Design

Tests Pass

Of course

No Duplication (DRY)

Every piece of knowledge has one and only one

representation

Reveals Intent

Good Names

Well, we are in Javascript

Test Pass

No Duplication

Test Pass

No Duplication

Reveals Intent

Test Pass

No Duplication

Reveals Intent

SOLID Principles

Single responsibility

Open-Closed Principle

Liskov Substition Principle

Interface Segregation

Dependency Inversion

Design guidelines

Stratified Design

It is all about the abstractions

Find a canonical representation

HTML elementdata-* attributes

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

var users, pay, display;

users = getUsers($('#users tr'));pay = calculatePayFor(users);display = getDisplay('#total_pay');display.setValue(pay);

function calculatePay(users) { return users.inject(0, function(sum, user) { sum += user.salary(); return sum; };}

Get away of the DOM

ASAP!!

Wrap interactions with DOM

Builders = { ... }Behaviors = { ... }

Builders

ball = Builder.createFoo(domElement);

Object Creation is cheap

Builder.createFooDom(ball);

Use same code for js and html rendering

Wrap based on behavior!

UpdateablePersistableDraggable

draggableBall = Behaviors.makeDraggable(ball);

Guideline:Only the top level gets

to use $() selectors

Event Handlers Dom Wrappers

Spies/Stubs not Mocks

Questions?

Corey Haines@coreyhaines

Thanks for your time

testing javascript - goto conference › ... › coreyhaines_testingyourjavascript.pdf ·...

Documents

cours de javascript

reformed communiqué december 2011

agricole ideal, december 2013

cours - td - tp de...

javascript html5 - canvas

gimme danger, un iggy pop affolant dans un jarmusch...

mercurial - phpquebec - december 08

french december 2011

html javascript 3

cours javascript v1

l’automobile december 2012

w913293990101a k00 000 00 front.fm page 1 thursday

corso base javascript

voyageur december 2010

javascript - members.loria.fr · programmation objet...

javascript & tools

communiqué december 2015

newsletter december(final)

december pulse french

javascript et jquery