SlideShare a Scribd company logo
1 of 22
So who wants to hear
another testing talk?
Ok so who is developing
TDD or test first?
DOM code?
Hi I am Phil, and I'm a
Developer...
@sideshowcoder (github) @ischi (twitter)
working for Cospired
Javascript frontend
testing
from failure to good to great
TDD for DOM is hard
right?
Either they are slow
TDD fast feedback loop with capybara
anyone?
Or they can't test what I
need!
function addFive(x) { return x + 5 }
... is not what I do day to day
They are hard to setup
1 hour project 2 hour setup?
What about CI integration?
But I want to testdrive my
code!
because my code is better when I do
Ok so lets see is it really
so hard?
lets walk through a simple example
DEMO
https://github.com/sideshowcoder/frontend-
tdd-with-jasmine
Yeah I know just some
jQuery...
but I hope it shows some principles
Breaking code up by
responsibility
Small modules enable reuse
*do one thing and do it well!*
Be aware of your
dependencies
On which parts of the DOM do I rely on?
Which other plugins do I need?
Changes are easier
Everything has it's place
And I got some
confidence that it does
what it says it does*
*different from 'it does what I want it to do'
but it's a start!
Tests can be integrated in
CI
rake jasmine:ci
They can be run
headlessly
phantom-jasmine, jasmine-guard, jasmine-
headless-webkit
So yes it is possible to
TDD frontend code
IMHO
Questions?
And thank you all for listening!

More Related Content

What's hot

Coding Dojo: Mars Rover (2014)
Coding Dojo: Mars Rover (2014)Coding Dojo: Mars Rover (2014)
Coding Dojo: Mars Rover (2014)
Peter Kofler
 

What's hot (20)

TDD python ne-april-2014
TDD python ne-april-2014TDD python ne-april-2014
TDD python ne-april-2014
 
Coding Dojo In 5 minutes
Coding Dojo In 5 minutesCoding Dojo In 5 minutes
Coding Dojo In 5 minutes
 
JDD2014: Continuous delivery: capitalizing high quality automated tests - Szc...
JDD2014: Continuous delivery: capitalizing high quality automated tests - Szc...JDD2014: Continuous delivery: capitalizing high quality automated tests - Szc...
JDD2014: Continuous delivery: capitalizing high quality automated tests - Szc...
 
Test Driven Development en Go con Ginkgo y Gomega
Test Driven Development en Go con Ginkgo y GomegaTest Driven Development en Go con Ginkgo y Gomega
Test Driven Development en Go con Ginkgo y Gomega
 
Javascript test automation demo
Javascript test automation demoJavascript test automation demo
Javascript test automation demo
 
TDD, Refactoring - Workshop
TDD, Refactoring - WorkshopTDD, Refactoring - Workshop
TDD, Refactoring - Workshop
 
TDD and Simple Design Workshop - Session 1 - November 2018
TDD and Simple Design Workshop - Session 1 - November 2018TDD and Simple Design Workshop - Session 1 - November 2018
TDD and Simple Design Workshop - Session 1 - November 2018
 
Tdd presentation
Tdd presentationTdd presentation
Tdd presentation
 
5 books for absolute programming beginners
5 books for absolute programming beginners5 books for absolute programming beginners
5 books for absolute programming beginners
 
Code Dojo
Code DojoCode Dojo
Code Dojo
 
Application Development Using Java - DIYComputerScience Course
Application Development Using Java - DIYComputerScience CourseApplication Development Using Java - DIYComputerScience Course
Application Development Using Java - DIYComputerScience Course
 
Extjs Howto
Extjs HowtoExtjs Howto
Extjs Howto
 
Coding Dojo: Mars Rover (2014)
Coding Dojo: Mars Rover (2014)Coding Dojo: Mars Rover (2014)
Coding Dojo: Mars Rover (2014)
 
SpecBDD in PHP
SpecBDD in PHPSpecBDD in PHP
SpecBDD in PHP
 
