Testing modern-day JavaScript Applications

Transcript

1. Build for the web: Karma/Webpack
2. Build for the web: Karma/Webpack
3. Testing modern-day JavaScript applications
4. Who is I? Remon Oldenbeuving https://twitter.com/R51 https://github.com/RSO Software Engineer @ HackerOne
5. hackerone $ git log —reverse | head -6 commit 450099be9115481241edda6aec3968419ea39e2f Author: Remon Oldenbeuving <r.s.oldenbeuving@gmail.com> Date: Fri Dec 14 03:29:34 2012 -0800 Initial commit
6. hackerone $ git log —reverse | head -6 commit 450099be9115481241edda6aec3968419ea39e2f Author: Remon Oldenbeuving <r.s.oldenbeuving@gmail.com> Date: Fri Dec 14 03:29:34 2012 -0800 Initial commit
7. Who is I? Remon Oldenbeuving https://twitter.com/R51 https://github.com/RSO Software Engineer @ HackerOne
8. Testing modern-day JavaScript applications
9. “Writing frontend tests should be as obvious as writing backend tests” Me, just now
10. hackerone $ bundle exec spec spec/integration ............................................. 5236 examples, 0 failures real 6m34.734s hackerone $ bundle exec teaspoon ............................................. 559 examples, 0 failures real 1m55.100s
12. Why? • Harder to write (good) JavaScript tests • Culture • All objects defined in global scope • Slow (?)
14. Where we at? • Everything is defined on the window • Mocha • SinonJS • ChaiJS • Teaspoon
15. Where do we want to go? • Modules (both internal and external) • Split frontend from Rails • Sauce Labs
16. Modules • Browserify • Modular (haha) approach • Lots of plugins • Webpack • Ability to bundle all assets
17. Mocking modules • A good way to scope your test • Could help with keeping the DOM of the testsuite clean • But where to stop?
18. 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);
19. 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() {});
20. Test runners • Zuul • Mocha • Karma • Jest
21. Test runners: Zuul
22. 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
23. Test runners: Karma • Created by the Angular team • Modular • Big community
24. 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
26. 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
27. Demo time?
28. Questions?