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
550
My toolbox
mrgnrdrck
3
500
Other Decks in Programming
See All in Programming
実践 Dev Containers × Claude Code
touyu
1
130
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
0
170
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
280
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
220
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
310
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
760
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
380
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
170
自作OSでDOOMを動かしてみた
zakki0925224
0
330
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
790
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Adopting Sorbet at Scale
ufuk
77
9.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
For a Future-Friendly Web
brad_frost
179
9.9k
Navigating Team Friction
lara
188
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Cost Of JavaScript in 2023
addyosmani
51
8.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
KATA
mclloyd
31
14k
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