TDD in JavaScript not a myth!

Ofir Dagan

Who's this guy?

  • Ofir Dagan


  • Senior Software Engineer @ WIX


  • TDD true-believer


Get in touch :)




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)


Our Immune System


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


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

TDD in JavaScript - not a myth

By ofird

TDD in JavaScript - not a myth

  • 3,487