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
Testing modern-day JavaScript Applications
Search
Remon Oldenbeuving
September 09, 2015
Programming
0
33
Testing modern-day JavaScript Applications
Remon Oldenbeuving
September 09, 2015
Tweet
Share
More Decks by Remon Oldenbeuving
See All by Remon Oldenbeuving
Groningen.rb RailsConf 2015 recap
rso
0
40
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
150
VS Code Update for GitHub Copilot
74th
1
360
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
370
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
380
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
1
310
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
5つのアンチパターンから学ぶLT設計
narihara
1
110
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
880
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
170
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Visualization
eitanlees
146
16k
Code Reviewing Like a Champion
maltzj
524
40k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Optimizing for Happiness
mojombo
379
70k
Site-Speed That Sticks
csswizardry
10
660
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Embracing the Ebb and Flow
colly
86
4.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Transcript
Build for the web: Karma/Webpack
Build for the web: Karma/Webpack
Testing modern-day JavaScript applications
Who is I? Remon Oldenbeuving https://twitter.com/R51 https://github.com/RSO Software Engineer @
HackerOne
hackerone $ git log —reverse | head -6 commit 450099be9115481241edda6aec3968419ea39e2f
Author: Remon Oldenbeuving <
[email protected]
> Date: Fri Dec 14 03:29:34 2012 -0800 Initial commit
hackerone $ git log —reverse | head -6 commit 450099be9115481241edda6aec3968419ea39e2f
Author: Remon Oldenbeuving <
[email protected]
> Date: Fri Dec 14 03:29:34 2012 -0800 Initial commit
Who is I? Remon Oldenbeuving https://twitter.com/R51 https://github.com/RSO Software Engineer @
HackerOne
Testing modern-day JavaScript applications
“Writing frontend tests should be as obvious as writing backend
tests” Me, just now
hackerone $ bundle exec spec spec/integration ............................................. 5236 examples, 0
failures real 6m34.734s hackerone $ bundle exec teaspoon ............................................. 559 examples, 0 failures real 1m55.100s
None
Why? • Harder to write (good) JavaScript tests • Culture
• All objects defined in global scope • Slow (?)
None
Where we at? • Everything is defined on the window
• Mocha • SinonJS • ChaiJS • Teaspoon
Where do we want to go? • Modules (both internal
and external) • Split frontend from Rails • Sauce Labs
Modules • Browserify • Modular (haha) approach • Lots of
plugins • Webpack • Ability to bundle all assets
Mocking modules • A good way to scope your test
• Could help with keeping the DOM of the testsuite clean • But where to stop?
Mocking modules • Browserify: proxyquireify (WTF) # component.js var link
= require(‘link’); # component.test.js var proxyquire = require(‘proxyquireify’)(require); var stubs = { link: function() {} }; var component = proxyquire(‘component’, stubs);
Mocking modules • Webpack: rewire # component.js var link =
require(‘link’); # component.test.js var rewire = require(‘rewire’); var component = rewire(‘component’); component.__set__(‘link’, function() {});
Test runners • Zuul • Mocha • Karma • Jest
Test runners: Zuul
Test runners: Mocha • Test framework-gone-runner • Command line tool
runs tests in Node, requires JSDOM • No support for Sauce Labs • Too simple for what we need
Test runners: Karma • Created by the Angular team •
Modular • Big community
Test runners: Jest • Created by Facebook, used by React
• Automagic mocking of external dependencies • No choice in framework (Jasmine over Mocha) • Runs tests in parallel • Fake DOM (JSDOM) • No support for Sauce Labs
None
Karma/Webpack • Pro: • Probably the most mainstream approach •
Two powerful communities • Con: • Either run all tests all the times, or create a separate bundle for every test
Demo time?
Questions?