SLOID Share
SLOID ShareSLOID Share
SLOID Share
 
TDC2016POA | Trilha DevOps - DevOps Anti-Patterns
TDC2016POA | Trilha DevOps - DevOps Anti-PatternsTDC2016POA | Trilha DevOps - DevOps Anti-Patterns
TDC2016POA | Trilha DevOps - DevOps Anti-Patterns
 
Why and how to keep your code quality
Why and how to keep your code quality Why and how to keep your code quality
Why and how to keep your code quality
 
Is your code ready for testing?
Is your code ready for testing?Is your code ready for testing?
Is your code ready for testing?
 
DevOps Anti-Patterns
DevOps Anti-PatternsDevOps Anti-Patterns
DevOps Anti-Patterns
 
GDCR15 in Las Palmas, Gran Canaria
GDCR15 in Las Palmas, Gran CanariaGDCR15 in Las Palmas, Gran Canaria
GDCR15 in Las Palmas, Gran Canaria
 

Viewers also liked

English language arts_5_2010[1]
English language arts_5_2010[1]English language arts_5_2010[1]
English language arts_5_2010[1]
Susan Robertson
 
Comonarranimageneslde
ComonarranimagenesldeComonarranimageneslde
Comonarranimageneslde
Herbert Salas
 
ACT Assessment Workshop Prompts
ACT Assessment Workshop PromptsACT Assessment Workshop Prompts
ACT Assessment Workshop Prompts
cwozniak
 
08 06-12 espavilaem
08 06-12 espavilaem08 06-12 espavilaem
08 06-12 espavilaem
byspooker
 
Elementsprinciples 091210004439-phpapp01
Elementsprinciples 091210004439-phpapp01Elementsprinciples 091210004439-phpapp01
Elementsprinciples 091210004439-phpapp01
anjoronjust
 
Historia de la tecnologia
Historia de la tecnologiaHistoria de la tecnologia
Historia de la tecnologia
omar yesid
 
Community police
Community policeCommunity police
Community police
Kazi Iqbal
 
Ibahrine Chapter 9 Culture And Advertising Appeals
Ibahrine Chapter 9 Culture And Advertising AppealsIbahrine Chapter 9 Culture And Advertising Appeals
Ibahrine Chapter 9 Culture And Advertising Appeals
ibahrine
 

Viewers also liked (20)

93 percent-bing-for-internet-marketing-services
93 percent-bing-for-internet-marketing-services93 percent-bing-for-internet-marketing-services
93 percent-bing-for-internet-marketing-services
 
Load balancing in Content Delivery Networks in Novel Distributed Equilibrium
Load balancing in Content Delivery Networks in Novel Distributed EquilibriumLoad balancing in Content Delivery Networks in Novel Distributed Equilibrium
Load balancing in Content Delivery Networks in Novel Distributed Equilibrium
 
Bilaga 1 3 Adhdkvinnor
Bilaga 1 3 AdhdkvinnorBilaga 1 3 Adhdkvinnor
Bilaga 1 3 Adhdkvinnor
 
English language arts_5_2010[1]
English language arts_5_2010[1]English language arts_5_2010[1]
English language arts_5_2010[1]
 
Comonarranimageneslde
ComonarranimagenesldeComonarranimageneslde
Comonarranimageneslde
 
Sonido Digital 2
Sonido Digital 2Sonido Digital 2
Sonido Digital 2
 
ACT Assessment Workshop Prompts
ACT Assessment Workshop PromptsACT Assessment Workshop Prompts
ACT Assessment Workshop Prompts
 
08 06-12 espavilaem
08 06-12 espavilaem08 06-12 espavilaem
08 06-12 espavilaem
 
Manualdeadiestramientocanino
ManualdeadiestramientocaninoManualdeadiestramientocanino
Manualdeadiestramientocanino
 
