112
Testing Tools and Patterns for JavaScript Mapping Applications Dave Bouwman - @dbouwman David Spriggs- @DavidSpriggs Tom Wayson - @TomWayson

Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

  • Upload
    others

  • View
    18

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Testing Tools and Patterns for JavaScript Mapping Applications

Dave Bouwman - @dbouwman David Spriggs- @DavidSpriggs Tom Wayson - @TomWayson

Page 2: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 3: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

write code to test code.

Page 4: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 5: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

function adder(a, b){ return a + b; }

Page 6: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 7: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

aaronvandike/2340197774

Page 8: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

writing tests

Page 9: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

describe(“resultModel”, function(){ it(‘fetches’, function(){ expect(m.isFetched).toBe(true); }); });

Page 10: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Describe “resultModel”

it “fetches itself”

expect m.isFetched toBe true

suite spec assertion

“matcher” toBeDefined, toBeNull, toEqual, toBeTruthy, toHaveClass, toHaveBeenCalled, toContain

+100

Page 11: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Describe “resultModel”

beforeEach

afterEach

it “fetches itself”

expect m.isFetched toBe true

setup teardown

Page 12: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

create objects fill with test data setup DOM

*framework dependent

(json fixtures*) (HTML fixtures*)

Page 13: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Describe “resultModel”

beforeEach

afterEach

it “fetches itself”

expect m.isFetched toBe true

setup teardown

Page 14: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Describe “resultModel”

beforeEach //setup

afterEach //tear down

it “some condition”

expect true toBe true

Describe “with Criteria”

beforeEach //setup

afterEach //tear down

it “some condition”

expect red toBe red

general

specific

Page 15: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 16: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

emoneytg/2953507378

why bother?

Page 17: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

1. _________________ 2. code is correct 3. catch regression

Page 18: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

1. drive code structure 2. code is correct 3. catch regression

Page 19: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

average application…

Page 20: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

architecturally…

Page 21: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 22: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

you can make this work…

Page 23: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 24: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

24258698@N04/37656086

Page 25: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

4 rules for super tests

Page 26: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

write high value

tests

Page 27: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

test only your code

Page 28: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

test one thing at a time

Page 29: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

refactor ruthlessly

Page 30: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 31: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

$.ajax({…})

Page 32: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

“success”

“error”

$.ajax({…})

test our code!

Page 33: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

“success”

“error”

$.ajax({…})

Page 34: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

“success”

“error”

$.ajax({…})

Page 35: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 36: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

“logic”

Page 37: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

“logic”

“action”

Page 38: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

1

2

3

4

“logic”

“action”

test one thing!

Page 39: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

1

2

3

4

“logic with calls”

“action functions”

1

2

3

4

Page 40: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

1

2

3

4

testing logic…

given a,b,c… was fn x called with a,c? did fn x call fn y with c?

valuable tests!

1

2

3

4

Page 41: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

1

2

3

4

testing logic

spies & fakes!

1

2

3

4

Page 42: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

1

2

3

4

testing logic

spies & fakes!

1

2

3

4

Page 43: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

24258698@N04/37656086

Page 44: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Use a framework

Page 45: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

map

Page 46: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

polymer

Page 47: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Separation of Concerns

Page 48: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Controllers

Page 49: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Application

Page 50: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

App.on(…)

map

App.trigger(…) Event Bus

App.off(…)

Page 51: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

map

Map Controller

mapController

Page 52: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

map

mapController

spies & fakes!

Page 53: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Symbiotic Relationship

Page 54: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Writing tests makes your code better.

Page 55: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Writing tests makes you code better.

Page 56: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Testable code is more modular.

Page 57: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Testable code is more understandable.

Page 58: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Testable code is more robust.

Page 59: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Testable code is more reusable.

Page 60: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

code frameworks

kk/7022179049

Page 61: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

David Spriggs

The Intern

Just make the Intern do the testing.

Page 62: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 63: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 64: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 65: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 66: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 67: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 68: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

David Spriggs

Intern Demo

> intern

Page 69: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

“Writing software is one of the most manual processes in the world, but testing and maintaining it does not have to be.” ― Mark Ethan Trostler, Testable JavaScript

Automating Unit Tests with Karma Test Runner

ryantron/4453018910

Page 70: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 71: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

102002427@N06/9798407

Page 72: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

SpecRunner.html + .js

load in browser

…tests run…

results.

write specs

Page 73: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

https://github.com/tomwayson/esri-jasmine-tutorial

Page 74: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Write Tests

Tests Fail

Write Code

Tests Pass

Tests Pass

Refactor

Page 75: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

> npm install -g karma > cd my-project > npm install karma

sookie/101363593

Page 76: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

> npm install karma-dojo > subl spec/main.js > karma start

https://github.com/tomwayson/esri-karma-tutorial

Page 77: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

/eole/3215868087

Page 78: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

• Dave Bouwman

Page 79: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

automation

Page 80: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

check syntax… run active tests…

check for regression…

automatically…

report coverage…

Page 81: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

SpecRunner.html load in browser …tests run…

results.

Page 82: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

24258698@N04/37656086

Page 83: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

node task runner

Page 84: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

productivity power-tools

Page 85: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

watch jshint

jasmine

Page 86: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

SpecRunner.html load in phantom

…tests run… results in console

runner.tmpl underscore.js

gruntfile.js

Page 87: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

active

fast

all

Tests for the code you are actively working. (fail fast)

Non-Map, Non-Asyn tests that run 100% locally. Used for TravisCI (builds)

All the test specs. Run automatically after active passes. Coverage reports

Page 88: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

24258698@N04/37656086

Page 89: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Don’t Test the Map

Page 90: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

24258698@N04/37656086

Page 91: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Separation of Concerns

“controller”

Page 92: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Separation of Concerns

“controller”

Page 93: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Test the Map Controller

Page 94: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

Map Tests: are slow(er)

usually async need a harness

need dojo

Page 95: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

SpecRunner.html load in phantom

…tests run… results in console

runner.tmpl underscore.js

gruntfile.js

Page 96: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 97: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 98: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

coverage post coming soon

Page 99: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 100: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

where ever you work…

Page 101: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 102: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 103: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 104: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 105: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

spread ideas

Page 106: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

“idea virus”

Page 107: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

write good code

wili/242263471

Page 108: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports

write good tests

kk/5262078254

Page 109: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 110: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 111: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports
Page 112: Testing Tools and Patterns for JavaScript Mapping Applications€¦ · automation . check syntax ... All the test specs. Run automatically after active passes. Coverage reports