Tweet
Tweet

Slide 1

Slide 1 text

# Javascript Testing Tactics [Justin Searls](http://twitter.com/searls)

Slide 2

Slide 2 text

# How my JavaScript Tests differ from the README. [Justin Searls](http://twitter.com/searls)

Slide 3

Slide 3 text

## background * make front-end dev _delightful_ * create beautiful test techniques * discover when testing is valuable * typically use jasmine * maintain lots of supporting tools, like Lineman.js, jasmine-given, jasmine-fixture, jasmine-stealth, jasmine-before-all, grunt-jasmine…

Slide 4

Slide 4 text

## syntax

Slide 5

Slide 5 text

## syntax ### What I don't do

Slide 6

Slide 6 text

## syntax ### What I don't do * use Jasmine's (RSpec-like) DSL

Slide 7

Slide 7 text

describe("Math", function(){ });

Slide 8

Slide 8 text

describe("Math", function(){ var subject, result; });

Slide 9

Slide 9 text

describe("Math", function(){ var subject, result; beforeEach(function(){ }); });

Slide 10

Slide 10 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); });

Slide 11

Slide 11 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); describe("#add", function(){ }); });

Slide 12

Slide 12 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); describe("#add", function(){ beforeEach(function(){ }); }); });

Slide 13

Slide 13 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); describe("#add", function(){ beforeEach(function(){ result = subject.add(4,5); }); }); });

Slide 14

Slide 14 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); describe("#add", function(){ beforeEach(function(){ result = subject.add(4,5); }); it("adds", function(){ }); }); });

Slide 15

Slide 15 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); describe("#add", function(){ beforeEach(function(){ result = subject.add(4,5); }); it("adds", function(){ expect(result).toEqual(9); }); }); });

Slide 16

Slide 16 text

## syntax ### What I don't do * use Jasmine's (RSpec-like) DSL * write my specs with JavaScript

Slide 17

Slide 17 text

## syntax ### What's the problem?

Slide 18

Slide 18 text

## syntax ### What's the problem? * Jasmine DSL has to be learned

Slide 19

Slide 19 text

describe('thing', function(){}); beforeEach(function(){}); it('does stuff', function(){}); afterEach(function(){}); ... expect(true).toBeTruthy() this.addMatchers({}) jasmine.createSpy()

Slide 20

Slide 20 text

## syntax ### What's the problem? * Jasmine DSL has to be learned * idiomatic usage is non-obvious

Slide 21

Slide 21 text

it('does many things', function(){ });

Slide 22

Slide 22 text

it('does many things', function(){ var subject = new Thing(); });

Slide 23

Slide 23 text

it('does many things', function(){ var subject = new Thing(); var result = subject.doStuff(); });

Slide 24

Slide 24 text

it('does many things', function(){ var subject = new Thing(); var result = subject.doStuff(); expect(result.success).toBe(true); });

Slide 25

Slide 25 text

it('does many things', function(){ var subject = new Thing(); var result = subject.doStuff(); expect(result.success).toBe(true); expect(result.message).toBe("yay!"); });

Slide 26

Slide 26 text

var subject, result;

Slide 27

Slide 27 text

var subject, result; beforeEach(function(){ })

Slide 28

Slide 28 text

var subject, result; beforeEach(function(){ subject = new Thing(); })

Slide 29

Slide 29 text

var subject, result; beforeEach(function(){ subject = new Thing(); result = subject.doStuff(); })

Slide 30

Slide 30 text

var subject, result; beforeEach(function(){ subject = new Thing(); result = subject.doStuff(); }) it('succeeds', function(){ expect(result.success).toBe(true); });

Slide 31

Slide 31 text

var subject, result; beforeEach(function(){ subject = new Thing(); result = subject.doStuff(); }) it('succeeds', function(){ expect(result.success).toBe(true); }); it('exclaims triumph!', function({ expect(result.message).toBe("yay!"); });

Slide 32

Slide 32 text

## syntax ### What's the problem? * Jasmine DSL has to be learned * idiomatic usage is non-obvious * produces distracting, verbose code

Slide 33

Slide 33 text

... expect(spec).toFinallyEnd(); }); }); }); }); }); });

Slide 34

Slide 34 text

## syntax ### What's the problem? * Jasmine DSL has to be learned * idiomatic usage is non-obvious * produces distracting, verbose code * dat crying mustache emoticon });

Slide 35

Slide 35 text

## syntax ### What I do

Slide 36

Slide 36 text

## syntax ### What I do * write specs in CoffeeScript

Slide 37

Slide 37 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); describe("#add", function(){ beforeEach(function(){ result = subject.add(4,5); }); it("adds", function(){ expect(result).toEqual(9); }); }); });

Slide 38

Slide 38 text

describe "Math", -> beforeEach -> @subject = new Math() describe "#add", -> beforeEach -> @result = @subject.add(4,5) it "adds", -> expect(@result).toEqual(9)

Slide 39

Slide 39 text

