cascadiajs 2014 - making javascript tests fast, easy & friendly
DESCRIPTION
CascadiaJS 2014 talk about making JavaScript testing easier for new developers, organizations, and seasoned testers.TRANSCRIPT
![Page 1: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/1.jpg)
MAKING JS TESTS
FAST, EASY, AND FRIENDLY
|
cascadiajs2014.formidablelabs.com
@ryan_roemer formidablelabs.com
![Page 2: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/2.jpg)
JS IN THE MODERN WORLDJavaScript applications are getting
larger and more complex.
Our developer community is growing.Our technology ecosystem is
exploding.
![Page 3: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/3.jpg)
YAY!
![Page 4: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/4.jpg)
BUT IS IT GOOD JS?Our apps are now critical.
The JavaScript must be robust andreliable.
![Page 5: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/5.jpg)
TESTING!So, we test — to find bugs early, build
confidence in our code, and allow us tochange things without breaking
everything.
![Page 6: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/6.jpg)
TESTING?In theory, we agree we should test.
In practice...
![Page 7: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/7.jpg)
THE REALITY
![Page 8: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/8.jpg)
AN OBSERVATIONIf dev's won't write or run the tests,
your technology and processes don'tmatter.
Will avoid whenDifficult (to write)
Slow (to run)
Daunting
but, seek whenEasy
Fast
Friendly
![Page 11: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/11.jpg)
OUR FOCUSOur examples will be frontend unit
tests.
... but should apply to your backend,integration, and non-JS tests.
![Page 12: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/12.jpg)
THE PERIPHERYWe're not going to talk
about:wiring up frameworks
debating stacks ( , , etc.)
how to substantively write tests
Mocha Jasmine
![Page 13: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/13.jpg)
LET'S MAKE IT BETTER... and help dev's actually write, run,
and (maybe) love the tests.
![Page 14: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/14.jpg)
MAKING TESTS EASYThe tools and process should make the
tests easy to learn, write, and run.
![Page 15: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/15.jpg)
WHY IS TESTING HARD?Browser idiosyncrasies
Events, timing, async I/O
Test tools, DOM/data fixtures
![Page 16: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/16.jpg)
1. SET A FOUNDATIONBuild your infrastructure :
Should be in place from the start (or ASAP)
Integrate and automate (GitHub, Slack, Travis, etc.)
Choose good tools ...
![Page 17: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/17.jpg)
1. SET A FOUNDATIONThe tools enable organization and
flexibility.Reporting (esp. failures)
Asynchronous support
Assertions
Node.js? Use the same tools
![Page 18: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/18.jpg)
1. SET A FOUNDATIONTL;DR? / / orMocha Chai Sinon.JS
Jasmine
![Page 19: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/19.jpg)
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"); });});
![Page 20: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/20.jpg)
2. LOWER BARRIERS TO ENTRYMake no assumptions
Provide test skeletons / "Get out and push"
![Page 21: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/21.jpg)
3. WRITE IT DOWNNew 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
![Page 22: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/22.jpg)
4. TEACH & LEARNHave an on-boarding process and training
Promote and expect mentorship
"Baby Steps" - Identify small chunks of test work to learn on
![Page 23: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/23.jpg)
MAKING TESTS FASTThe tests must run
blazingly fast.
![Page 24: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/24.jpg)
WHAT IS "FAST"?Whole suite runs in < 30 seconds
(Yes, the whole thing)
Aim for < 5 seconds
![Page 25: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/25.jpg)
WHY IS TESTING SLOW?Network
Timers, waits
UI effects
![Page 26: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/26.jpg)
1. KNOW WHAT TO LOOK FORIgnore pure JavaScript code execution
Network / communication outside of JS
Explicit waits in code (setTimeout, etc.)
![Page 27: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/27.jpg)
2. FIND THE SLOW POKESNeed a good test reporter.
Test timing results
Flexible / different output formats
![Page 28: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/28.jpg)
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);});
![Page 29: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/29.jpg)
3. FAKE ITUse 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
![Page 30: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/30.jpg)
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);});
![Page 31: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/31.jpg)
4. OFFER SHORTCUTSProvide "relief" if not blazingly fast
(yet).Run test subsets (.only, grep)
Single-browser runners (e.g., just PhantomJS).
![Page 32: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/32.jpg)
MAKING TESTS FRIENDLYThe culture should support testing and
embrace new developers.
![Page 33: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/33.jpg)
WHY IS TESTING DAUNTING?Variety of backgrounds, experience
Learning curve
Organizational obstacles
![Page 34: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/34.jpg)
1. FIND CHAMPIONSTesting is too hard to "just
pick up"Identify or create "test leads"
Spread responsibility and fan out
![Page 35: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/35.jpg)
2. WIN THE HIGHER-UPS OVEREducate your boss(es):
Create good stories for the cost of bugs vs. stage in pipeline
Track bugs avoided and regressions
![Page 36: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/36.jpg)
2. WIN THE HIGHER-UPS OVERIf 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!
![Page 37: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/37.jpg)
BRINGING IT ALL TOGETHERYour infrastructure should make it easy for folks to jump intoand write tests
Your infrastructure should be blazingly fast, so dev's don'thave to wait
Everyone should contribute to making the process of runningand writing the tests friendly and supported
![Page 38: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/38.jpg)
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!
![Page 39: CascadiaJS 2014 - Making JavaScript Tests Fast, Easy & Friendly](https://reader034.vdocuments.mx/reader034/viewer/2022051817/547d7bb8b4af9f975a8b478a/html5/thumbnails/39.jpg)
THANKS!
|
cascadiajs2014.formidablelabs.com
@ryan_roemer formidablelabs.com