La historia 10ºb
La historia 10ºbLa historia 10ºb
La historia 10ºb
 
Lucy meade
Lucy meadeLucy meade
Lucy meade
 
BGL 2007-08_low
BGL 2007-08_lowBGL 2007-08_low
BGL 2007-08_low
 
Elementsprinciples 091210004439-phpapp01
Elementsprinciples 091210004439-phpapp01Elementsprinciples 091210004439-phpapp01
Elementsprinciples 091210004439-phpapp01
 
2011 review
2011 review2011 review
2011 review
 
Seguridade i vanete
Seguridade i vaneteSeguridade i vanete
Seguridade i vanete
 
North America Green City Index
North America Green City IndexNorth America Green City Index
North America Green City Index
 
Historia de la tecnologia
Historia de la tecnologiaHistoria de la tecnologia
Historia de la tecnologia
 
Business Ethics and Corporate Governance - White Paper
Business Ethics and Corporate Governance - White PaperBusiness Ethics and Corporate Governance - White Paper
Business Ethics and Corporate Governance - White Paper
 
Community police
Community policeCommunity police
Community police
 
Ibahrine Chapter 9 Culture And Advertising Appeals
Ibahrine Chapter 9 Culture And Advertising AppealsIbahrine Chapter 9 Culture And Advertising Appeals
Ibahrine Chapter 9 Culture And Advertising Appeals
 

Similar to JavaScript frontend testing from failure to good to great

Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
bhochhi
 

Similar to JavaScript frontend testing from failure to good to great (20)

Introduction to TDD (Test Driven development) - Ahmed Shreef
Introduction to TDD (Test Driven development) - Ahmed ShreefIntroduction to TDD (Test Driven development) - Ahmed Shreef
Introduction to TDD (Test Driven development) - Ahmed Shreef
 
TDD - Unit testing done right and programmer happiness
TDD - Unit testing done right and programmer happinessTDD - Unit testing done right and programmer happiness
TDD - Unit testing done right and programmer happiness
 
« Training Within Software » using Dojo and Mob Programming by Bernard Notari...
« Training Within Software » using Dojo and Mob Programming by Bernard Notari...« Training Within Software » using Dojo and Mob Programming by Bernard Notari...
« Training Within Software » using Dojo and Mob Programming by Bernard Notari...
 
TDD Walkthrough - Encryption
TDD Walkthrough - EncryptionTDD Walkthrough - Encryption
TDD Walkthrough - Encryption
 
Tdd is not about testing
Tdd is not about testingTdd is not about testing
Tdd is not about testing
 
Coding Dojo Firenze - vol1
Coding Dojo Firenze - vol1 Coding Dojo Firenze - vol1
Coding Dojo Firenze - vol1
 
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
 
Hey You Got Your TDD in my SQL DB by Jeff McKenzie
Hey You Got Your TDD in my SQL DB by Jeff McKenzieHey You Got Your TDD in my SQL DB by Jeff McKenzie
Hey You Got Your TDD in my SQL DB by Jeff McKenzie
 
TDD and Simple Design Workshop - Session 1 - March 2019
TDD and Simple Design Workshop - Session 1 - March 2019TDD and Simple Design Workshop - Session 1 - March 2019
TDD and Simple Design Workshop - Session 1 - March 2019
 
Monolith vs Microservices vs Teams
Monolith vs Microservices vs TeamsMonolith vs Microservices vs Teams
Monolith vs Microservices vs Teams
 