CoffeeScript basics*

Slide 40

Slide 40 text

CoffeeScript basics* *Fear not, it's just JS.

Slide 41

Slide 41 text

var add = function(a,b) { return a + b; };

Slide 42

Slide 42 text

add = (a,b) -> a + b

Slide 43

Slide 43 text

this.save();

Slide 44

Slide 44 text

@save()

Slide 45

Slide 45 text

var self = this; save(function(){ self.display("Yay!"); });

Slide 46

Slide 46 text

save => @display("Yay!")

Slide 47

Slide 47 text

## syntax ### What I do * write specs in CoffeeScript * use the jasmine-given DSL

Slide 48

Slide 48 text

describe "Math", -> beforeEach -> @subject = new Math() describe "#add", -> beforeEach -> @result = @subject.add(4,5) it "adds", -> expect(@result).toEqual(9)

Slide 49

Slide 49 text

describe "Math", -> Given -> @subject = new Math() describe "#add", -> When -> @result = @subject.add(4,5) Then -> @result == 9

Slide 50

Slide 50 text

describe("Math", function(){ var subject, result; beforeEach(function(){ subject = new Math(); }); describe("#add", function(){ beforeEach(function(){ result = subject.add(4,5); }); it("adds", function(){ expect(result).toEqual(9); }); }); });

Slide 51

Slide 51 text

describe "Math", -> Given -> @subject = new Math() describe "#add", -> When -> @result = @subject.add(4,5) Then -> @result == 9

Slide 52

Slide 52 text

## test runner

Slide 53

Slide 53 text

## test runner ### What I don't do

Slide 54

Slide 54 text

## test runner ### What I don't do * default plain HTML test runner

Slide 55

Slide 55 text

## test runner ### What I don't do * default plain HTML test runner * jasmine-rails

Slide 56

Slide 56 text

## test runner ### What I don't do * default plain HTML test runner * jasmine-rails * jasmine-maven-plugin

Slide 57

Slide 57 text

## test runner ### What I don't do * default plain HTML test runner * jasmine-rails * jasmine-maven-plugin * any server-side-dependent plugin

Slide 58

Slide 58 text

## test runner ### What's the problem?

Slide 59

Slide 59 text

## test runner ### What's the problem? * feedback isn't fast enough

Slide 60

Slide 60 text

## test runner ### What's the problem? * feedback isn't fast enough * build tools treat JS as 2nd-class

Slide 61

Slide 61 text

## test runner ### What's the problem? * feedback isn't fast enough * build tools treat JS as 2nd-class * friction of server-side coupling

Slide 62

Slide 62 text

## test runner ### What I do

Slide 63

Slide 63 text

## test runner ### What I do * use Testem as my runner

Slide 64

Slide 64 text

## test runner ### What I do * use Testem as my runner * use Lineman to build my code

Slide 65

Slide 65 text

## test runner ### What I do * use Testem as my runner * use Lineman to build my code * run all my tests in under a second on every single file change

Slide 66

Slide 66 text

## test runner **DEMO**

Slide 67

Slide 67 text

## ajax & ui events

Slide 68

Slide 68 text

### What I don't do ## ajax & ui events

Slide 69

Slide 69 text

### What I don't do * start a fake server that can stub & verify AJAX calls ## ajax & ui events

Slide 70

Slide 70 text

### What I don't do * start a fake server that can stub & verify AJAX calls * monkey-patch the browser's XHR facilities ## ajax & ui events

Slide 71

Slide 71 text

### What I don't do * start a fake server that can stub & verify AJAX calls * monkey-patch the browser's XHR facilities * invoke code by triggering UI events ## ajax & ui events

Slide 72

Slide 72 text

### What's the problem? ## ajax & ui events

Slide 73

Slide 73 text

### What's the problem? * too integrated for unit tests ## ajax & ui events

Slide 74

Slide 74 text

### What's the problem? * too integrated for unit tests * "only mock what you own" ## ajax & ui events

Slide 75

Slide 75 text

### What's the problem? * too integrated for unit tests * "only mock what you own" * test pain isn't actionable ## ajax & ui events

Slide 76

Slide 76 text

### What's the problem? * too integrated for unit tests * "only mock what you own" * test pain isn't actionable * raises concerns better handled by integrated tests (e.g. large stubs) ## ajax & ui events

Slide 77

Slide 77 text

### What's the problem? * too integrated for unit tests * "only mock what you own" * test pain isn't actionable * raises concerns better handled by integrated tests (e.g. large stubs) * doesn't help improve my API ## ajax & ui events

Slide 78

Slide 78 text

### What I do ## ajax & ui events

Slide 79

Slide 79 text

### What I do * wrap XHR lib in object I own ## ajax & ui events

Slide 80

Slide 80 text

### What I do * wrap XHR lib in object I own * let its API grow with my needs ## ajax & ui events

Slide 81

Slide 81 text

### What I do * wrap XHR lib in object I own * let its API grow with my needs * mock it away in my unit tests ## ajax & ui events

