JavaScript Testing Tactics ⚡️ Lightning Edition

Slide 1

Slide 1 text

#sjsJustin # Javascript Testing Tactics

Slide 2

Slide 2 text

#sjsJustin # How my JavaScript Tests differ from the README.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

#sjsJustin ## background

Slide 5

Slide 5 text

#sjsJustin ## background * ⚡️ 20 minutes! ⚡️

Slide 6

Slide 6 text

#sjsJustin ## background * ⚡️ 20 minutes! ⚡️ * ~~purposes of each type of test~~

Slide 7

Slide 7 text

#sjsJustin ## background * ⚡️ 20 minutes! ⚡️ * ~~purposes of each type of test~~ * ~~integration tests~~

Slide 8

Slide 8 text

#sjsJustin ## background * ⚡️ 20 minutes! ⚡️ * ~~purposes of each type of test~~ * ~~integration tests~~ * ~~frameworks vs. TDD~~

Slide 9

Slide 9 text

#sjsJustin ## background * ⚡️ 20 minutes! ⚡️ * ~~purposes of each type of test~~ * ~~integration tests~~ * ~~frameworks vs. TDD~~ * a handful of situational tactics

Slide 10

Slide 10 text

#sjsJustin ## background * ⚡️ 20 minutes! ⚡️ * ~~purposes of each type of test~~ * ~~integration tests~~ * ~~frameworks vs. TDD~~ * a handful of situational tactics * using Jasmine

Slide 11

Slide 11 text

#sjsJustin ## background * ⚡️ 20 minutes! ⚡️ * ~~purposes of each type of test~~ * ~~integration tests~~ * ~~frameworks vs. TDD~~ * a handful of situational tactics * using Jasmine * generally applicable

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

#sjsJustin ## syntax

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 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 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

#sjsJustin ## syntax ### What's the problem? ! * Jasmine DSL is not obvious

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

describe('thing', function(){});

Slide 33

Slide 33 text

describe('thing', function(){}); beforeEach(function(){});

Slide 34

Slide 34 text

describe('thing', function(){}); beforeEach(function(){}); afterEach(function(){});

Slide 35

Slide 35 text

describe('thing', function(){}); beforeEach(function(){}); afterEach(function(){}); it('does stuff', function(){});

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

#sjsJustin ## syntax ### What's the problem? ! * Jasmine DSL is not obvious * test code is verbose, unwieldy

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

#sjsJustin ## syntax ### What's the problem? ! * Jasmine DSL is not obvious * test code is verbose, unwieldy * those crying mustaches

Slide 42

Slide 42 text

#sjsJustin ## syntax ### What's the problem? ! * Jasmine DSL is not obvious * test code is verbose, unwieldy * those crying mustaches });

Slide 43

Slide 43 text

#sjsJustin ## syntax ### What I do !

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

CoffeeScript basics*

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

this.save();

Slide 53

Slide 53 text

@save()

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

! save => @display("Yay!") !

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

#sjsJustin

Slide 63

Slide 63 text

#sjsJustin ## syntax ### What I do ! * write specs in CoffeeScript * use the *-given DSL * jasmine-given ported rspec-given * mocha-given ported jasmine-given

Slide 64

Slide 64 text

#sjsJustin ## test runner

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

#sjsJustin ## test runner ### What I do !

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

#sjsJustin ## test runner ### What I do ! * use Testem as my runner * use Lineman to build my code * runs tests in < 300ms on each file change

Slide 78

Slide 78 text

#sjsJustin

Slide 79

Slide 79 text

#sjsJustin ## ajax & ui events

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

#sjsJustin

Slide 87

Slide 87 text

#sjsJustin ### What's the problem? ! * too integrated for unit tests * test pain isn't actionable (e.g. “only mock what you own”) ## ajax & ui events

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

#sjsJustin ### What I do ! * wrap native/3rd party libs with objects I own ## ajax & ui events

Slide 92

Slide 92 text

#sjsJustin ### What I do ! * wrap native/3rd party libs with objects I own * in unit tests, mock wrappers away ## ajax & ui events

Slide 93

Slide 93 text

#sjsJustin ### What I do ! * wrap native/3rd party libs with objects I own * in unit tests, mock wrappers away * test pain? -> improve wrapper API ! ## ajax & ui events

Slide 94

