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
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
PipeCDのプラグイン化で目指すところ
warashi
1
280
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
技術同人誌をMCP Serverにしてみた
74th
1
650
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
AIともっと楽するE2Eテスト
myohei
6
2.6k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A Tale of Four Properties
chriscoyier
160
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Balancing Empowerment & Direction
lara
1
430
BBQ
matthewcrist
89
9.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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