MAKING JS TESTS

FAST, EASY, AND FRIENDLY

|

cascadiajs2014.formidablelabs.com

@ryan_roemer formidablelabs.com

JS IN THE MODERN WORLDJavaScript applications are getting

larger and more complex.

Our developer community is growing.Our technology ecosystem is

exploding.

YAY!

BUT IS IT GOOD JS?Our apps are now critical.

The JavaScript must be robust andreliable.

TESTING!So, we test — to find bugs early, build

confidence in our code, and allow us tochange things without breaking

everything.

TESTING?In theory, we agree we should test.

In practice...

THE REALITY

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

SOME TIPS FROM THETRENCHES...

... AND FROM TEACHING

OUR FOCUSOur examples will be frontend unit

tests.

... but should apply to your backend,integration, and non-JS tests.

THE PERIPHERYWe're not going to talk

about:wiring up frameworks

debating stacks ( , , etc.)

how to substantively write tests

Mocha Jasmine

LET'S MAKE IT BETTER... and help dev's actually write, run,

and (maybe) love the tests.

MAKING TESTS EASYThe 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 FOUNDATIONBuild your infrastructure :

Should be in place from the start (or ASAP)

Integrate and automate (GitHub, Slack, Travis, etc.)

Choose good tools ...

1. SET A FOUNDATIONThe tools enable organization and

flexibility.Reporting (esp. failures)

Asynchronous support

Assertions

Node.js? Use the same tools

1. SET A FOUNDATIONTL;DR? / / orMocha Chai Sinon.JS

Jasmine

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"); });});

2. LOWER BARRIERS TO ENTRYMake no assumptions

Provide test skeletons / "Get out and push"

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

4. TEACH & LEARNHave an on-boarding process and training

Promote and expect mentorship

"Baby Steps" - Identify small chunks of test work to learn on

MAKING TESTS FASTThe 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 FORIgnore pure JavaScript code execution

Network / communication outside of JS

Explicit waits in code (setTimeout, etc.)

2. FIND THE SLOW POKESNeed 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);});it("is really slow", function (done) { setTimeout(done, 300);});it("times out", function (done) { setTimeout(done, 2001);});

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

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);});

4. OFFER SHORTCUTSProvide "relief" if not blazingly fast

(yet).Run test subsets (.only, grep)

Single-browser runners (e.g., just PhantomJS).

MAKING TESTS FRIENDLYThe culture should support testing and

embrace new developers.

WHY IS TESTING DAUNTING?Variety of backgrounds, experience

Learning curve

Organizational obstacles

1. FIND CHAMPIONSTesting is too hard to "just

pick up"Identify or create "test leads"

Spread responsibility and fan out

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

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!

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

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!

THANKS!

|

cascadiajs2014.formidablelabs.com

@ryan_roemer formidablelabs.com