Don't start writing JavaScript code with unit tests! And let's find out why... :) #OdessaJS, Lightning talk at OdessaJS 2014 For English speakers: 8 — describe("puddle", ... contains water 9 — describe("puddle", ... it's a small hollow 10 — when jumping in 11 — it makes splashes 12 — feet can become wet 13 — the same phrases (just on 1 slide) GIFs and movies: 1) Code on manual QA: http://tinyurl.com/odessajs-puddle 2) Cat and Jenga: http://i.imgur.com/T6SbtaS.gif 3) Groundhog day - E2E: http://tinyurl.com/odessajs-groundhog 4) E2E bookmarklet video —http://vimeo.com/noomorph/odessajs-e2e-mocha-example

1. W H E R E T O T E S T F I R S T
YA R O S L AV S E R H I E I E V,
F R O N T- E N D D E V E L O P E R

2. D O N ’ T S TA R T
F R O M U N I T T E S T S *
* I N M O S T C A S E S
@noomorph

3. T E S T S
@noomorph

4. C O D ET E S T S
@noomorph

5. C O D ET E S T S
T E S T S
@noomorph

6. C O D ET E S T S
T E S T S C O D E

7. U N I T T E S T S F O R P U D D L E
@noomorph

8. D E S C R I B E ( “ Л У Ж А ” ,
С О С Т О И Т И З В О Д Ы
@noomorph

9. D E S C R I B E ( “ Л У Ж А ” ,
Э Т О Н Е Б О Л Ь Ш О Е
У Г Л У Б Л Е Н И Е
@noomorph

10. П Р И В С Т У П А Н И И В Н Е Е
@noomorph

11. С О З Д А Е Т Б Р Ы З Г И
@noomorph

12. М О Ж Н О
П Р О М О Ч И Т Ь Н О Г И
@noomorph

13. PA S S I N G U N I T T E S T S

14. C O D E O N M A N U A L Q A

15. G A P B E T W E E N C O D E & P R O D U C T

16. C O O K T D D R I G H T:
S TA R T F R O M “ B I G G E R ”
@noomorph

17. S TA R T F R O M “ B I R D V I E W ”

18. U N I T T E S T S A R E M O R E F R A G I L E
Requirements
Architecture
Classes
Unit Tests
@noomorph

19. E 2 E PA S S I N G = J E N G A S TA N D S

20. L E T E 2 E T O T E S T P U D D L E S

21. … B U T U N I T T E S T S A R E I M P O R TA N T T O O

22. … B U T U N I T T E S T S A R E I M P O R TA N T T O O
code with unit tests

23. … B U T U N I T T E S T S A R E I M P O R TA N T T O O
code without unit testscode with unit tests

24. E 2 E S TA R T S I N
B R O W S E R C O N S O L E
@noomorph

25. J S T E S T S J S

26. M O C H A B O O K M A R K L E T
https://github.com/noomorph/mocha-­‐bookmarklet
• loads
Mocha/Chai
scripts
• creates
output
container
for
the
results
• prompts
for
your
spec
URL
or
raw
code
to
paste
and
run

27. @noomorph
T H A N K S F O R AT T E N T I O N