TDD in JavaScript not a myth!

Ofir Dagan

Who's this guy?

  • Ofir Dagan

 

  • Senior Software Engineer @ WIX

 

  • TDD true-believer

 

Get in touch :)

@github

@linkedin

@twitter

ofird@wix.com

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

TDD in JavaScript - not a myth

By ofird

TDD in JavaScript - not a myth

  • 3,487