Slide 94 text

#sjsJustin ### What I do ! * wrap native/3rd party libs with objects I own * in unit tests, mock wrappers away * test pain? -> improve wrapper API * wrappers specify our dependence ! ## ajax & ui events

Slide 95

Slide 95 text

#sjsJustin ### What I do ! * wrap native/3rd party libs with objects I own * in unit tests, mock wrappers away * test pain? -> improve wrapper API * wrappers specify our dependence * don’t (typically) test wrappers ## ajax & ui events

Slide 96

Slide 96 text

#sjsJustin

Slide 97

Slide 97 text

#sjsJustin ## asynchronous code

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

#sjsJustin ## asynchronous code ### What I don't do ! * write async tests for async code unit ^

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

#sjsJustin ## 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 106

Slide 106 text

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

Slide 107

Slide 107 text

#sjsJustin ## asynchronous code ### What I do !

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

#sjsJustin

Slide 113

Slide 113 text

#sjsJustin ## the dom

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

#sjsJustin ## the dom ### What I don't do ! * say "(╯°□°╯ ┻━━┻" and avoid testing DOM interactions

Slide 116

Slide 116 text

#sjsJustin You can test anything with functions

Slide 117

Slide 117 text

#sjsJustin ## the dom ### What I don't do ! * say "(╯°□°╯ ┻━━┻" and avoid testing DOM interactions * use HTML fixture files

Slide 118

Slide 118 text

#sjsJustin ## the dom ### What I don't do ! * say "(╯°□°╯ ┻━━┻" and avoid testing DOM interactions * use HTML fixture files shared ^

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

#sjsJustin ## the dom ### What's the problem? #### not testing DOM interactions ! * most JavaScript _is_ DOMy UI code

Slide 121

Slide 121 text

#sjsJustin ## the dom ### What's the problem? #### not testing DOM interactions ! * most JavaScript _is_ DOMy UI code * low coverage limits suite's value

Slide 122

Slide 122 text

#sjsJustin ## the dom ### What's the problem? #### not testing DOM interactions ! * most JavaScript _is_ DOMy UI code * low coverage limits suite's value * you'll write *more* DOM-heavy code via path of least resistance

Slide 123

Slide 123 text

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

#sjsJustin ## 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 128

Slide 128 text

#sjsJustin ## the dom ### What I do ! !

Slide 129

Slide 129 text

#sjsJustin ## the dom ### What I do ! * treat the DOM like a 3rd-party dependency, minimizing exposure !

Slide 130

Slide 130 text

#sjsJustin ## the dom ### What I do ! * treat the DOM like a 3rd-party dependency, minimizing exposure * create HTML fixtures inline with jasmine-fixture !

Slide 131

Slide 131 text

#sjsJustin ## the dom ### What I do ! * treat the DOM like a 3rd-party dependency, minimizing exposure * create HTML fixtures inline with jasmine-fixture * arrive at single-purpose DOM-aware functions

Slide 132

Slide 132 text

#sjsJustin

Slide 133

Slide 133 text

#sjsJustin ## less tactically ! Know _why_ you’re testing. >

Slide 134

Slide 134 text

#sjsJustin ## less tactically ! Know _why_ you’re testing. ! Push through the pain before deciding what is worth testing. >

Slide 135

Slide 135 text

#sjsJustin ## less tactically ! Know _why_ you’re testing. ! Push through the pain before deciding what is worth testing. ! Easy-to-test code is easy-to-use. Most JavaScript is hard-to-test. ! >

Slide 136

Slide 136 text

#sjsJustin ## less tactically ! Know _why_ you’re testing. ! Push through the pain before deciding what is worth testing. ! Easy-to-test code is easy-to-use. Most JavaScript is hard-to-test. ! >

Slide 137

Slide 137 text

#sjsJustin ## less tactically ! Know _why_ you’re testing. ! Push through the pain before deciding what is worth testing. ! Easy-to-test code is easy-to-use. Most JavaScript is hard-to-test. ! There’s no Right Way™ in software, just thoughtful and thoughtless approaches. >

Slide 138

Slide 138 text

#sjsJustin ## Lineman ! ! ! ! ! ! Get up and running in minutes! ! * [Docs](http://linemanjs.com) * [Help](http://twitter.com/linemanjs)

Slide 139

Slide 139 text

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