Tomáš Strejček - Velikost týmu vs. monolith a mikroservicy (11. sraz přátel ...
Tomáš Strejček - Velikost týmu vs. monolith a mikroservicy  (11. sraz přátel ...Tomáš Strejček - Velikost týmu vs. monolith a mikroservicy  (11. sraz přátel ...
Tomáš Strejček - Velikost týmu vs. monolith a mikroservicy (11. sraz přátel ...
 
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
 
Tdd is not about testing (C++ version)
Tdd is not about testing (C++ version)Tdd is not about testing (C++ version)
Tdd is not about testing (C++ version)
 
Test-Driven Development
Test-Driven DevelopmentTest-Driven Development
Test-Driven Development
 
Java Beginners Meetup February 2017: Testing and TDD
Java Beginners Meetup February 2017: Testing and TDDJava Beginners Meetup February 2017: Testing and TDD
Java Beginners Meetup February 2017: Testing and TDD
 
The rocket internet experience @ PHP.TO.START 2013 in Turin
The rocket internet experience @ PHP.TO.START 2013 in TurinThe rocket internet experience @ PHP.TO.START 2013 in Turin
The rocket internet experience @ PHP.TO.START 2013 in Turin
 
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
 
TDD - do increasing and save...
TDD - do increasing and save...TDD - do increasing and save...
TDD - do increasing and save...
 
TDD Walkthrough - The Time in Words
TDD Walkthrough -  The Time in WordsTDD Walkthrough -  The Time in Words
TDD Walkthrough - The Time in Words
 
Cheap ci for javascript devs
Cheap ci for javascript devsCheap ci for javascript devs
Cheap ci for javascript devs
 

More from Philipp Fehre

Node.js and couchbase Full Stack JSON - Munich NoSQL
Node.js and couchbase   Full Stack JSON - Munich NoSQLNode.js and couchbase   Full Stack JSON - Munich NoSQL
Node.js and couchbase Full Stack JSON - Munich NoSQL
Philipp Fehre
 

More from Philipp Fehre (18)

node.js and native code extensions by example
node.js and native code extensions by examplenode.js and native code extensions by example
node.js and native code extensions by example
 
Jruby a Pi and a database
Jruby a Pi and a databaseJruby a Pi and a database
Jruby a Pi and a database
 
Couchbase Mobile on Android
Couchbase Mobile on AndroidCouchbase Mobile on Android
Couchbase Mobile on Android
 
From 0 to syncing
From 0 to syncingFrom 0 to syncing
From 0 to syncing
 
Node.js and couchbase Full Stack JSON - Munich NoSQL
Node.js and couchbase   Full Stack JSON - Munich NoSQLNode.js and couchbase   Full Stack JSON - Munich NoSQL
Node.js and couchbase Full Stack JSON - Munich NoSQL
 
You got schema in my json
You got schema in my jsonYou got schema in my json
You got schema in my json
 
What is new in Riak 2.0
What is new in Riak 2.0What is new in Riak 2.0
What is new in Riak 2.0
 
Ember background basics
Ember background basicsEmber background basics
Ember background basics
 
Ember learn from Riak Control
Ember learn from Riak ControlEmber learn from Riak Control
Ember learn from Riak Control
 
Testing tdd dom
Testing tdd domTesting tdd dom
Testing tdd dom
 
Something about node basics
Something about node basicsSomething about node basics
Something about node basics
 
A little more advanced node
A little more advanced nodeA little more advanced node
A little more advanced node
 
Something about node in the realworld
Something about node in the realworldSomething about node in the realworld
Something about node in the realworld
 
Riak Intro at Munich Node.js
Riak Intro at Munich Node.jsRiak Intro at Munich Node.js
Riak Intro at Munich Node.js
 
PUT Knowledge BUCKET Brain KEY Riak
PUT Knowledge BUCKET Brain KEY RiakPUT Knowledge BUCKET Brain KEY Riak
PUT Knowledge BUCKET Brain KEY Riak
 
Campfire bot lightning talk
Campfire bot lightning talkCampfire bot lightning talk
Campfire bot lightning talk
 
Lighting fast rails with zeus
Lighting fast rails with zeusLighting fast rails with zeus
Lighting fast rails with zeus
 
Network with node
Network with nodeNetwork with node
Network with node
 

Recently uploaded

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 

Recently uploaded (20)

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 

JavaScript frontend testing from failure to good to great