MAKING JS TESTS
FAST, EASY, AND FRIENDLY

 | 
cascadiajs2014.formidablelabs.com
@ryan_roemer formidablelabs.com
JS IN THE MODERN WORLD
JavaScript applications are getting
larger and more complex.
Our developer community is growing.
Ou...
YAY!
BUT IS IT GOOD JS?
Our apps are now critical.
The JavaScript must be robust and
reliable.
TESTING!
So, we test — to find bugs early, build
confidence in our code, and allow us to
change things without breaking
ev...
TESTING?
In theory, we agree we should test.
In practice...
THE REALITY
AN OBSERVATION
If dev's won't write or run the tests,
your technology and processes don't
matter.
Will avoid when
Difficul...
SOME TIPS FROM THE
TRENCHES...
... AND FROM TEACHING
OUR FOCUS
Our examples will be frontend unit
tests.
... but should apply to your backend,
integration, and non-JS tests.
THE PERIPHERY
We're not going to talk
about:
wiring up frameworks
debating stacks ( , , etc.)
how to substantively write t...
LET'S MAKE IT BETTER
... and help dev's actually write, run,
and (maybe) love the tests.
  
MAKING TESTS EASY
The tools and process should make the
tests easy to learn, write, and run.
WHY IS TESTING HARD?
Browser idiosyncrasies
Events, timing, async I/O
Test tools, DOM/data fixtures
1. SET A FOUNDATION
Build your infrastructure :
Should be in place from the start (or ASAP)
Integrate and automate (GitHub...
1. SET A FOUNDATION
The tools enable organization and
flexibility.
Reporting (esp. failures)
Asynchronous support
Assertio...
1. SET A FOUNDATION
TL;DR?
/ / orMocha Chai Sinon.JS
Jasmine
A FOUNDATION Demo
describe("CascadiaJS", function () {
it("is awesome!", function () {
expect("CascadiaJS")
.to.include("J...
2. LOWER BARRIERS TO ENTRY
Make no assumptions
Provide test skeletons / "Get out and push"
3. WRITE IT DOWN
New dev's should be able to get started
with just the docs.
The test stack
Conventions, best practices, g...
4. TEACH & LEARN
Have an on-boarding process and training
Promote and expect mentorship
"Baby Steps" - Identify small chun...
MAKING TESTS FAST
The tests must run
blazingly fast.
WHAT IS "FAST"?
Whole suite runs in < 30 seconds
(Yes, the whole thing)
Aim for < 5 seconds
WHY IS TESTING SLOW?
Network
Timers, waits
UI effects
1. KNOW WHAT TO LOOK FOR
Ignore pure JavaScript code execution
Network / communication outside of JS
Explicit waits in cod...
2. FIND THE SLOW POKES
Need a good test reporter.
Test timing results
Flexible / different output formats
FIND THE SLOW TESTS! Demo
it("is fast", function () {});
it("is sort of slow", function (done) {
setTimeout(done, 51);
});...
3. FAKE IT
Use fakes for anything slow /
external.
XHR / backend servers
Timers
Use to patch JS internals
Tests should run...
FAKE IT! Demo
it("is faked and fast", function (done) {
var clock = sinon.useFakeTimers();
setTimeout(function () {
clock....
4. OFFER SHORTCUTS
Provide "relief" if not blazingly fast
(yet).
Run test subsets (.only, grep)
Single-browser runners (e....
MAKING TESTS FRIENDLY
The culture should support testing and
embrace new developers.
WHY IS TESTING DAUNTING?
Variety of backgrounds, experience
Learning curve
Organizational obstacles
1. FIND CHAMPIONS
Testing is too hard to "just
pick up"
Identify or create "test leads"
Spread responsibility and fan out
2. WIN THE HIGHER-UPS OVER
Educate your boss(es):
Create good stories for the cost of bugs vs. stage in pipeline
Track bug...
2. WIN THE HIGHER-UPS OVER
If you are a higher-up, support the
tests:
Allocate sprint / developer time
Fine to ask for pro...
BRINGING IT ALL TOGETHER
Your infrastructure should make it easy for folks to jump into
and write tests
Your infrastructur...
GO FORTH AND TEST!
These are just some of the techniques
you can use to bring the love to testing.
Read the docs! Try it o...
THANKS!

 | 
cascadiajs2014.formidablelabs.com
@ryan_roemer formidablelabs.com
Upcoming SlideShare
Loading in …5
×

CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly

4,496 views

Published on

CascadiaJS 2014 talk about making JavaScript testing easier for new developers, organizations, and seasoned testers.

Published in: Software
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
4,496
On SlideShare
0
From Embeds
0
Number of Embeds
3,859
Actions
Shares
0
Downloads
4
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly

  1. 1. MAKING JS TESTS FAST, EASY, AND FRIENDLY   |  cascadiajs2014.formidablelabs.com @ryan_roemer formidablelabs.com
  2. 2. JS IN THE MODERN WORLD JavaScript applications are getting larger and more complex. Our developer community is growing. Our technology ecosystem is exploding.
  3. 3. YAY!
  4. 4. BUT IS IT GOOD JS? Our apps are now critical. The JavaScript must be robust and reliable.
  5. 5. TESTING! So, we test — to find bugs early, build confidence in our code, and allow us to change things without breaking everything.
  6. 6. TESTING? In theory, we agree we should test. In practice...
  7. 7. THE REALITY
  8. 8. AN OBSERVATION If dev's won't write or run the tests, your technology and processes don't matter. Will avoid when Difficult (to write) Slow (to run) Daunting but, seek when Easy Fast Friendly
  9. 9. SOME TIPS FROM THE TRENCHES...
  10. 10. ... AND FROM TEACHING
  11. 11. OUR FOCUS Our examples will be frontend unit tests. ... but should apply to your backend, integration, and non-JS tests.
  12. 12. THE PERIPHERY We're not going to talk about: wiring up frameworks debating stacks ( , , etc.) how to substantively write tests Mocha Jasmine
  13. 13. LET'S MAKE IT BETTER ... and help dev's actually write, run, and (maybe) love the tests.   
  14. 14. MAKING TESTS EASY The tools and process should make the tests easy to learn, write, and run.
  15. 15. WHY IS TESTING HARD? Browser idiosyncrasies Events, timing, async I/O Test tools, DOM/data fixtures
  16. 16. 1. SET A FOUNDATION Build your infrastructure : Should be in place from the start (or ASAP) Integrate and automate (GitHub, Slack, Travis, etc.) Choose good tools ...
  17. 17. 1. SET A FOUNDATION The tools enable organization and flexibility. Reporting (esp. failures) Asynchronous support Assertions Node.js? Use the same tools
  18. 18. 1. SET A FOUNDATION TL;DR? / / orMocha Chai Sinon.JS Jasmine
  19. 19. A FOUNDATION Demo describe("CascadiaJS", function () { it("is awesome!", function () { expect("CascadiaJS") .to.include("JS").and .to.not.equal("dull"); }); it("fails without love", function () { expect("the tests").to.contain("love"); }); });
  20. 20. 2. LOWER BARRIERS TO ENTRY Make no assumptions Provide test skeletons / "Get out and push"
  21. 21. 3. WRITE IT DOWN New dev's should be able to get started with just the docs. The test stack Conventions, best practices, guides Anything you learn, as you learn it And iterate
  22. 22. 4. TEACH & LEARN Have an on-boarding process and training Promote and expect mentorship "Baby Steps" - Identify small chunks of test work to learn on
  23. 23. MAKING TESTS FAST The tests must run blazingly fast.
  24. 24. WHAT IS "FAST"? Whole suite runs in < 30 seconds (Yes, the whole thing) Aim for < 5 seconds
  25. 25. WHY IS TESTING SLOW? Network Timers, waits UI effects
  26. 26. 1. KNOW WHAT TO LOOK FOR Ignore pure JavaScript code execution Network / communication outside of JS Explicit waits in code (setTimeout, etc.)
  27. 27. 2. FIND THE SLOW POKES Need a good test reporter. Test timing results Flexible / different output formats
  28. 28. FIND THE SLOW TESTS! Demo it("is fast", function () {}); it("is sort of slow", function (done) { setTimeout(done, 51); }); it("is really slow", function (done) { setTimeout(done, 300); }); it("times out", function (done) { setTimeout(done, 2001); });
  29. 29. 3. FAKE IT Use fakes for anything slow / external. XHR / backend servers Timers Use to patch JS internals Tests should run on an airplane with no internet Sinon.JS
  30. 30. FAKE IT! Demo it("is faked and fast", function (done) { var clock = sinon.useFakeTimers(); setTimeout(function () { clock.restore(); done(); }, 5 * 60 * 1000); // Wait 5 minutes! // Simulate 5 min, 1 ms clock.tick(5 * 60 * 1001); });
  31. 31. 4. OFFER SHORTCUTS Provide "relief" if not blazingly fast (yet). Run test subsets (.only, grep) Single-browser runners (e.g., just PhantomJS).
  32. 32. MAKING TESTS FRIENDLY The culture should support testing and embrace new developers.
  33. 33. WHY IS TESTING DAUNTING? Variety of backgrounds, experience Learning curve Organizational obstacles
  34. 34. 1. FIND CHAMPIONS Testing is too hard to "just pick up" Identify or create "test leads" Spread responsibility and fan out
  35. 35. 2. WIN THE HIGHER-UPS OVER Educate your boss(es): Create good stories for the cost of bugs vs. stage in pipeline Track bugs avoided and regressions
  36. 36. 2. WIN THE HIGHER-UPS OVER If you are a higher-up, support the tests: Allocate sprint / developer time Fine to ask for process / priority / goals But don't make dev's re-justify the tests!
  37. 37. BRINGING IT ALL TOGETHER Your infrastructure should make it easy for folks to jump into and write tests Your infrastructure should be blazingly fast, so dev's don't have to wait Everyone should contribute to making the process of running and writing the tests friendly and supported
  38. 38. GO FORTH AND TEST! These are just some of the techniques you can use to bring the love to testing. Read the docs! Try it out! Ask for help!
  39. 39. THANKS!   |  cascadiajs2014.formidablelabs.com @ryan_roemer formidablelabs.com

×