TDD in JavaScript not a myth!
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
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
Is TDD any good?
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)
- Karma - test runner
- Jasmine - js testing framework
- Protractor
- Phantomjs
Testing technologies
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
-
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
-
Actual code ;)
- angular
- haml
- sass
front end technologies