The document discusses strategies for making JavaScript tests fast, easy, and friendly. It recommends setting up testing infrastructure with good tools, lowering barriers to entry, documenting processes, and teaching/learning. To make tests fast, it suggests identifying and faking slow parts of tests. To make tests friendly, it advises finding champions, winning manager support, and contributing to a supportive culture. The overall goal is to establish a testing process that developers enjoy and that finds bugs early.

1. MAKING JS TESTS
FAST, EASY, AND FRIENDLY

 | 
cascadiajs2014.formidablelabs.com
@ryan_roemer formidablelabs.com

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. YAY!

4. BUT IS IT GOOD JS?
Our apps are now critical.
The JavaScript must be robust and
reliable.

5. TESTING!
So, we test — to find bugs early, build
confidence in our code, and allow us to
change things without breaking
everything.

6. TESTING?
In theory, we agree we should test.
In practice...

7. THE REALITY

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. SOME TIPS FROM THE
TRENCHES...

10. ... AND FROM TEACHING

11. OUR FOCUS
Our examples will be frontend unit
tests.
... but should apply to your backend,
integration, and non-JS tests.

12. THE PERIPHERY
We're not going to talk
about:
wiring up frameworks
debating stacks ( , , etc.)
how to substantively write tests
Mocha Jasmine

13. LET'S MAKE IT BETTER
... and help dev's actually write, run,
and (maybe) love the tests.
  

14. MAKING TESTS EASY
The tools and process should make the
tests easy to learn, write, and run.

15. WHY IS TESTING HARD?
Browser idiosyncrasies
Events, timing, async I/O
Test tools, DOM/data fixtures

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. 1. SET A FOUNDATION
The tools enable organization and
flexibility.
Reporting (esp. failures)
Asynchronous support
Assertions
Node.js? Use the same tools

18. 1. SET A FOUNDATION
TL;DR?
/ / orMocha Chai Sinon.JS
Jasmine

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. 2. LOWER BARRIERS TO ENTRY
Make no assumptions
Provide test skeletons / "Get out and push"

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. 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. MAKING TESTS FAST
The tests must run
blazingly fast.

24. WHAT IS "FAST"?
Whole suite runs in < 30 seconds
(Yes, the whole thing)
Aim for < 5 seconds

25. WHY IS TESTING SLOW?
Network
Timers, waits
UI effects

26. 1. KNOW WHAT TO LOOK FOR
Ignore pure JavaScript code execution
Network / communication outside of JS
Explicit waits in code (setTimeout, etc.)

27. 2. FIND THE SLOW POKES
Need a good test reporter.
Test timing results
Flexible / different output formats

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. 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. 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. 4. OFFER SHORTCUTS
Provide "relief" if not blazingly fast
(yet).
Run test subsets (.only, grep)
Single-browser runners (e.g., just PhantomJS).

32. MAKING TESTS FRIENDLY
The culture should support testing and
embrace new developers.

33. WHY IS TESTING DAUNTING?
Variety of backgrounds, experience
Learning curve
Organizational obstacles

34. 1. FIND CHAMPIONS
Testing is too hard to "just
pick up"
Identify or create "test leads"
Spread responsibility and fan out

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. 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. 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. 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. THANKS!

 | 
cascadiajs2014.formidablelabs.com
@ryan_roemer formidablelabs.com