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
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
240
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
190
チームのテスト力を鍛える
goyoki
3
380
testingを眺める
matumoto
1
140
Reading Rails 1.0 Source Code
okuramasafumi
0
240
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
320
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
AIでLINEスタンプを作ってみた
eycjur
1
230
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
為你自己學 Python - 冷知識篇
eddie
1
350
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
1
140
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Site-Speed That Sticks
csswizardry
10
820
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
KATA
mclloyd
32
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Side Projects
sachag
455
43k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
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