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
500
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
200
Focusing on mobile web
mrgnrdrck
0
230
CopenhagenJS, 2012-08
mrgnrdrck
1
100
Closures, this, call and apply
mrgnrdrck
3
480
My toolbox
mrgnrdrck
3
490
Other Decks in Programming
See All in Programming
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
VS Code をプロダクトにどう取り込むか
onomax
1
340
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
130
使ってみよう Azure AI Document Intelligence
kosmosebi
2
270
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Goのmultiple errorsについて (2024年4月版)
syumai
1
350
코틀린으로 멀티플랫폼 만들기
pangmoo
0
140
Front-end application development, Symfony-style(s)
dunglas
2
2k
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Web Components: a chance to create the future
zenorocha
305
41k
GraphQLとの向き合い方2022年版
quramy
31
12k
Gamification - CAS2011
davidbonilla
76
4.6k
Building Applications with DynamoDB
mza
88
5.6k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
How to Ace a Technical Interview
jacobian
272
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.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