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
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
AI Ramen Fight
yusukebe
0
110
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
650
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
NEWT Backend Evolution
xpromx
1
150
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.3k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
690
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
640
PHPカンファレンス関西2025 基調講演
sugimotokei
5
930
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.8k
RailsConf 2023
tenderlove
30
1.2k
Building Applications with DynamoDB
mza
95
6.5k
Fireside Chat
paigeccino
37
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
Music & Morning Musume
bryan
46
6.7k
A designer walks into a library…
pauljervisheath
207
24k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Unsuck your backbone
ammeep
671
58k
How STYLIGHT went responsive
nonsquared
100
5.6k
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?