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)

Is TDD any good?

Mother nature in action

SUT (System Under Test)

Tests

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

https://github.com/ofirdagan/angular-hangman-tdd

Special Thanks:

@Nadav Leshem

@Ayelet Reuveni

@Nir Kosover

Full game version (with server API calls and E2E tests)

https://github.com/ofirdagan/hangman-live-demo

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