TDD in JavaScript not a myth!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/821685/pasted-from-clipboard.png)
Ofir Dagan
Who's this guy?
Talk Objectives
1. Client side TDD is possible
2. Client side TDD can be easy once u get the gist of it
3. You should practice TDD from now on
What we'll see today
- Short overview of TDD
- Some of WIX's testing technology stack
- Live demo coding hangman
So... TDD
TDD - Test Driven Development
- Credited to Kent Beck as part of extreme programming (XP) methodology
- Since 1999
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/937096/kent_beck.jpg)
The 3 rules of TDD
by Robert C Martin (uncle bob)
1. Don't write production code except to pass a failing test
Writing Tests !== TDD
2. Write only enough test code to demonstrate a failure
3. Write only enough production code to pass the test
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/937092/Robert_Martin-nobull.jpg)
Is TDD any good?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/1061351/sonar1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/1061354/sonar2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/1061371/velcro_nature.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/1061372/velcro.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/1061466/willferrell.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/1061469/pana-3d-camera.jpg)
Mother nature in action
SUT (System Under Test)
Tests
Our Immune System
Intruders
No Antibodies
Pathogen A
No Antibodies
Pathogen A antibody
Pathogen A
Pathogen B
Pathogen A antibody
Pathogen A+B antibodies
Pathogen A antibody
Tdd Advantges
- Decoupled design - Testable -> Decoupled
- Decrease & mitigate defects
- Base for continuous delivery
- Less QA efforts - 2 QA vs ~20 Dev
- Shorten debug time
- Evergreen project - You know your code was green 2 min ago
- Design docs
But most importantly:
Clean code - no fear in cleaning / maintaining the code
Why Test-After sucks
- Boring - u already know it works
- Tend to skip difficult tests - the code already works, it's not a must. . .
- Feels like a waste / chore / homework, not the dev's work
- Miss testing "obvious" things
- No Trust
Bottom line - The test suite has holes
Tdd and angular are sitting in a tree
k-i-s-s-i-n-g
Why Angular and TDD are a match made in heaven:
- Modular architecture
- Dependency injection
- Built-in help modules (ngMock, ngMockE2E)
- Support for E2E tests (protractor framework)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/935016/heart.png)
- Karma - test runner
- Jasmine - js testing framework
- Protractor
- Phantomjs
Testing technologies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893586/karma.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893565/jasmine.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893206/protractor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893569/phantomjs.png)
Let's build a Game!
Show me
Full game version (with server API calls and E2E tests)
Live coding demo:
Appendix 1
- Hangman server API
- WIX Front End Technologies
Hangman game
server api
- GET /api/categories
- Returns array of all categories
- GET /api/categories/{{category}}/words
- Returns array of words in that category
front end technologies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893153/sass.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893184/bower.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893188/grunt.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893190/yeoman.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893197/haml.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893206/protractor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893565/jasmine.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893569/phantomjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893575/npm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893586/karma.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893697/angularjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893728/teamcity512.png)
-
Continuous Integration (CI):
- Team city
-
Package managers:
- Bower
- npm
-
Testing:
- karma - test runner
- jasmine - js testing framework
- protractor
- phantomjs
-
Build tools:
- grunt
- yeoman
front end technologies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893728/teamcity512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893575/npm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893184/bower.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893586/karma.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893565/jasmine.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893206/protractor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893569/phantomjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893188/grunt.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893190/yeoman.png)
-
Actual code ;)
- angular
- haml
- sass
front end technologies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893697/angularjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893197/haml.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/ofird/images/893153/sass.png)
TDD in JavaScript - not a myth
By ofird
TDD in JavaScript - not a myth
- 3,588