Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frontend Testing - Episode 1
Search
mrgnrdrck
September 20, 2012
Programming
3
520
Frontend Testing - Episode 1
An introduction to testing web frontends, and a quick look at testing with Buster.JS
mrgnrdrck
September 20, 2012
Tweet
Share
More Decks by mrgnrdrck
See All by mrgnrdrck
Crafting lovely git narratives to enable software archaeology
mrgnrdrck
0
210
Focusing on mobile web
mrgnrdrck
0
270
CopenhagenJS, 2012-08
mrgnrdrck
1
160
Closures, this, call and apply
mrgnrdrck
3
560
My toolbox
mrgnrdrck
3
500
Other Decks in Programming
See All in Programming
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.6k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Swift Updates - Learn Languages 2025
koher
2
520
私の後悔をAWS DMSで解決した話
hiramax
4
210
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
650
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Code Review Best Practice
trishagee
71
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Documentation Writing (for coders)
carmenintech
74
5k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Docker and Python
trallard
46
3.6k
Transcript
Frontend Testing Episode #1 A practical guide to getting started
with testing JavaScript with Buster.JS fredag den 21. september 12
Morgan Roderick • Freelance frontend developer • http://roderick.dk • @mrgnrdrck
fredag den 21. september 12
Testing frontends? • Testing backends • Unit tests • Integration
tests • Logging • Monitoring fredag den 21. september 12
What should we test? fredag den 21. september 12
What should we test? • Anything the user can do
in a browser fredag den 21. september 12
What should we test? • Anything the user can do
in a browser • JavaScript units fredag den 21. september 12
What should we test? • Anything the user can do
in a browser • JavaScript units • Templates fredag den 21. september 12
What should we test? • Anything the user can do
in a browser • JavaScript units • Templates • Full stack with integration tests fredag den 21. september 12
Unit tests fredag den 21. september 12
Unit tests • Developer centric fredag den 21. september 12
Unit tests • Developer centric • Quality over time fredag
den 21. september 12
Unit tests • Developer centric • Quality over time •
Prevent regressions fredag den 21. september 12
Unit tests • Developer centric • Quality over time •
Prevent regressions • Test one thing in isolation fredag den 21. september 12
Buster.JS fredag den 21. september 12
Buster.JS • Server fredag den 21. september 12
Buster.JS • Server • Runner fredag den 21. september 12
Buster.JS • Server • Runner • Built with node fredag
den 21. september 12
Buster.JS • Server • Runner • Built with node •
Replaces JsTestDriver fredag den 21. september 12
Buster.JS • Server • Runner • Built with node •
Replaces JsTestDriver • Integrates SinonJS fredag den 21. september 12
Buster.JS • Server • Runner • Built with node •
Replaces JsTestDriver • Integrates SinonJS • Can be used with Jasmine, QUnit, whatever fredag den 21. september 12
testCase buster.testCase( 'Greeter', { 'setUp' : function(){ console.log('before test'); },
'tearDown' : function(){ console.log('after test'); }, 'say method should log to console' : function(){ assert( false ); } }); fredag den 21. september 12
assert / refute fredag den 21. september 12
assert / refute assert assert.same assert.equals assert.defined assert.isNull assert.match assert.isObject
assert.isFunction assert.exception assert.tagName assert.className fredag den 21. september 12
assert / refute assert assert.same assert.equals assert.defined assert.isNull assert.match assert.isObject
assert.isFunction assert.exception assert.tagName assert.className refute refute.same refute.equals refute.defined refute.isNull refute.match refute.isObject refute.isFunction refute.exception refute.tagName refute.className fredag den 21. september 12
Enough talk, let’s see some code! fredag den 21. september
12
Point Quad Tree • Multi-dimensional binary search tree for storing
point data • http://en.wikipedia.org/wiki/Quadtree fredag den 21. september 12
fredag den 21. september 12
Lessons learned fredag den 21. september 12
Lessons learned • Writing tests is just like writing code,
but difficulty^2 fredag den 21. september 12
Lessons learned • Writing tests is just like writing code,
but difficulty^2 • Use constructors, not module pattern fredag den 21. september 12
Lessons learned • Writing tests is just like writing code,
but difficulty^2 • Use constructors, not module pattern • Isolate tests fredag den 21. september 12
Lessons learned • Writing tests is just like writing code,
but difficulty^2 • Use constructors, not module pattern • Isolate tests • Isolate tests fredag den 21. september 12
Lessons learned • Writing tests is just like writing code,
but difficulty^2 • Use constructors, not module pattern • Isolate tests • Isolate tests • Readability > DRY fredag den 21. september 12
Lessons learned • Writing tests is just like writing code,
but difficulty^2 • Use constructors, not module pattern • Isolate tests • Isolate tests • Readability > DRY • Read Clean Code fredag den 21. september 12
Future topics fredag den 21. september 12
Future topics • Spies, stubs and mocks with SinonJS fredag
den 21. september 12
Future topics • Spies, stubs and mocks with SinonJS •
Domain specific tests with custom assertions fredag den 21. september 12
Future topics • Spies, stubs and mocks with SinonJS •
Domain specific tests with custom assertions • Testing asynchronous code fredag den 21. september 12
Future topics • Spies, stubs and mocks with SinonJS •
Domain specific tests with custom assertions • Testing asynchronous code • Testing HTML rendering fredag den 21. september 12
Future topics • Spies, stubs and mocks with SinonJS •
Domain specific tests with custom assertions • Testing asynchronous code • Testing HTML rendering • Integration testing fredag den 21. september 12
Thank you! Questions? @mrgnrdrck fredag den 21. september 12