Slide 82

Slide 82 text

### What I do * wrap XHR lib in object I own * let its API grow with my needs * mock it away in my unit tests * only integration test the wrapper ## ajax & ui events

Slide 83

Slide 83 text

**DEMO** ## ajax & ui events

Slide 84

Slide 84 text

## asynchronous code

Slide 85

Slide 85 text

## asynchronous code ### What I don't do

Slide 86

Slide 86 text

## asynchronous code ### What I don't do * write async tests for async code

Slide 87

Slide 87 text

## asynchronous code ### What's the problem?

Slide 88

Slide 88 text

## asynchronous code ### What's the problem? * test yields execution control

Slide 89

Slide 89 text

## asynchronous code ### What's the problem? * test yields execution control * lots of noise in test setup

Slide 90

Slide 90 text

## asynchronous code ### What's the problem? * test yields execution control * lots of noise in test setup * speed/timeout concerns

Slide 91

Slide 91 text

## asynchronous code ### What's the problem? * test yields execution control * lots of noise in test setup * speed/timeout concerns * hard to debug race conditions

Slide 92

Slide 92 text

## asynchronous code ### What's the problem? * test yields execution control * lots of noise in test setup * speed/timeout concerns * hard to debug race conditions * test pain isn't actionable

Slide 93

Slide 93 text

## asynchronous code ### What I do

Slide 94

Slide 94 text

## asynchronous code ### What I do * only write async APIs when useful

Slide 95

Slide 95 text

## asynchronous code ### What I do * only write async APIs when useful * extract callbacks out of app code and into decorators and mixins

Slide 96

Slide 96 text

## asynchronous code ### What I do * only write async APIs when useful * extract callbacks out of app code and into decorators and mixins * take advantage of promises

Slide 97

Slide 97 text

## asynchronous code ### What I do * only write async APIs when useful * extract callbacks out of app code and into decorators and mixins * take advantage of promises * use jasmine-stealth to capture & discretely test callback functions

Slide 98

Slide 98 text

## the dom

Slide 99

Slide 99 text

## the dom ### What I don't do

Slide 100

Slide 100 text

## the dom ### What I don't do * say "(╯°□°ʣ╯ớ ┻━━┻" and skip writing tests against the DOM

Slide 101

Slide 101 text

## the dom ### What I don't do * say "(╯°□°ʣ╯ớ ┻━━┻" and skip writing tests against the DOM * use HTML fixture files

Slide 102

Slide 102 text

## the dom ### What's the problem? #### not testing DOM interactions

Slide 103

Slide 103 text

## the dom ### What's the problem? #### not testing DOM interactions * most JS on the web is UI code

Slide 104

Slide 104 text

## the dom ### What's the problem? #### not testing DOM interactions * most JS on the web is UI code * low coverage limits suite's value

Slide 105

Slide 105 text

## the dom ### What's the problem? #### not testing DOM interactions * most JS on the web is UI code * low coverage limits suite's value * you'll write more DOM-heavy code via the path of least resistance

Slide 106

Slide 106 text

## the dom ### What's the problem? #### not testing DOM interactions * most JS on the web is UI code * low coverage limits suite's value * you'll write more DOM-heavy code via the path of least resistance * hampers true outside-in TDD

Slide 107

Slide 107 text

## the dom ### What's the problem? #### using HTML fixture files

Slide 108

Slide 108 text

## the dom ### What's the problem? #### using HTML fixture files * large input -> larger everything

Slide 109

Slide 109 text

## the dom ### What's the problem? #### using HTML fixture files * large input -> larger everything * tests should push for small units

Slide 110

Slide 110 text

## the dom ### What's the problem? #### using HTML fixture files * large input -> larger everything * tests should push for small units * sharing fixtures leads to a "_Tragedy of the Commons_"

Slide 111

Slide 111 text

## the dom ### What I do

Slide 112

Slide 112 text

## the dom ### What I do * treat the DOM like a 3rd-party dependency—minimizing app's exposure

Slide 113

Slide 113 text

## the dom ### What I do * treat the DOM like a 3rd-party dependency—minimizing app's exposure * affix HTML with jasmine-fixture

Slide 114

Slide 114 text

## the dom ### What I do * treat the DOM like a 3rd-party dependency—minimizing app's exposure * affix HTML with jasmine-fixture * arrive at single-purpose functions

Slide 115

Slide 115 text

## the dom **DEMO**

Slide 116

Slide 116 text

## in summary > Practicing TDD in JS for years taught me how to write better code. When TDD feels rote, it means I learned something! So then I use it less. Give it a try! I'll help!

Slide 117

Slide 117 text

## Lineman You can have all these helpers pre- installed and ready to go for you with Lineman! * [Lineman](http://linemanjs.com) * [Install](http://lineman-install.herokuapp.com) * [Help](mailto:[email protected])

Slide 118

Slide 118 text

My name is Justin Searls Please tweet me @searls & Say [email protected]