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
32
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
39
Other Decks in Programming
See All in Programming
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
270
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.4k
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
930
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Elm Form Validation
bkuhlmann
0
510
PHPはいつから死んでいるかの調査
chiroruxx
1
400
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
370
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1025
450k
Unsuck your backbone
ammeep
663
57k
What's new in Ruby 2.0
geeforr
337
31k
How to Ace a Technical Interview
jacobian
272
22k
Code Reviewing Like a Champion
maltzj
514
39k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Product Roadmaps are Hard
iamctodd
44
9.7k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Designing for Performance
lara
601
67k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Why Our Code Smells
bkeepers
PRO
331
56k
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?